jquery learning one Object access_jquery

each（）

each(callback)

以每一个匹配的元素作为上下文来执行一个函数。

意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。

而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整形）。

返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

---

Execute a function within the context of every matched element.

This means that every time the passed-in function is executed (which is once for every element matched) the 'this' keyword points to the specific DOM element.

Additionally, the function, when executed, is passed a single argument representing the position of the element in the matched set (integer, zero-index).

Returning 'false' from within the each function completely stops the loop through all of the elements (this is like using a 'break' with a normal loop). Returning 'true' from within the loop skips to the next iteration (this is like using a 'continue' with a normal loop).

返回值

jQuery

参数

callback (Function) : 对于每个匹配的元素所要执行的函数

示例

迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

HTML 代码:

jQuery 代码:

$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });

结果:

[ , ]

如果你想得到 jQuery对象，可以使用 $(this) 函数。

jQuery 代码:

$("img").each(function(){
  $(this).toggleClass("example");
});

你可以使用 'return' 来提前跳出 each() 循环。

HTML 代码:

<button>Change colors</button><span></span> <div></div> <div></div><div></div> <div></div><div id="stop">Stop here</div> <div></div><div></div><div></div>

jQuery 代码:

$("button").click(function () { $("div").each(function (index, domEle) {  // domEle == this  $(domEle).css("backgroundColor", "yellow");  if ($(this).is("#stop")) {  $("span").text("Stopped at div index #" + index);  return false;  } });});

--------------------------------------------------------------------------------------------------------------------------------

size()

jQuery 对象中元素的个数。

这个函数的返回值与 jQuery 对象的'length' 属性一致。

The number of elements in the jQuery object.

This returns the same number as the 'length' property of the jQuery object.

返回值

Number

示例

计算文档中所有图片数量

HTML 代码:

jQuery 代码:

$("img").size();

结果:

2

-------------------------------------------------------------------------------------------------------------------------

length

jQuery 对象中元素的个数。

当前匹配的元素个数。 size 将返回相同的值。

The number of elements in the jQuery object.

The number of elements currently matched. The size function will return the same value.

返回值

Number

示例

计算文档中所有图片数量

HTML 代码:

jQuery 代码:

$("img").length;

结果:

2

---------------------------------------------------------------------------------------------------------------------------------------

get()

Get a collection of all matching DOM elements.

This is a backwards-compatible way of getting all matching elements (unlike jQuery objects, which are actually arrays of elements).

This function is useful if you want to directly manipulate DOM objects instead of jQuery objects.

Access all matched DOM elements.

This serves as a backwards-compatible way of accessing all matched elements (other than the jQuery object itself, which is, in fact, an array of elements). It is useful if you need to operate on the DOM elements themselves instead of using built-in jQuery functions.

Return value

Array

Example

Select all images in the document as an array of elements, and use the built-in reverse method of the array to reverse the array.

HTML code:

jQuery code:

$("img").get().reverse();

Result:

[ ]

-------------------------------------------------- -------------------------------------------------- ----------------------------------------

get(index)

Get one of the matching elements. num indicates which matching element is obtained.

This allows you to select an actual DOM element and manipulate it directly, rather than through jQuery functions. $(this).get(0) is equivalent to $(this)[0].

Access a single matched DOM element at a specified index in the matched set.

This allows you to extract the actual DOM element and operate on it directly without necessarily using jQuery functionality on it. This function called as $(this).get(0) is the equivalent of using square bracket notation on the jQuery object itself like $(this)[0].

Return value

Element

Parameters

index (Number): Get the element at the index position

Example

HTML code:

jQuery code:

$("img").get(0);

Result:

[ ]

-------------------------------------------------- -------------------------------------------------- ----------------------------------------

index(subject)

Search for elements matching the object represented by the parameter and return the index value of the corresponding element.

If a matching element is found, the return starts from 0; if no matching element is found, -1 is returned.

Searches every matched element for the object and returns the index of the element, if found, starting with zero.

Returns -1 if the object wasn't found.

Return value

Number

Parameters

subject (Element): The object to search for

Example

Returns the index value of the element whose ID value is foobar.

HTML code:

jQuery code:

$("*").index($('#foobar')[0])

Result:

5