JQuery選擇器中的子元素選擇器

阿新 • • 發佈：2019-01-01

子元素篩選選擇器不常使用，其篩選規則比起其它的選擇器稍微要複雜點，其實博主感覺並不怎麼難啦，因為單詞so easy,哈哈。

我們來看看都有哪些吧：

這裡寫圖片描述

注意：
1. :first只匹配一個單獨的元素，但是:first-child選擇器可以匹配多個：即為每個父級元素匹配第一個子元素。這相當於:nth-child(1)
2.:last 只匹配一個單獨的元素， :last-child 選擇器可以匹配多個元素：即，為每個父級元素匹配最後一個子元素
3.如果子元素只有一個的話，:first-child與:last-child是同一個
4. :only-child匹配某個元素是父元素中唯一的子元素，就是說當前子元素是父元素中唯一的元素，則匹配
5.jQuery實現:nth-child(n)是嚴格來自CSS規範，所以n值是“索引”，也就是說，從1開始計數-child(index)從1開始的，而

開始的，而eq(index)是從0開始的
6.nth-child(n) 與 :nth-last-child(n) 的區別前者是從前往後計算，後者是從後往前記。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css" 
>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>子元素篩選選擇器</h2>
    <h3>:first-child、:last-child、:only-child</h3>
    <div class="left first-div">
        <div class="div">
            <a>:first-child</a 
>
            <a>第二個元素</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
            <a>:last-child</a>
        </div>
    </div>

    <script type="text/javascript">
        //查詢所有class="first-div"下的a元素，只取第一個
        //針對所有父級下的第一個
        $(".first-div a:first-child").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查詢所有class="first-div"下的a元素，只取最後一個
        //針對所有父級下的最後一個
        //如果只有一個元素的話，last也是第一個元素
        $(".first-div a:last-child").css("color", "red");
    </script>

    <script type="text/javascript">
        //查詢所有class="first-div"下的a元素，如果只有一個子元素的情況
        $(".first-div a:only-child").css("color", "blue");
    </script>


    <h3>:nth-child、:nth-last-child</h3>
    <div class="left last-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
            <a>第三個元素</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
            <a>第三個元素</a>
            <a>:last-child</a>
        </div>
    </div>

    <script type="text/javascript">
        //查詢所有class="last-div"下的a元素,選擇第二個
        $(".last-div a:nth-child(2)").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查詢所有class="last-div"下的a元素,選擇第倒數第二個
        $(".last-div a:nth-last-child(2)").css("color", "red");
    </script>

</body>

</htm
l>

例子在這裡，好好體會喲！

JQuery選擇器中的子元素選擇器

jquery選擇器之元素選擇器

css選擇器(1)——元素選擇器、類名和id選擇器

萬用字元選擇器子元素選擇器後代選擇器

css中類選擇器和元素選擇器聯合使用分析

css基礎知識+css選擇符（元素選擇符、關係選擇符）

一個樣例看清楚JQuery子元素選擇器children()和find()的差別

jQuery選擇器之表單元素選擇器

jQuery中選擇器之子元素篩選器

一個例子看清楚JQuery子元素選擇器children()和find()的區別

JQuery裡的子元素過濾選擇器，加空格與不加空格的區別

CSS/JQuery元素選擇器之&&和||，選擇器的邏輯操作

jquery 選擇器 (父元素子元素 eg:倒數第二個li加class|select賦值取值

jquery 用於選擇多個元素的多選擇器

jquery中選擇器查詢元素相容IE的小問題

JQuery選擇器中的子元素選擇器

jquery on（）及選擇器不選擇某一元素

jQuery選擇器之特殊選擇器this

jQuery UI 實例 - 日期選擇器（Datepicker）

jQuery選擇器之層級選擇器

jquery的基礎知識復習(基礎選擇器，屬性選擇器，層級選擇器)

JQuery選擇器中的子元素選擇器

相關推薦