jQuery过滤选择器——子元素过滤选择器_jquery子元素过滤选择器

作者：Gausst松鼠会 | 2024-05-15 16:58:12

踩

jquery子元素过滤选择器

子元素过滤选择器

1、:nth-child(index/even/odd/equation)
用法: $(”ul li:nth-child(2)”)
返回值 :集合元素
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.
2、:first-child
用法: $(”ul li:first-child”)
返回值 : 集合元素
说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.
3、:last-child
用法: $(”ul li:last-child”)
返回值:集合元素
说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.
4、: only-child
返回值 :集合元素
说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!

nth-child() 选择器详解如下：
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素
(4):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

子元素过滤选择器示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }

            div.visible{
                display:none;
            }
     </style>
     <!--引入jquery的js库-->

    </head>

    <body>

         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
         <input type="button" value=" 每个class为one的div父元素下的第2个子元素"  id="b1"/>
         <input type="button" value=" 每个class为one的div父元素下的第一个子元素"  id="b2"/>
         <input type="button" value=" 每个class为one的div父元素下的最后一个子元素"  id="b3"/>
         <input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素"  id="b4"/>


         <!--文本隐藏域-->
         <input type="hidden" value="hidden_1">
         <input type="hidden" value="hidden_2">
         <input type="hidden" value="hidden_3">
         <input type="hidden" value="hidden_4">

         <h1>天气冷了</h1>
         <h2>天气又冷了</h2>

         <div id="one">
             id为one   div

         </div>

         <div id="one" class="mini"  title="test">
               id为two   class是 mini  div  title="test"
               <div  class="mini" >class是 mini</div>
        </div>
         <div class="one"  title="test">
               <div  class="mini" >class是 mini******</div>
        </div>

         <div class="visible" >
                class是 one 
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是 mini</div>
         </div>
         <div class="one" title="test02">
              class是 one    title="test02"   (**************
               <div  class="mini01" >class是 mini01</div>
               <div  class="mini" >cdddddddlass是 mini</div>
        </div>


        <div class="visible" >
              这是隐藏的
        </div>

        <div class="one">


        </div>
        <br>
        <div id="mover" >
              动画
        </div>
        <br>


    </body>
<script language="JavaScript">

        //<input type="button" value=" 每个class为one的div父元素下的第2个子元素"  id="b1"/>
        $("#b1").click(function(){
            /*
             *  * :nth-child()子元素过滤选择器，使用时需在其前面增加空格
             *  * :nth-child()子元素过滤选择器，其索引值是从"1"开始
             */

            $("div[class=one] :nth-child(2)").css("background","#0000FF");
        });

        //<input type="button" value=" 每个class为one的div父元素下的第一个子元素"  id="b2"/>
        $("#b2").click(function(){
            $("div[class=one] :first-child").css("background","#0000FF");
        });


        //<input type="button" value=" 每个class为one的div父元素下的最后一个子元素"  id="b3"/>
        $("#b3").click(function(){
            $("div[class=one] :last-child").css("background","#0000FF");
        });

        //<input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素"  id="b4"/>
        $("#b4").click(function(){
            $("div[class=one] :only-child").css("background","#0000FF");
        });



</script>
</html>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/573986