jQuery 過(guò)濾選擇器

<!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(){

過(guò)濾選擇器

last 選取最后一個(gè)元素

                var  $div = $('#div1 div:last');
                console.log($div);

not(selector)除去所有與給定元素的所有匹配的元素

            var  $div = $(':not(#div1 div:last)');
            console.log($div);

:odd 選中下標(biāo)是奇數(shù)的兄弟標(biāo)簽(從0開(kāi)始)

            var  $div = $('#div1 div:odd');
            console.log($div);

:eq(index) 選取下標(biāo)為index的元素(從0開(kāi)始)

            var $div = $('div:eq(2)');
            console.log($div);

:header 選取所有的標(biāo)題元素

            var $div = $('#div1 *:header');
            console.log($div)

:focus 選取當(dāng)前獲取焦點(diǎn)的元素 input 標(biāo)簽中 注意:autofocus

            var $div = $('input:focus');
            console.log($div);
            $div.css('background-color','red')

:contains(text) 內(nèi)容過(guò)濾選擇器

            var $div = $('p:contains(只)');
            console.log($div);

:empty 選取不包含子元素的或文本的空元素

            var $div = $('div:empty');
            console.log($div);

:parent 選取包含子元素的或文本的空元素

            var $div = $('div:parent');
            console.log($div);

:nth-child(xn) 從1開(kāi)始計(jì)數(shù) 選取每個(gè)父元素下的下標(biāo)為index的元素

            var $div  = $('div:nth-child(3)');
            console.log($div);

:nth- child(xn+1) 從0開(kāi)始計(jì)數(shù)

            var $div  = $('div:nth-child(3n+1)');
            console.log($div);

:nth-child(even) 選取父元素下標(biāo)為偶數(shù)的元素 從0開(kāi)始

        var $div  = $('div:nth-child(even)');
            console.log($div);

:nth-child(odd) 選取父元素下標(biāo)為奇數(shù)的元素 從0開(kāi)始

            var $div  = $('div:nth-child(odd)');
            console.log($div);

:has(selector) 選取包含匹配選擇器的元素

            var  $div =  $('div:has(div)');
            console.log($div);

:hidden 選取所有不可見(jiàn)的元素

 三種形式:         <input type="hidden" />
                  <div style="display: none;"></div>
                  <div style="visibility: hidden;"></div>
                  var $div = $('input:hidden');
                  console.log($div)
        })
    </script>
</head>
<body>
    <a href=""></a>
    <div id="div1">
        <div id="div6"></div>
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
        <h1 class="h1"></h1>
    </div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
    
    <input type="text" name="name" id="name" value="" 
        autofocus="autofocus"/>
        
        
    <input type="hidden" name="" id="" value="" />    
        <p>一只烏鴉口渴了</p>
        <p>到處找水喝</p>
</body>

</html>

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

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

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