each(callback)
以每一個匹配的元素作為上下文來執行一個函數。 意味著,每次執行傳遞進來的函數時,函數中的this關鍵字都指向一個不同的DOM元素(每次都是一個不同的匹配元素)。而且,在每次執行函數時,都會給函數傳遞一個表示作為執行環境的元素在匹配的元素集合中所處位置的數字值作為參數(從零開始的整形)。
返回 'false' 將停止循環 (就像在普通的循環中使用 'break')。返回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')。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 代碼:
<img/><img/>jQuery 代碼:
$("img").each(function(i){結果:
[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]如果你想得到 jQuery對象,可以使用 $(this) 函數。
jQuery 代碼:
$("img").each(function(){你可以使用 '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; } });});--------------------------------------------------------------------------------------------------------------------------------
Number
計算文檔中所有圖片數量
HTML 代碼:
<img src="test1.jpg"/> <img src="test2.jpg"/>jQuery 代碼:
$("img").size();結果:
2 -------------------------------------------------------------------------------------------------------------------------Number
計算文檔中所有圖片數量
HTML 代碼:
<img src="test1.jpg"/> <img src="test2.jpg"/>jQuery 代碼:
$("img").length;結果:
2 ---------------------------------------------------------------------------------------------------------------------------------------取得所有匹配的 DOM 元素集合。
這是取得所有匹配元素的一種向後兼容的方式(不同於jQuery對象,而實際上是元素數組)。
如果你想要直接操作 DOM 對象而不是 jQuery 對象,這個函數非常有用。
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.Array<Element>
選擇文檔中所有圖像作為元素數組,並用數組內建的 reverse 方法將數組反向。
HTML 代碼:
<img src="test1.jpg"/> <img src="test2.jpg"/>jQuery 代碼:
$("img").get().reverse();結果:
[ <img src="test2.jpg"/> <img src="test1.jpg"/> ] ---------------------------------------------------------------------------------------------------------------------------------------Element
index (Number) :取得第 index 個位置上的元素
HTML 代碼:
<img src="test1.jpg"/> <img src="test2.jpg"/>jQuery 代碼:
$("img").get(0);結果:
[ <img src="test1.jpg"/> ] ---------------------------------------------------------------------------------------------------------------------------------------Number
subject (Element) : 要搜索的對象
返回ID值為foobar的元素的索引值值。
HTML 代碼:
<div id="foobar"><b></b><span id="foo"></span></div>jQuery 代碼:
$("*").index($('#foobar')[0])結果:
5