jQuery 高級選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        $(document).ready(function(){

后代選擇器 空格

        var $span = $("p span");

find方法:是jq對象的方法,必須有參數(shù),否則該方法無法返回對應的后代標簽

            var  $span = $('p').find('span').css('background-color','red');
                              console.log($span)
                                 })

子代選擇器 >

        var $div1 = $(#div1>div);
        console.log($div1);

.children()方法

沒有參數(shù),則獲取到的是父元素下的所有的一級子標簽
有參數(shù),則獲取到的是該參數(shù)下的對應的一級子標簽

        var $div1 = $(#div1).children();
        console.log($div1);

next選擇器(兄弟選擇器) +

選中指定標簽后的另一個兄弟標簽,如果該標簽之后緊跟的并不是選擇器所要的標簽,則返回空

        var $div1 = $('#div3+div')
        console.log(#div3)

.next() 方法選擇某個標簽后緊鄰的另一個標簽(該方法參數(shù)可以為空)

為空時,選中的是緊跟在它后邊的標簽
不為空,當標簽后跟有指定的標簽,則返回指定的標簽,當標簽后沒有指定的標簽,則返回空)

    var $div1 = $('#div3').next()
    console.log($div1);

.nextAll() 選擇器 ~

如果指定標簽后跟有并不是所想要的標簽,則會把這些標簽排除,只獲取想要的標簽

    var $div1 = $('#div4~div')
    console.log($div1);

.nextAll方法

沒有參數(shù),則把當前指定標簽后的所有兄弟標簽獲取到
有參數(shù),則獲取到參數(shù)指定的兄弟標簽,排除其他標簽

    var $div1 = $('#div4').nextAll();
    console.log($div1);

.prev() 方法

沒有參數(shù),選中的是指定標簽的上一個標簽
有參數(shù),指定標簽的上一個標簽不是參數(shù)所要的標簽,則返回空,否則就返回這個標簽

    var $div1 = $('#div5').prev('div');
    console.log($div1);

.prevAll() 方法

沒有參數(shù),則獲取到的是從指定標簽開始一直到文檔開頭位置的 兄弟節(jié)點
有參數(shù),則獲取到的是參數(shù)指定的兄弟節(jié)點

    var $div1 = $('#div6').prev();
    console.log($div1);

.sibling() 方法

沒有參數(shù),則獲取到的是與指定標簽同級的兄弟標簽
有參數(shù),則獲取指定標簽的所有兄弟標簽

    var $div1 = $('#div3').siblings();
    console.log($div1);
</script>
</head>
<body>
    <!--1-->
    <p>一只烏<span>烏鴉</span>渴了,到處找水喝</p><a href="" id="">育知下是如何,請聽下回分解</a>
    
    <!--2-->
    <div id="div1">
        <div class="div2">
            <div class="div2"></div>
        </div>
        <div class="div3"></div>
    </div>
    
    <!--3-->
    <div id="div3"></div>
    <div></div>
    <div></div>
    <a href=""></a>
    
    <!--4-->
    <div id="div4"></div>
    <a href=""></a>
    <div></div>
    <div></div>
    <a href=""></a>
    <div></div>
    
    <!--5-->
    <div></div>
    <a href=""></a>
    <div id="div5"></div>
    
    <!--6-->
    <div></div>
    <div></div>
    <div></div>
    <a href=""></a>
    <div id="div6"></div>
</body>

</html>

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,568評論 19 139
  • 國家電網(wǎng)公司企業(yè)標準(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報批稿:20170802 前言: 排版 ...
    庭說閱讀 12,422評論 6 13
  • 天涯上看見了一個帖子,本來就是一個女博士絮絮叨叨指摘男友的種種不靠譜,但是到了該結婚的年齡,又擔憂分手了會不會單身...
    NEYO_47a8閱讀 657評論 0 0
  • 四方之城(7)上一章 沒有意外的事情的話,服刑指導每周一的上午都是開例會,討論上一周的工作,安排這一周的事情,雖然...
    今年九十歲閱讀 586評論 1 2
  • MySql基礎(一) 數(shù)據(jù)庫 & 數(shù)據(jù)庫管理系統(tǒng) 區(qū)別 數(shù)據(jù)庫:就是存儲數(shù)據(jù)的倉庫,是一個文件系統(tǒng) 數(shù)據(jù)庫管理系統(tǒng)...
    AndroidCat閱讀 311評論 0 1

友情鏈接更多精彩內(nèi)容