jquery選擇器中的空格與大于號>、加號+與波浪號~的區(qū)別介紹
概念
空格:$('parent childchild')表示獲取parent下的所有的childchild節(jié)點
大于號:$('parent > childchild')表示獲取parent下的所有下一級childchild
加號:$('pre + nextbrother')表示獲得pre節(jié)點的下一個兄弟節(jié)點,相當于next()方法
波浪號:$('pre ~ brother')表示獲取pre節(jié)點的后面的所有兄弟節(jié)點,相當于nextAll()方法
詳解描述
現(xiàn)有代碼如下
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<div id="imgs_box">
<ul class="play_imgs_width imgs_source">
<li><a href="javascript:;"><img src="./images/banner1.jpg" idth="610" height="390"/></a></li>
<li><a href="javascript:;"><img src="./images/banner1.jpg" idth="610" height="390"/></a></li>
<li><a href="javascript:;"><img src="./images/banner1.jpg" idth="610" height="390"/></a></li>
</ul>
<ul class="imgs_buttons play_imgs_width">
<li><a href="" class="buttons_ahover">1</a></li>
<li><a href="" class="buttons_default">2</a></li>
<li><a href="" class="buttons_default">3</a></li>
</ul>
<ul class="test">
<li>
<ul class="test_first_child">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>
空格的使用
如果要獲取imgs_box中的所有a標簽,可以使用空格,代碼如下
//獲取imgs_box下的所有元素
$(function(){
$('#imgs_box a').each(function(){
console.log(this);
});
});
效果如下圖,可以看到,獲取了所有元素

大于號的使用
如果要imgs_box中下一級的所有ul元素,不包含類為test_first_child的元素,可以使用如下代碼

$(function(){
$('#imgs_box > ul').each(function(){
console.log(this);
});
});
加號的使用
如果想獲取類為imgs_source元素的相鄰的下一個元素,可以使用加號。代碼如下
$(function(){
$('.imgs_source + ul').each(function(){
console.log(this);
});
});

波浪號的使用
如果想獲取類為imgs_source元素所有的同級元素,可以使用波浪號~。代碼如下
$(function(){
$('.imgs_source ~ ul').each(function(){
console.log(this);
});
});

以上所述是小編給大家介紹的jquery選擇器中的空格與大于號>、加號+與波浪號~的區(qū)別介紹 ,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
基于jquery的從一個頁面跳轉(zhuǎn)到另一個頁面的指定位置的實現(xiàn)代碼(帶平滑移動的效果)
從一個頁面跳轉(zhuǎn)到另一個頁面的指定位置 如果不帶平滑移動的效果 很容易 加個 錨點就行了2011-05-05
jQuery使用fadein方法實現(xiàn)漸出效果實例
這篇文章主要介紹了jQuery使用fadein方法實現(xiàn)漸出效果的方法,以一個簡單實例形式分析了jQuery中fadein方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
JQuery實現(xiàn)table中tr上移下移的示例(超簡單)
下面小編就為大家分享一篇JQuery實現(xiàn)table中tr上移下移的示例(超簡單),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
使用jQuery判斷Div是否在可視區(qū)域的方法 判斷div是否可見
這篇文章主要介紹了使用jQuery判斷Div是否在可視區(qū)域的方法 判斷div是否可見2016-02-02

