本篇是繼上篇jQuery核心函數之后介紹如何訪問jQuery對象。
jquery對象訪問
each(callback)
size()
length
selector
context
get()
get(index)
index([subject])
測試用例
以下是通過代碼的方式測試上述jQuery對象訪問，供不明白的朋友們參考：
<!DOCTYPE html><html><head> <title>jquery對象訪問</title> <script type="text/javascript" src="./js/jquery.min.js"></script></head><body><!-- jquery對象訪問之一each(callback)--><div> <span>span1</span> <span>span2</span> <span>span3</span> <span>span4</span> <span>span5</span></div><script type="text/javascript"> var spanList = $("div span"); spanList.each(function(){ // alert(this.innerHTML); //這個獲取的是span元素而不是jQuery對象，這點需要注意。依次輸出span1 ... span5 // alert($(this).html()); //輸出結果同上 只是$(this)會將元素轉為jQuery對象 if($(this).html() == "span4") return false; //可以提前使用return 退出循環 });</script><!-- jquery對象訪問之二size()--><script type="text/javascript"> // alert($("div span").size()); //輸出結果5 size()函數是獲取jQuery集合中元素的個數</script><!-- jquery對象訪問之三length--><script type="text/javascript"> // alert($("div span").length); //輸出結果5 當前匹配的元素個數.同size 返回相同的值</script><!-- jquery對象訪問之四selector--><ul id="ul1"></ul><script type="text/javascript"> $("#ul1") .append("<li>" + $("ul").selector + "</li>") .append("<li>" + $("ul li").selector + "</li>") .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");</script><!-- jquery對象訪問之五context--><ul id="ul2"></ul><script type="text/javascript"> $("#ul2") .append("<li>" + $("ul").context + "</li>") .append("<li>" + $("ul", document.body).context.nodeName + "</li>");</script><!-- jquery對象訪問之六get()--><div id="get"> <span>get1</span> <span>get2</span> <span>get3</span> <span>get4</span></div><script type="text/javascript"> var spans = $("#get span"); var span1 = spans.get(); // alert(span1); // 返回的是span元素的集合 // alert($(span1).html()); //輸出結果get1 將節點元素包裝成jQuery對象</script><!-- jquery對象訪問之七get(index)--><div id="get"> <span>get1</span> <span>get2</span> <span>get3</span> <span>get4</span></div><script type="text/javascript"> var spans = $("#get span"); var span1 = spans.get(0); // alert(span1.innerText); //輸出結果是get1 通過節點元素 // alert($(span1).html()); //輸出結果同上 將節點元素包裝成jQuery對象</script><!-- jquery對象訪問之八index([subject])--><ul id="ul8"> <li id="foo">foo</li> <li id="bar">bar</li> <li id="baz">baz</li></ul><script type="text/javascript"> alert($('#ul8 li').index(document.getElementById('bar'))); //1，傳遞一個DOM對象，返回這個對象在原先集合中的索引位置 alert($('#ul8 li').index($('#bar'))); //1，傳遞一個jQuery對象 alert($('#ul8 li').index($('#ul8 li:gt(0)'))); //1，傳遞一組jQuery對象，返回這個對象中第一個元素在原先集合中的索引位置 alert($('#bar').index('#ul8 li')); //1，傳遞一個選擇器，返回#bar在所有li中的做引位置 alert($('#bar').index()); //1，不傳遞參數，返回這個元素在同輩中的索引位置。</script></body></html>運行結果
總結
本篇是介紹jQuery的對象訪問模塊。以前沒有系統的學習jQuery，現在打算系統的學習下jQuery，順便貼出供需要的朋友參考。如果哪里不對的地方，歡迎指正，謝謝大家的閱讀！
新聞熱點
疑難解答
