jQuery过滤选择器续

1.子元素过滤选择器

选择器 描述 返回
:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或奇偶元素(index>=1) 集合元素
:first-child 选取每个父元素的第一个子元素 集合元素
:last-child 选取每个父元素的最后一个子元素 集合元素
:only-child 若某元素是其父元素中唯一的子元素, 那么它将被匹配 集合元素

:nth-child()详解:

  • :nth-child(even/odd):能选取每个父元素下的索引值为偶/奇数的元素
  • :nth-child(2):能选取每个父元素下的索引值为2的元素
  • :nth-child(3n):能选取每个父元素下索引值为3的倍数的元素
  • :nth-child(3n+1):能选取每个父元素下索引值为3n+1的元素

选取子元素时, 需要在选择器前添加一个空格

html部分:

One More Thing 👇 
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
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script src="js/jquery-3.4.0.min.js"></script>
    <style type="text/css">
        div, span, p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }
        div.mini {
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size: 12px;
        }
        div.hide {
            display: none;
        }			
    </style>
</head>
<body>		
    <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
    <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
    <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
    <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
    <br><br>
    <div class="one" id="one">
        id 为 one,class 为 one 的div
        <div class="mini">class为mini</div>
    </div>
    <div class="one" id="two" title="test">
        id为two,class为one,title为test的div
        <div class="mini" title="other">class为mini,title为other</div>
        <div class="mini" title="test">class为mini,title为test</div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini"></div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini" title="tesst">class为mini,title为tesst</div>
    </div>
    <div style="display:none;" class="none">style的display为"none"的div</div>
    <div class="hide">class为"hide"的div</div>
    <div>
        包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
    </div>
    <div id="mover">正在执行动画的div元素.</div>
</body>

JS部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){
    $("#btn1").click(function(){
        //选取子元素, 需要在选择器前添加一个空格. 
        $("div.one :nth-child(2)").css("background", "#ffbbaa");
    });
    $("#btn2").click(function(){
        $("div.one :first-child").css("background", "#ffbbaa");
    });
    $("#btn3").click(function(){
        $("div.one :last-child").css("background", "#ffbbaa");
    });
    $("#btn4").click(function(){
        $("div.one :only-child").css("background", "#ffbbaa");
    });
});

2.表单对象属性过滤选择器

选择器 描述 返回
:enabled 选取所有可用元素 集合元素
:disabled 选取所有不可用元素 集合元素
:checked 选取所有被选中的元素(单选框,复选框) 集合元素
:selected 选取所有被选中选项元素(下拉列表) 集合元素

html部分:

One More Thing 👇 
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
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script src="js/jquery-3.4.0.min.js"></script>
    <style type="text/css">
        div, span, p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }
        div.mini {
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size: 12px;
        }
        div.hide {
            display: none;
        }			
    </style>
</head>
<body>
    <h3>表单对象属性过滤选择器</h3>
    <button id="btn1">对表单内 可用input 赋值操作.</button>
    <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
    <button id="btn3">获取多选框选中的个数.</button>
    <button id="btn4">获取多选框选中的内容.</button><br /><br />
    <button id="btn5">获取下拉框选中的内容.</button><br /><br />
    <form id="form1" action="#">			
        可用元素: <input name="add" value="可用文本框1"/><br>
        不可用元素: <input name="email" disabled="true" value="不可用文本框"/><br>
        可用元素: <input name="che" value="可用文本框2"/><br>
        不可用元素: <input name="name" disabled="true" value="不可用文本框"/><br>
        <br>
        多选框: <br>
        <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
        <input type="checkbox" name="newsletter" value="test2" />test2
        <input type="checkbox" name="newsletter" value="test3" />test3
        <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
        <input type="checkbox" name="newsletter" value="test5" />test5
        <br><br>
        下拉列表1: <br>
        <select name="test" multiple="multiple" style="height: 100px">
            <option>浙江</option>
            <option selected="selected">辽宁</option>
            <option>北京</option>
            <option selected="selected">天津</option>
            <option>广州</option>
            <option>湖北</option>
        </select>
        <br><br>
        下拉列表2: <br>
        <select name="test2">
            <option>浙江</option>
            <option>辽宁</option>
            <option selected="selected">北京</option>
            <option>天津</option>
            <option>广州</option>
            <option>湖北</option>
        </select>
        <textarea rows="" cols=""></textarea>
    </form>		
</body>

js部分:

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
$(function(){
    $("#btn1").click(function(){
        //使所有的可用的单行文本框的 value 值变为 已重新赋值
        alert($(":text:enabled").val());
        $(":text:enabled").val("已重新赋值");
    });
    $("#btn2").click(function(){
        $(":text:disabled").val("www.baidu.com");
    });
    $("#btn3").click(function(){
        var num = 
            $(":checkbox[name='newsletter']:checked").length;
        alert(num);
    });
    $("#btn5").click(function(){
        //实际被选择的不是 select, 而是 select 的 option 子节点
        //所以要加一个 空格. 
        //var len = $("select :selected").length
        //alert(len);
        //因为 $("select :selected") 选择的是一个数组
        //当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了. 
        //alert($("select :selected").val());
        //jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在
        //得到的 DOM 对象, 而不是一个 jQuery 对象
        $("select :selected").each(function(){
            alert(this.value);
        });
    });
    $("#btn4").click(function(){
        $(":checkbox[name='newsletter']:checked").each(function(){
            alert(this.value);
        });
    });
})

3.表单选择器

选择器 描述 返回
:input 选取所有的input, textarea,select,button元素 集合元素
:text 选取所有的单行文本框 集合元素
:password 选取所有的密码框元素 集合元素
:radio 选取所有的单选框 集合元素
:checkbox 选取所有的多选框 集合元素
:submit 选取所有的提交按钮 集合元素
:image 选取所有的图像按钮 集合元素
:reset 选取所有的重置按钮 集合元素
:button 选取所有的按钮 集合元素
:file 选取所有的上传域 集合元素
:hidden 选取所有的不可见元素 集合元素

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://crainyday.gitee.io/jQuery1-3.html

相关文章

评论