jQuery的對象訪問函數(get,index,size,each)
1.get() 元素集合
取得所有匹配的 DOM 元素集合。 這是取得所有匹配元素的一種向後兼容的方式（不同於jQuery對象，而實際上是元素數組）。 如果你想要直接操作 DOM 對象而不是 jQuery 對象，這個函數非常有用。 示例 描述: 選擇文檔中所有圖像作為元素數組，並用數組內建的 reverse 方法將數組反向。 HTML 代碼: <img src="test1.jpg"/> <img src="test2.jpg"/>jQuery 代碼: $("img").get().reverse();結果: [ <img src="test2.jpg"/> <img src="test1.jpg"/> ]
2.get(index) 返回的是DOM元素
取得其中一個匹配的元素。 num表示取得第幾個匹配的元素。 這能夠讓你選擇一個實際的DOM 元素並且對他直接操作，而不是通過 jQuery 函數。$(this).get(0)與$(this)[0]等價。 參數 indexNumber取得第 index 個位置上的元素 示例 描述: HTML 代碼: <img src="test1.jpg"/> <img src="test2.jpg"/>jQuery 代碼: $("img").get(0);結果: [ <img src="test1.jpg"/> ]
3.index() 查找元素在同輩中位置
搜索匹配的元素，並返回相應元素的索引值，從0開始計數。
如果不給 .index() 方法傳遞參數，那麽返回值就是這個jQuery對象集合中第一個元素相對於其同輩元素的位置。
如果參數是一組DOM元素或者jQuery對象，那麽返回值就是傳遞的元素相對於原先集合的位置。
如果參數是一個選擇器，那麽返回值就是原先元素相對於選擇器匹配元素中的位置。如果找不到匹配的元素，則返回-1。
具體請參考示例。
參數
subject (可選)Selector,Element
要搜索的對象
示例
描述:
查找元素的索引值
HTML 代碼:
<ul> <li id="foo">foo</li> <li id="bar">bar</li> <li id="baz">baz</li> </ul>
jQuery 代碼:
$(‘li‘).index(document.getElementById(‘bar‘)); //1，傳遞一個DOM對象，返回這個對象在原先集合中的索引位置 $(‘li‘).index($(‘#bar‘)); //1，傳遞一個jQuery對象 $(‘li‘).index($(‘li:gt(0)‘)); //1，傳遞一組jQuery對象，返回這個對象中第一個元素在原先集合中的索引位置 $(‘#bar‘).index(‘li‘); //1，傳遞一個選擇器，返回#bar在所有li中的做引位置 $(‘#bar‘).index(); //1，不傳遞參數，返回這個元素在同輩中的索引位置。
4.each遍歷對象的方法: 循環遍歷對象
以每一個匹配的元素作為上下文來執行一個函數。
意味著，每次執行傳遞進來的函數時，函數中的this關鍵字都指向一個不同的DOM元素（每次都是一個不同的匹配元素）。而且，在每次執行函數時，都會給函數傳遞一個表示作為執行環境的元素在匹配的元素集合中所處位置的數字值作為參數（從零開始的整型）。 返回 ‘false‘ 將停止循環 (就像在普通的循環中使用 ‘break‘)。返回 ‘true‘ 跳至下一個循環(就像在普通的循環中使用‘continue‘)。
參數
callbackFunction
對於每個匹配的元素所要執行的函數
示例
描述:
叠代兩個圖像，並設置它們的 src 屬性。註意:此處 this 指代的是 DOM 對象而非 jQuery 對象。
HTML 代碼:
<img/><img/>
jQuery 代碼:
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
結果:
[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
描述:
如果你想得到 jQuery對象，可以使用 $(this) 函數。
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 代碼:
$("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;
}
});
});
5.length屬性: 與size()一樣
jQuery 對象中元素的個數。
當前匹配的元素個數。 size 將返回相同的值。
示例
描述:
計算文檔中所有圖片數量
HTML 代碼:
<img src="test1.jpg"/> <img src="test2.jpg"/>
jQuery 代碼:
$("img").length;
結果:2
6. selector 返回選擇器
jQuery 1.3新增。返回傳給jQuery()的原始選擇器。
換句話說，就是返回你用什麽選擇器來找到這個元素的。可以與context一起使用，用於精確檢測選擇器查詢情況。這兩個屬性對插件開發人員很有用。
示例
描述:
確定查詢的選擇器
jQuery 代碼:
$("ul")
.append("<li>" + $("ul").selector + "</li>")
.append("<li>" + $("ul li").selector + "</li>")
.append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
結果:
ul
ul li
div#foo ul:not([class])
7.size() 與length屬性一樣
jQuery 對象中元素的個數。
這個函數的返回值與 jQuery 對象的‘length‘ 屬性一致。
示例
描述:
計算文檔中所有圖片數量
HTML 代碼:
<img src="test1.jpg"/> <img src="test2.jpg"/>
jQuery 代碼:
$("img").size();
結果:
2
jQuery的對象訪問函數(get,index,size,each)