jquery選擇器中的空格與大于號(hào)>、加號(hào)+與波浪號(hào)~的區(qū)別介紹
概念
空格:$('parent childchild')表示獲取parent下的所有的childchild節(jié)點(diǎn)
大于號(hào):$('parent > childchild')表示獲取parent下的所有下一級(jí)childchild
加號(hào):$('pre + nextbrother')表示獲得pre節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn),相當(dāng)于next()方法
波浪號(hào):$('pre ~ brother')表示獲取pre節(jié)點(diǎn)的后面的所有兄弟節(jié)點(diǎn),相當(dāng)于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標(biāo)簽,可以使用空格,代碼如下
//獲取imgs_box下的所有元素 $(function(){ $('#imgs_box a').each(function(){ console.log(this); }); });
效果如下圖,可以看到,獲取了所有元素
大于號(hào)的使用
如果要imgs_box中下一級(jí)的所有ul元素,不包含類(lèi)為test_first_child的元素,可以使用如下代碼
$(function(){ $('#imgs_box > ul').each(function(){ console.log(this); }); });
加號(hào)的使用
如果想獲取類(lèi)為imgs_source元素的相鄰的下一個(gè)元素,可以使用加號(hào)。代碼如下
$(function(){ $('.imgs_source + ul').each(function(){ console.log(this); }); });
波浪號(hào)的使用
如果想獲取類(lèi)為imgs_source元素所有的同級(jí)元素,可以使用波浪號(hào)~。代碼如下
$(function(){ $('.imgs_source ~ ul').each(function(){ console.log(this); }); });
以上所述是小編給大家介紹的jquery選擇器中的空格與大于號(hào)>、加號(hào)+與波浪號(hào)~的區(qū)別介紹 ,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- jquery 屬性選擇器(匹配具有指定屬性的元素)
- jquery基本選擇器匹配多個(gè)元素的實(shí)現(xiàn)方法
- jquery層級(jí)選擇器的實(shí)現(xiàn)(匹配后代元素div)
- jQuery選擇器總結(jié)之常用元素查找方法
- 淺析jQuery事件之on()方法綁定多個(gè)選擇器,多個(gè)事件
- 簡(jiǎn)單講解jQuery中的子元素過(guò)濾選擇器
- jQuery插件實(shí)現(xiàn)適用于移動(dòng)端的地址選擇器
- jQuery的選擇器中的通配符[id^=''code'']或[name^=''code'']及jquery選擇器總結(jié)
- jQuery常見(jiàn)的選擇器及用法介紹
相關(guān)文章
jQuery實(shí)現(xiàn)當(dāng)按下回車(chē)鍵時(shí)綁定點(diǎn)擊事件
當(dāng)按下回車(chē)鍵時(shí),綁定按鈕點(diǎn)擊事件,本文為大家介紹下jQuery回車(chē)鍵綁定點(diǎn)擊事件的具體實(shí)現(xiàn)2014-01-01jQuery實(shí)現(xiàn)合并表格單元格中相同行操作示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)合并表格單元格中相同行操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)table表格實(shí)現(xiàn)單元格合并的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01基于jquery的從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面的指定位置的實(shí)現(xiàn)代碼(帶平滑移動(dòng)的效果)
從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面的指定位置 如果不帶平滑移動(dòng)的效果 很容易 加個(gè) 錨點(diǎn)就行了2011-05-05jQuery使用fadein方法實(shí)現(xiàn)漸出效果實(shí)例
這篇文章主要介紹了jQuery使用fadein方法實(shí)現(xiàn)漸出效果的方法,以一個(gè)簡(jiǎn)單實(shí)例形式分析了jQuery中fadein方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03JQuery實(shí)現(xiàn)table中tr上移下移的示例(超簡(jiǎn)單)
下面小編就為大家分享一篇JQuery實(shí)現(xiàn)table中tr上移下移的示例(超簡(jiǎn)單),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01js前臺(tái)判斷開(kāi)始時(shí)間是否小于結(jié)束時(shí)間
js前臺(tái)判斷開(kāi)始時(shí)間是否小于結(jié)束時(shí)間,結(jié)合了jquery需要的朋友可以參考下2012-02-02jquery自適應(yīng)布局的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery自適應(yīng)布局的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05移動(dòng)端 一個(gè)簡(jiǎn)單易懂的彈出框
本文給大家分享一段簡(jiǎn)單的jquery代碼實(shí)現(xiàn)一個(gè)簡(jiǎn)單易懂的彈出框,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-07-07使用jQuery判斷Div是否在可視區(qū)域的方法 判斷div是否可見(jiàn)
這篇文章主要介紹了使用jQuery判斷Div是否在可視區(qū)域的方法 判斷div是否可見(jiàn)2016-02-02