jQuery 獲取對(duì)象 基本選擇與層級(jí)
更新時(shí)間：2010年05月31日 13:56:05 作者：
jQuery 獲取對(duì)象 基本選擇與層級(jí)實(shí)現(xiàn)代碼，學(xué)習(xí)jquery的朋友可以參考下。
根據(jù) id 選擇(通過 id 只能選擇一個(gè)對(duì)象), 如: $("#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>
選擇所有對(duì)象是: $("*")
可混合使用, 如: $("#btn2, .class1, span")
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<span>span1</span>
<div>
<button id="btn1">button1</button><br/>
<button id="btn2">button2</button><br/>
</div>
<div>
<label class="class1">label1</label><br/>
<label class="class2">label2</label><br/>
</div>
<span>span2</span>
</body>
</html>
<script>
//修改選擇對(duì)象的 color 樣式為 red
$("#btn2, .class1, span").css("color", "red");
</script>
可分層選擇, 如: $(".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") 或 $(".class1").find("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"); 如果沒有中間的 > 會(huì)選擇其下的所有符合條件的子孫對(duì)象
<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"); 這會(huì)選擇所有緊跟在 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>
同一層級(jí)(后面)的, 如: $("#id2 ~ *"); 這是選擇 #id2 后面同一層級(jí)的所有(*)對(duì)象
<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>
選擇同一層級(jí)的其他元素, 如: $("#id2").siblings()
<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>
選擇同一層級(jí)的其他 span, 如: $("#id2").siblings("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 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>
選擇所有對(duì)象是: $("*")
可混合使用, 如: $("#btn2, .class1, span")
復(fù)制代碼 代碼如下:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<span>span1</span>
<div>
<button id="btn1">button1</button><br/>
<button id="btn2">button2</button><br/>
</div>
<div>
<label class="class1">label1</label><br/>
<label class="class2">label2</label><br/>
</div>
<span>span2</span>
</body>
</html>
<script>
//修改選擇對(duì)象的 color 樣式為 red
$("#btn2, .class1, span").css("color", "red");
</script>
可分層選擇, 如: $(".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") 或 $(".class1").find("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"); 如果沒有中間的 > 會(huì)選擇其下的所有符合條件的子孫對(duì)象
<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"); 這會(huì)選擇所有緊跟在 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>
同一層級(jí)(后面)的, 如: $("#id2 ~ *"); 這是選擇 #id2 后面同一層級(jí)的所有(*)對(duì)象
<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>
選擇同一層級(jí)的其他元素, 如: $("#id2").siblings()
<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>
選擇同一層級(jí)的其他 span, 如: $("#id2").siblings("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>
相關(guān)文章
jQuery實(shí)現(xiàn)灰藍(lán)風(fēng)格標(biāo)準(zhǔn)二級(jí)下拉菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)灰藍(lán)風(fēng)格標(biāo)準(zhǔn)二級(jí)下拉菜單效果代碼,涉及jquery鼠標(biāo)mouseover事件控制頁面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
讀取URL參數(shù)的方法各種各樣不過大同小異，下面本文使用jquery來實(shí)現(xiàn)讀取URL參數(shù)示例，感興趣的朋友可以練練手哦2013-08-08
用JavaScript解析XML數(shù)據(jù)是常見的編程任務(wù)，JavaScript能做的，JQuery當(dāng)然也能做。下面我們來總結(jié)幾個(gè)使用JQuery解析XML的例子2014-03-03
解決jQuery uploadify在非IE核心瀏覽器下無法上傳
之前上傳了一個(gè)通過Flash實(shí)現(xiàn)多文件上傳，但是在IE正常運(yùn)行，F(xiàn)ireFox 不能正常上傳。經(jīng)過反復(fù)研究學(xué)習(xí)，之所以firefox和360瀏覽器無法正常運(yùn)行，是因?yàn)镕ireFox、chrome、360瀏覽器等支持HTML5的瀏覽器不會(huì)再文件上傳時(shí)自動(dòng)帶入session信息和cookie，不共享session。2015-08-08
jquery text(),val(),html()方法區(qū)別總結(jié)
jquery text(),val(),html()方法區(qū)別總結(jié)。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
本文主要介紹了Jquery如何操作select，并對(duì)此做了詳細(xì)的注釋，具有很好的參考價(jià)值，需要的朋友可以看看2016-12-12
這篇文章主要介紹了jQuery中html()方法用法,以實(shí)例形式分析了html()方法的功能、定義及使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
把一個(gè)元素淡出或淡入可以達(dá)到更為生動(dòng)的效果，在任何一種情況下，都只是隨著時(shí)間來改變?cè)氐耐该鞫?/div> 2014-09-09
利用jQuery.Validate異步驗(yàn)證用戶名是否存在（推薦）
這篇文章主要介紹了利用jQuery.Validate異步驗(yàn)證用戶名是否存在的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
利用Jquery隊(duì)列實(shí)現(xiàn)根據(jù)輸入數(shù)量顯示的動(dòng)畫
這篇文章給大家演示了如何利用Jquery隊(duì)列實(shí)現(xiàn)輸入不同的數(shù)量就顯示不同的動(dòng)畫效果，文中給出了實(shí)例，讓大家更容易理解，有需要的可以參考借鑒。2016-09-09最新評(píng)論