jQuery 練習(xí)[二] jquery 對象選擇器(1)
更新時間:2010年05月28日 02:21:31 作者:
根據(jù) id 選擇(通過 id 只能選擇一個對象), 如: $("#div2") ,jquery 對象選擇器是jquery的一個亮點。
根據(jù) id 選擇(通過 id 只能選擇一個對象), 如: $("#div2")
<div id="div1">AAA</div>
<div id="div2">BBB</div>
<div id="div3">CCC</div>
根據(jù)標(biāo)簽選擇, 如: $("span")
<div><span>AAA</span></div>
<div>BBB</div>
<span>CCC</span>
根據(jù)樣式的類名選擇, 如: $(".class1")
<div class="class1">AAA</div>
<div class="class2">BBB</div>
<div class="class1">CCC</div>
選擇所有對象是: $("*")
可混合使用, 如(復(fù)制代碼):
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

可分層選擇, 如: $(".class1 div label")
<div class="class1">
<div id="id1">111</div>
<div id="id2"><span>222</span></div>
<div id="id3"><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
如: $(".class1 span")
<div class="class1">
<div id="id1">111</div>
<div id="id2"><span>222</span></div>
<div id="id3"><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
只從子層中選擇, 如: $(".class1 > span"); 如果沒有中間的 > 會選擇其下的所有符合條件的子孫對象
<div class="class1">
<div id="id1">111</div>
<div id="id2"><span>222</span></div>
<div id="id3"><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
其后的, 如: $("div + span"); 這會選擇所有緊跟在 div 后面的 span
<div class="class1">
<div id="id1">111</div>
<div id="id2"><span>222</span></div>
<div id="id3"><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
同一層級(后面)的, 如: $("#id2 ~ *"); 這是選擇 #id2 后面同一層級的所有(*)對象
<div class="class1">
<div id="id1">111</div>
<div id="id2"><span>222</span></div>
<div id="id3"><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
混合使用, 如: $("#id3 label, #id3 ~ span")
<div class="class1">
<div id="id1">111</div>
<div id="id2"><span>222</span></div>
<div id="id3"><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
文章圖片所用的測試工具下載地址 JavaScriptTest2.rar
復(fù)制代碼 代碼如下:
<div id="div1">AAA</div>
<div id="div2">BBB</div>
<div id="div3">CCC</div>
根據(jù)標(biāo)簽選擇, 如: $("span")
復(fù)制代碼 代碼如下:
<div><span>AAA</span></div>
<div>BBB</div>
<span>CCC</span>
根據(jù)樣式的類名選擇, 如: $(".class1")
復(fù)制代碼 代碼如下:
<div class="class1">AAA</div>
<div class="class2">BBB</div>
<div class="class1">CCC</div>
選擇所有對象是: $("*")
可混合使用, 如(復(fù)制代碼):
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

可分層選擇, 如: $(".class1 div label")
復(fù)制代碼 代碼如下:
<div class="class1">
<div id="id1">111</div>
<div id="id2"><span>222</span></div>
<div id="id3"><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
如: $(".class1 span")
復(fù)制代碼 代碼如下:
<div class="class1">
<div id="id1">111</div>
<div id="id2"><span>222</span></div>
<div id="id3"><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
只從子層中選擇, 如: $(".class1 > span"); 如果沒有中間的 > 會選擇其下的所有符合條件的子孫對象
復(fù)制代碼 代碼如下:
<div class="class1">
<div id="id1">111</div>
<div id="id2"><span>222</span></div>
<div id="id3"><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
其后的, 如: $("div + span"); 這會選擇所有緊跟在 div 后面的 span
復(fù)制代碼 代碼如下:
<div class="class1">
<div id="id1">111</div>
<div id="id2"><span>222</span></div>
<div id="id3"><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
同一層級(后面)的, 如: $("#id2 ~ *"); 這是選擇 #id2 后面同一層級的所有(*)對象
復(fù)制代碼 代碼如下:
<div class="class1">
<div id="id1">111</div>
<div id="id2"><span>222</span></div>
<div id="id3"><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
混合使用, 如: $("#id3 label, #id3 ~ span")
復(fù)制代碼 代碼如下:
<div class="class1">
<div id="id1">111</div>
<div id="id2"><span>222</span></div>
<div id="id3"><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
文章圖片所用的測試工具下載地址 JavaScriptTest2.rar
相關(guān)文章
boxy基于jquery的彈出層對話框插件擴展應(yīng)用 彈出層選擇器
當(dāng)大家進行復(fù)雜功能設(shè)計的時候,在對多級聯(lián)選擇進行設(shè)計,為了獲得更好的用戶體驗和節(jié)省頁面空間,往往會使用彈出層的方法。2010-11-11jQuery實現(xiàn)的動態(tài)文字變化輸出效果示例【附演示與demo源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)的動態(tài)文字變化輸出效果,采用jquery.quoterotator.min.js插件實現(xiàn)了文字動態(tài)變換顯示的功能,并附帶演示與demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery實現(xiàn)多級下拉菜單jDropMenu的方法
這篇文章主要介紹了jQuery實現(xiàn)多級下拉菜單jDropMenu的方法,涉及jquery鼠標(biāo)事件及頁面元素遍歷的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08利用Jquery隊列實現(xiàn)根據(jù)輸入數(shù)量顯示的動畫
這篇文章給大家演示了如何利用Jquery隊列實現(xiàn)輸入不同的數(shù)量就顯示不同的動畫效果,文中給出了實例,讓大家更容易理解,有需要的可以參考借鑒。2016-09-09