jQuery 選擇器

小陳的筆記發表於2022-08-05
jQuery

基礎知識

　　 jQuery選擇器的知識其實和CSS3非常相似，大體分為兩步，如何選擇標籤，如何精確的篩選出標籤。

基本選擇器

* 通用選擇器

　　 使用*可以選擇所有標籤

　　 image-20200821173030595

<body>
        <section>section</section>
        <div>div</div>
        <article>article</article>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("*").css("color","red");

</script>

E 名字選擇器

　　 選擇同一型別的標籤，直接輸入標籤名字即可

　　 image-20200821173443884

<body>
        <section>section</section>
        <div>div1</div>
        <article>article</article>
        <div>div2</div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("div").css("color","red");

</script>

# ID選擇器

　　 使用#可選擇具有某一個id屬性值為設定值的標籤

　　 由於id屬性是唯一的，故只選擇一個標籤

　　 image-20200821173554077

<body>
        <section id="first">section</section>
        <div>div1</div>
        <article>article</article>
        <div>div2</div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("#first").css("color","red");

</script>

. class選擇器

　　 使用.可選擇具有同class屬性值的標籤

　　 image-20200821173726867

<body>
        <section class="show">section</section>
        <div>div1</div>
        <article>article</article>
        <div class="show">div2</div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $(".show").css("color","red");

</script>

組合選擇器

E 特徵 交集選擇器

　　 選擇具有某一特徵的標籤，如我們想選擇class屬性為show的<section>可使用該選擇器。

　　 注意特徵之間不要留空白。

　　 image-20200821174004705

<body>
        <section class="show">section</section>
        <div>div1</div>
        <article>article</article>
        <div class="show">div2</div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("section.show").css("color","red");

</script>

E,F 並集選擇器

　　 使用並集選擇器,可以同時選擇多個元素

　　 image-20200821174116660

<body>
        <section class="show">section</section>
        <div>div1</div>
        <article>article</article>
        <div class="show">div2</div>
        <aside>aside</aside>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("section.show,article,aside").css("color", "red");

</script>

E F 後代選擇器

　　 我們可以使用元素E 元素F這樣的語法選擇出元素E下的所有元素F。中間以空格分割。

　　 image-20200821174829414

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("main ul li").css("color", "red");
</script>

E>F 子代選擇器

　　 我們可以使用元素E>元素F這樣的語法選擇出元素E下一級的所有元素F。中間以>分割。

　　 image-20200821175016556

<body>
        <ul>
                <div>第一層</div>
                <li>1-1</li>
                <li>1-2</li>
                <li>1-3</li>
                <ul>
                        <div>第二層</div>
                        <li>2-1</li>
                        <li>2-2</li>
                        <li>2-3</li>
                </ul>
        </ul>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("main>ul>li").css("color", "red");

</script>

E+F 同級毗鄰選擇器

　　 我們可以使用元素E+元素F這樣的語法選擇出緊隨元素E後的同級的所有元素F。中間以+分割。

　　 同級向後找，元素F的上一個必須是元素E

　　 image-20200821175333305

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("div+li").css("color", "red");
</script>

E~F 同級多跨選擇器

　　 該選擇器與毗鄰選擇器有2點最大的不同，第一點，不用必須挨著，第二點，元素F的上一個元素不用是元素E。

　　 同級向後找所有，元素F的上一個可以不是元素E,換而言之找元素E後面的所有元素F

　　 image-20200821175532553

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("div~li").css("color", "red");
</script>

屬性選擇器

[attribute]

　　 匹配包含給定屬性的元素。

　　 image-20200821202142593

<body>

        <div>HTML</div>
        <div>CSS</div>
        <div>JavaScript</div>
        <div data-name="jQuery_menu">jQuery</div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("div[data-name]").css("color","red");    

</script>

[attribute=value]

　　 匹配給定的屬性是某個特定值的元素

　　 image-20200821202405167

<body>

        <div data-name="HTML_menu">HTML</div>
        <div data-name="CSS_menu">CSS</div>
        <div data-name="JavaScrip_menu">JavaScript</div>
        <div data-name="jQuery_menu">jQuery</div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("div[data-name='jQuery_menu']").css("color","red");    

</script>

[attribute!=value]

　　 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素。

　　 此選擇器等價於 :not([attr=value]) 要匹配含有特定屬性但不等於特定值的元素，請使用[attr]:not([attr=value])

　　 image-20200821202559508

<body>

        <div data-name="HTML_menu">HTML</div>
        <div data-name="CSS_menu">CSS</div>
        <div data-name="JavaScrip_menu">JavaScript</div>
        <div data-name="jQuery_menu">jQuery</div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("div[data-name!='jQuery_menu']").css("color","red");    

</script>

[attribute^=value]

　　 匹配給定的屬性是以某些值開始的元素

　　 image-20200821202737679

<body>

        <div data-name="HTML_menu">HTML</div>
        <div data-name="CSS_menu">CSS</div>
        <div data-name="JavaScrip_menu">JavaScript</div>
        <div data-name="jQuery_menu">jQuery</div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("div[data-name^='jQ']").css("color","red");    

</script>

[attribute$=value]

　　 匹配給定的屬性是以某些值結尾的元素

　　 image-20200821202850898

<body>

        <div data-name="HTML_menu">HTML</div>
        <div data-name="CSS_menu">CSS</div>
        <div data-name="JavaScrip_menu">JavaScript</div>
        <div data-name="jQuery_menu">jQuery</div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("div[data-name$='menu']").css("color","red");    

</script>

[attribute*=value]

　　 匹配給定的屬性是以包含某些值的元素

　　 image-20200821203109621

<body>

        <div data-name="HTML_menu">HTML</div>
        <div data-name="CSS_menu">CSS</div>
        <div data-name="JavaScrip_menu">JavaScript</div>
        <div data-name="jQuery_menu">jQuery</div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("div[data-name*='S']").css("color","red");    

</script>

[selector1][selector2][selectorN]

　　 複合屬性選擇器，需要同時滿足多個條件時使用。

　　 image-20200821203508491

<body>

        <div data-name="HTML_menu">HTML</div>
        <div data-name="CSS_menu">CSS</div>
        <div data-name="JavaScrip_menu" color="red" status="hidden" >JavaScript</div>
        <div data-name="jQuery_menu" color="red" status="show" >jQuery</div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("div[color][status][data-name^='j']").css("color","red");    

</script>

結構偽類選擇器

:root

　　 選擇該文件的根元素。

　　 在HTML中，文件的根元素，和$(":root")選擇的元素一樣， 永遠是<html>元素。

<body>
        <div></div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        $(":root").css("background-color","red"); // 頁面全紅

</script>

:header

　　 匹配如 <h1>, <h2>,<h3>之類的標題元素

　　 image-20200821181700783

<body>

        <h1>h1</h1>
        <h1>h2</h1>
        <div>div1</div>
        <div>div2</div>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $(":header").css("color", "red");

</script>

:has

　　 匹配含有選擇器所匹配的元素的元素

　　 引數：一個用於篩選的選擇器

　　 image-20200821200248538

<body>

        <div>1</div>
        <div><span>2-包含</span></div>
        <div>3</div>
        <div>4</div>
        <div>5</div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("div:has(span)").css("color","red");

</script>

:parent

　　 匹配含有子元素或者文字的元素

　　 image-20200821200624247

<body>

        <div>1</div>
        <div></div>
        <div>3</div>
        <div></div>
        <div>5</div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("div:parent").css("color","red");

</script>

:empty

　　 匹配所有不包含子元素或者文字的空元素

　　 image-20200821195955700

<body>

        <div>1</div>
        <div></div>
        <div>3</div>
        <div></div>
        <div>5</div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $(":empty").html("新增內容");

</script>

:first

　　 選擇第一個元素，只會拿出同型別中的第一個。

　　 image-20200821180355334

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("li:first").css("color", "red");
        
</script>

:last

　　 選擇最後一個元素，只會拿出同型別中的最後一個。

　　 image-20200821180458199

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("li:last").css("color", "red");

</script>

:first-child

　　 匹配所給選擇器( :之前的選擇器)的第一個子元素

　　 類似的:first匹配第一個元素，但是:first-child選擇器可以匹配多個

　　 ：即為每個父級元素匹配第一個子元素

　　 這相當於:nth-child(1)

　　 image-20200821204355219

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("ul>:first-child").css("color", "red");

</script>

:last-child

　　 匹配最後一個子元素

　　 :last只匹配最後一個元素，而此選擇符將為每個父元素匹配最後一個子元素

　　 image-20200821204729374

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("ul li:last-child").css("color", "red");  // 注意巢狀關係

</script>

:first-of-type

　　 結構化偽類，匹配E的父元素的第一個E型別的孩子。

　　 等價於:nth-of-type(1) 選擇器。

　　 image-20200821205259520

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("ul li:first-of-type").css("color", "red");

</script

:last-of-type

　　 結構化偽類，匹配E的父元素的最後一個E型別的孩子

　　 image-20200821205913203

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("ul li:last-of-type").css("color", "red");

</script>

:nth-child(n)

　　 匹配其父元素下的第N個子或奇偶元素

　　 ，1.:nth-child(n) 中引數只能是n，不可以用其他字母代替。

　　 　2.:nth-child(odd) 選擇的是奇數項，而使用:nth-last-child(odd)選擇的卻是偶數項

　　 3.odd或even都是從0開始

　　 image-20200821210548750

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("ul li:nth-child(odd)").css("color", "red");

</script>

:nth-last-child(n)

　　 選擇所有他們父元素的第n個子元素。

　　 計數從最後一個元素開始到第一個。

　　 ，1.:nth-child(n) 中引數只能是n，不可以用其他字母代替。

　　 　2.:nth-child(odd) 選擇的是奇數項，而使用:nth-last-child(odd)選擇的卻是偶數項

　　 3.odd或even都是從0開始

　　 image-20200821210728138

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("ul li:nth-last-child(odd)").css("color", "red"); 

</script>

:nth-of-type(n)

　　 選擇同屬於一個父元素之下，並且標籤名相同的子元素中的第n個。

　　 ，1.:nth-of-type(n) 中引數只能是n，不可以用其他字母代替。

　　 　2.:nth-of-type(odd) 選擇的是奇數項，而使用:nth-last-type(odd)選擇的卻是偶數項

　　 3.odd或even都是從0開始

　　 image-20200821211434809

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("ul li:nth-of-type(odd)").css("color", "red");  

</script>

:nth-last-of-type(n)

　　 選擇的所有他們的父級元素的第n個子元素，計數從最後一個元素到第一個。

　　 ，1.:nth-of-type(n) 中引數只能是n，不可以用其他字母代替。

　　 　2.:nth-of-type(odd) 選擇的是奇數項，而使用:nth-last-type(odd)選擇的卻是偶數項

　　 3.odd或even都是從0開始

　　 image-20200821211632327

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("ul li:nth-last-of-type(odd)").css("color", "red");  

</script>

:only-child

　　 如果某個元素是父元素中唯一的子元素，那將會被匹配。

　　 子元素不包含文字節點

　　 image-20200821212021521

<body>
        <div><span>有唯一子元素span</span></div>
        <div>無唯一子元素span</div>
        <div><span>無唯一子元素span </span><div></div></div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("div span:only-child").css("color", "red");  

</script>

:only-of-type

　　 選擇所有沒有兄弟元素，且具有相同的元素名稱的元素。

　　 如果父元素有相同的元素名稱的其他子元素，那麼沒有元素會被匹配。

　　 image-20200821212340617

<body>
        <div><span>有一個兒子span</span></div>
        <div><span>有一個兒子span和一個兒子div</span><div></div></div>
        <div><span>有兩個兒子span</span><span></span><div></div></div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("div span:only-of-type").css("color", "red");  

</script>

表單偽類選擇器

:input

　　 匹配所有 <input>, <textarea>, <select> 和 <button> 元素

　　 image-20200821212654745

<body>
        <input type="text" value="input">
        <textarea name="" id="" cols="30" rows="10">textarea</textarea>
        <select name="" id=""></select>
        <button>button</button>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $(":input").css("color", "red");  

</script>

:text

　　 匹配所有的單行文字框

<body>
        <form>
                <input type="text" />
                <input type="checkbox" />
                <input type="radio" />
                <input type="image" />
                <input type="file" />
                <input type="submit" />
                <input type="reset" />
                <input type="password" />
                <input type="button" />
                <select>
                        <option /></select>
                <textarea></textarea>
                <button></button>
        </form>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $element = $(":password");
        console.log($element[0]);  // <input type="text" />

</script>

:password

　　 匹配所有密碼框

<body>
        <form>
                <input type="text" />
                <input type="checkbox" />
                <input type="radio" />
                <input type="image" />
                <input type="file" />
                <input type="submit" />
                <input type="reset" />
                <input type="password" />
                <input type="button" />
                <select>
                        <option /></select>
                <textarea></textarea>
                <button></button>
        </form>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $element = $(":password");
        console.log($element[0]);  // <input type="password" />

</script>

:radio

　　 匹配所有單選按鈕

<body>
        <form>
                <input type="text" />
                <input type="checkbox" />
                <input type="radio" />
                <input type="image" />
                <input type="file" />
                <input type="submit" />
                <input type="reset" />
                <input type="password" />
                <input type="button" />
                <select>
                        <option /></select>
                <textarea></textarea>
                <button></button>
        </form>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $element = $(":radio");
        console.log($element[0]);  // <input type="radio" />

</script>

:checkbox

　　 匹配所有核取方塊

<body>
        <form>
                <input type="text" />
                <input type="checkbox" />
                <input type="radio" />
                <input type="image" />
                <input type="file" />
                <input type="submit" />
                <input type="reset" />
                <input type="password" />
                <input type="button" />
                <select>
                        <option /></select>
                <textarea></textarea>
                <button></button>
        </form>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $element = $(":checkbox");
        console.log($element[0]);  // <input type="checkbox" />

</script>

:submit

　　 匹配所有提交按鈕，理論上只匹配type="submit" 的<input>或者<button>，但是現在的很多瀏覽器，<button>元素預設的type即為<submit>，所以很多情況下，不設定type的<button>也會成為篩選結果。

　　 為了防止歧義或者誤操作，建議所有的<button>在使用時都新增type屬性。

<body>
        <form>
                <input type="text" />
                <input type="checkbox" />
                <input type="radio" />
                <input type="image" />
                <input type="file" />
                <input type="submit" />
                <input type="reset" />
                <input type="password" />
                <input type="button" />
                <select>
                        <option /></select>
                <textarea></textarea>
                <button></button>
        </form>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $element = $(":submit");
        console.log($element[0]);  // <input type="submit" />

</script>

:image

　　 匹配所有影像域

<body>
        <form>
                <input type="text" />
                <input type="checkbox" />
                <input type="radio" />
                <input type="image" />
                <input type="file" />
                <input type="submit" />
                <input type="reset" />
                <input type="password" />
                <input type="button" />
                <select>
                        <option /></select>
                <textarea></textarea>
                <button></button>
        </form>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $element = $(":image");
        console.log($element[0]);  // <input type="image" />

</script>

:reset

　　 匹配所有重置按鈕

<body>
        <form>
                <input type="text" />
                <input type="checkbox" />
                <input type="radio" />
                <input type="image" />
                <input type="file" />
                <input type="submit" />
                <input type="reset" />
                <input type="password" />
                <input type="button" />
                <select>
                        <option /></select>
                <textarea></textarea>
                <button></button>
        </form>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $element = $(":reset");
        console.log($element[0]);  // <input type="reset" />

</script>

:button

　　 匹配所有按鈕

<body>
        <form>
                <input type="text" />
                <input type="checkbox" />
                <input type="radio" />
                <input type="image" />
                <input type="file" />
                <input type="submit" />
                <input type="reset" />
                <input type="password" />
                <input type="button" />
                <select>
                        <option /></select>
                <textarea></textarea>
                <button></button>
        </form>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $element = $(":button");
        console.log($element[0]);  // <input type="button" />

</script>

:file

　　 匹配所有檔案域

<body>
        <form>
                <input type="text" />
                <input type="checkbox" />
                <input type="radio" />
                <input type="image" />
                <input type="file" />
                <input type="submit" />
                <input type="reset" />
                <input type="password" />
                <input type="button" />
                <select>
                        <option /></select>
                <textarea></textarea>
                <button></button>
        </form>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $element = $(":file");
        console.log($element[0]);  // <input type="file" />

</script>

:enabled

　　 匹配所有可用元素，查詢所有可用的<input>元素

<body>
        <form>
                <input name="email" disabled="disabled" />
                <input name="id" />
              </form>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $element = $("input:enabled");
        console.log($element[0]);  // <input name="id" />

</script>

:disabled

　　 匹配所有不可用元素，查詢所有不可用的<input>元素

<body>
        <form>
                <input name="email" disabled="disabled" />
                <input name="id" />
              </form>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $element = $("input:disabled");
        console.log($element[0]);  // <input name="email" disabled="disabled" />

</script>

:checked

　　 匹配所有選中的被選中元素(核取方塊、單選框等，<select>中的<option>)，對於<select>元素來說，獲取選中推薦使用 :selected

索引偽類選擇器

:even

　　 匹配所有索引值為偶數的元素，從 0 開始計數

　　 image-20200821180749766

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("li:even").css("color", "red");

</script>

:odd

　　 匹配所有索引值為奇數的元素，從 0 開始計數

　　 image-20200821180930670

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("li:odd").css("color", "red");

</script>

:eq(index)

　　 匹配一個給定索引值的元素

　　 image-20200821181104643

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("li:eq(3)").css("color", "red");

</script>

:gt(index)

　　 匹配所有大於給定索引值的元素

　　 image-20200821181208587

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("li:gt(3)").css("color", "red");

</script>

:lt(index)

　　 匹配所有小於給定索引值的元素

　　 image-20200821195155616

<body>
        <main>
                <ul>
                        <div>第一層</div>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <ul>
                                <div>第二層</div>
                                <li>2-1</li>
                                <li>2-2</li>
                                <li>2-3</li>
                        </ul>
                </ul>
        </main>


</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("li:lt(3)").css("color", "red");

</script>

其他偽類選擇器

:lang 語言

　　 選擇指定語言的所有元素。

　　 :lang選擇器,匹配有一個語言值等於所提供的語言程式碼，或以提供的語言程式碼開始，後面馬上跟一個“- ”的元素。例如，選擇器$("div:lang(en)")將匹配<div lang="en"> and <div lang="en-us">（和他們的後代<div>），但不包括<div lang="fr">

　　 對於HTML元素，語言值由lang屬性決定，也可能由來自meta元素或HTTP頭資訊決定。

:target 錨點

　　 選擇由文件URI的格式化識別碼表示的目標元素。

　　 如果文件的URI包含一個格式化的識別符號，或hash， 然後:target選擇器將匹配id和識別符號相匹配的元素。

　　 例如，給定的URI https://example.com/#foo，$( "p:target" )，將選擇<p id="foo">元素。

<body>
        <a href="#p1">點我p1改變</a>
        <p id="p1">點選上方a標籤我會發生變化</p>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        $("a").on("click", (event) => {
                $(":target").css("background-color", "red");
        });

</script>

:contains 內容

　　 匹配包含給定文字的元素

　　 給定一個引數，String型別，一個用以查詢的字串

　　 image-20200821195743103

<body>

        <span>HELLO,WORLD</span>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $(":contains('HELLO,WORLD')").css("color", "red");

</script>

:hidden

　　 匹配所有不可見元素，或者type為hidden的元素

　　 關鍵幀

<body>

        <div style="display: none;">看不見我</div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";

        setTimeout(() => {
                $("div:hidden").text("看的見我了").css({"color":"red","display":"block"});    
        }, 3000);
        
</script>

:visible

　　 匹配所有的可見元素

　　 image-20200821201907774

<body>

        <div style="display: none;">看不見我</div>
        <div>看的見我</div>
        <div>看的見我</div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("div:visible").css("color","red");    

</script>

:not

　　 去除所有與給定選擇器匹配的元素

　　 在jQuery 1.3中，已經支援複雜選擇器了（例如:not(div a) 和 :not(div,a)

　　 以下示例將展示查詢所有未選中的 <input>元素

<body>
        <form>
                <input name="flower" type="radio"/>
                <input name="flower" type="radio" checked="checked" />
        </form>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $element = $("input:not(:checked)");
        console.log($element[0]);  // <input name="flower" type="radio"/>

</script>

:focus

　　 匹配當前獲取焦點的元素。

　　 如同其他偽類選擇器（那些以":"開始），建議:focus前面用標記名稱或其他選擇

　　 否則，通用選擇("*")是不言而喻的。換句話說，$(':focus')等同為$('*:focus')。

　　 如果你正在尋找當前的焦點元素，$(document.activeElement )將檢索，而不必搜尋整個DOM樹。

　　 以下示例將展示使用該選擇器讓所有獲得焦點的標籤背景顏色發生變化

　　 關鍵幀

<body>
        <a href="#">點我</a>
        <a href="#">點我</a>
        <input type="text">

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        setInterval(() => {
                let $element = $(":focus");
                if ($element[0]) {
                        $element.css("background-color", "red");
                }
        })

</script>

:animated

　　 匹配所有正在執行動畫效果的元素

　　 以下示例將配合否定選擇器拿出未執行動畫的<div>元素

<body>

        <button id="run">Run</button>
        <div style="background-color: red;"></div>

</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        $("#run").click(function () {
                let show = $("div:not(:animated)");
                show.animate({ width: "+=20",height:"+=20" }, 1000);
                console.log(show[0]);  // <div style="background-color: red; width: 1400.36px; height: 20px;"></div>
        });

</script>

相關文章