1つのオブジェクトを学習するjquery 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()

一致するすべての DOM 要素のコレクションを取得します。

これは、一致するすべての要素を取得する下位互換性のある方法です (実際には要素の配列である jQuery オブジェクトとは異なります)。

この関数は、jQuery オブジェクトではなく DOM オブジェクトを直接操作したい場合に便利です。

一致するすべての DOM 要素にアクセスします。

これは、一致するすべての要素 (実際には要素の配列である jQuery オブジェクト自体を除く) にアクセスする下位互換性のある方法として機能します。代わりに DOM 要素自体を操作する必要がある場合に便利です。組み込みの jQuery 関数の使用について。

戻り値

配列

例

ドキュメント内のすべての画像を要素の配列として選択し、配列の組み込みの reverse メソッドを使用して配列を反転します。

HTML コード:

jQuery コード:

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

結果:

[

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

get(インデックス)

一致する要素の 1 つを取得します。 num は、どの一致要素が取得されたかを示します。

これにより、jQuery 関数を使用するのではなく、実際の DOM 要素を選択して直接操作できるようになります。 $(this).get(0) は $(this)[0] と同等です。

一致したセット内の指定されたインデックスにある単一の一致した DOM 要素にアクセスします。

これにより、必ずしも jQuery 機能を使用しなくても、実際の DOM 要素を抽出して直接操作できるようになります。$(this).get(0) と呼ばれるこの関数は、jQuery オブジェクトで角かっこ表記を使用するのと同じです。それ自体は $(this)[0] のようになります。

戻り値

要素

パラメータ

index (数値): インデックス位置 の要素を取得します

例

HTML コード:

jQuery コード:

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

結果:

[ ]

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

インデックス(件名)

パラメータで表されるオブジェクトに一致する要素を検索し、対応する要素のインデックス値を返します。

一致する要素が見つかった場合は 0 から始まり、一致する要素が見つからなかった場合は -1 が返されます。

オブジェクトの一致するすべての要素を検索し、見つかった場合は、ゼロから始まる要素のインデックスを返します。

オブジェクトが見つからなかった場合は -1 を返します。

戻り値

番号

パラメータ

件名

(要素): 検索するオブジェクト 例

ID 値が foobar である要素のインデックス値を返します。

HTML コード:

jQuery コード:

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

結果:

5