jQuery选择器简介

选择器的应用体现了jQuery的一个设计思想，即获取（选择）网页中的元素，然后根据实际需求对元素进行各种操作。

jQuery模仿CSS选择器实现了jQuery选择器，然后通过jQuery选择器来获取元素，不仅让获取元素的方式更加多样化，而且可以在获取元素后为元素添加样式、行为。

jQuery选择器语法： $(selector);
//根据id值获取元素
$(‘#id的值’)
//根据元素的名称获取元素
$(‘元素的名称’)
selector代表jQuery选择器，代码执行后，返回一个jQuery对象（类数组）。

jQuery选择器按照功能可以分为基本选择器、层次选择器、过滤选择器。

基本选择器

基本选择器包括id选择器、类选择器。元素选择器、通配符选择器。

选择器 描述 返回值
#id id选择器，根据id值匹配一个元素 单个元素
.class 类选择器，根据类名匹配元素 元素集合
element 元素选择器，根据元素名匹配所有元素 元素集合
* 通配符选择器，匹配所有元素 元素集合
selector1, selector2, …, selectorN 同时获取多个元素 元素集合 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本选择器</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <style>
        div {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="byId">第一个div元素，id值为byId</div>
    <p>第一个p元素</p>
    <p class="byClass">第二个p元素，类名为byClass</p>
    <div class="byClass">第二个div元素，类名为byClass</div>
    <script>
        //id选择器,一个id选择器只能获取一个元素
        $('#byId').css('background', 'pink');  //修改背景颜色
        //类选择器,可以为不同的元素设置同名的class值
        $('.byClass').css('background', 'red');
        //元素选择器
        $('p').css('font-size', '20px');
        //通配符选择器(*获取页面的所有元素,包括body元素，有性能问题)
        $('*').css('background', 'yellow');
        /*
        虽然通配符可以匹配所有的元素，但是会影响网页渲染的时间，建议用逗号分隔开多个元素
        $('.byClass, #byId').css('background', 'yellow');
        */
    </script>
</body>
</html>

层次选择器

选择器 描述 返回值
parent > child 子元素选择器，根据父元素匹配所有的子元素（紧邻的一代元素） 元素元素
selector selector1 后代选择器，根据祖先元素（selector）匹配所有的后代元素（selector1）。【后代元素不仅包括子元素，还包括子元素下的所有其他元素】 元素集合
prev + next 兄弟选择器，匹配prev元素紧邻的兄弟元素【后面第一个符合的元素，只找一个，包括* 】 元素集合
prev ~ siblings 兄弟选择器，匹配prev元素后的所有兄弟元素 元素集合 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>层次选择器</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <style>
        
    </style>
</head>
<body>
    <p>这是div前面的p元素</p>
    <div id="dv">
        <p>这是div中的第一个p元素</p>
        <ul>
            <li>这是第一个li元素</li>
            <li><p>这是第二个li中的p元素</p></li>
        </ul>
        <p>这是div中的第二个p元素</p>
    </div>
    <p>这是div后面的第1个p元素</p>
    <p>这是div后面的第2个p元素</p>
    <p>这是div后面的第3个p元素</p>

    <script>
        //子元素选择器//
        $('#dv > p').css('background', 'red');
        //在jQuery中，可以使用children()方法代替子元素的选择器
        /*
        $('#dv > p');  //使用子元素选择器获取
        $('#dv').children('p');  //使用children方法获取

        另：
        $('#dv > *');  //找出id为dv下的全部子元素
        */

        //后代选择器//
        $('#dv p').css('background', 'red');
        /*
        find()方法也可以获取指定元素的后代元素
        $('#dv p');  //使用后代选择器获取
        $('#dv').find('p');  //使用find()方法获取
        */

        //兄弟选择器//
        $('#dv + p').css('background', 'green');

        //兄弟选择器//
        $('#dv ~ p').css('background', 'yellow');

        /*
        拓展：
        next()可获取指定元素紧邻的下一个兄弟元素
        $('div').next('p').css('background', 'green');

        nextAll()可获取指定元素后的所有兄弟元素
        $('div').nextAll('p').css('background', 'green');

        siblings()可获取指定元素的所有兄弟元素（前后都要）
        $('div').siblings('p').css('background', 'green');
        */
    </script>
</body>
</html>

过滤选择器

为了快速筛选DOM元素，jQuery提供了一些过滤选择器，过滤选择器通常以“：”开头，”：“后面用于指定过滤规则。

以下介绍7种过滤选择器

基本过滤选择器

选择器 描述 返回值
:first 获取第一个元素 单个元素
:last 获取最后一个元素 单个元素
:not(selector) 获取除给定选择器外的所有元素 元素集合
:even 获取所有索引值为偶数的元素，索引号从0开始 元素集合
:odd 获取所有索引值为奇数的元素，索引号从0开始 元素集合
:eq(index) 指定元素索引值元素 单个元素
:gt(index) 大于所给定值的元素 元素集合
:lt(index) 小于给定值的元素 元素集合
:header 获取所有标题类型的元素，如h1,h2,… 元素集合
:animated 获取正在执行动画效果的元素 元素集合 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
    <ul style="width: 200px">
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
        <li>第四行</li>
    </ul>

    <script>
        //索引值为偶数的li
        $('li:even').css('background', 'pink');
        //索引值为奇数的li
        $('li:odd').css('background', 'red');
        //索引值大于等于2的li (可以使用组合形式)
        $('li:eq(2), li:gt(2)').css('background', "green");
    </script>
</body>

可见性过滤选择器

在网页开发中，具有动态效果的页面往往有很多元素被隐藏。”:hidden”选择器可以获取css样式为”display: none”，以及属性” type=”hidden” “的文本隐藏域。

选择器 描述 返回值
:visible 获取所有可见元素 元素集合
:hidden 获取所有不可见元素 元素集合 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
    <p id="dis">显示文本1</p>
    <p id="vis">显示文本2</p>
    <input type="hidden" value="隐藏文本"/>

    <script>
        //获取所有课件元素，添加背景色
        $(':visible').css('background', 'yellow');
        console.log($(':visible'));

        //获取显示的p元素，设置两种不同的隐藏方式
        //备注：":hidden"选择器无法获取CSS样式为"visibility: hidden"的隐藏元素
        $('#dis:visible').css('display', 'none');  //空间释放
        $('#vis:visible').css('visibility', 'hidden');  //空间不释放
        
        console.log('隐藏的p元素：');
        console.log($('p:hidden'));
        console.log('隐藏的input元素：');
        console.log($('input:hidden'));
    </script>
</body>

内容过滤选择器

元素的内容是指它所包含的子元素或文本内容

选择器 描述 返回值
:contains(text) 获取包含给定文本的元素 元素集合
:empty 获取所有不包含子元素或者文本的空元素 元素集合
:has(selector) 获取含有选择器所匹配的元素 元素集合
:parent 获取含有子元素或文本的元素 元素集合 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤选择器--内容过滤选择器</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <style>
        div {
            width: 200px;
            height: 30px;
            margin: 5px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div>我是div元素的文本</div>
    <div>我也是div元素的文本</div>
    <div><span>我是div内span元素的文本</span></div>
    <div></div>

    <script>
        //查找含有“也”子的元素
        $('div:contains("也")').css('background', 'pink');

        //查找含有span标签的元素
        $('div:has(span)').css('background', 'pink');

        //查找为空的div元素
        $('div:empty').css('background', 'pink');

        //内容不为空的元素
        $('div:parent').css('background', 'green');
    </script>
</body>
</html>

属性过滤选择器

选择器 描述 返回值
[attribute] 获取包含给定属性的元素 元素集合
[attribute=value] 获取等于给定的属性是某个特定值的元素 元素集合
[attribute!=value] 获取不等于给定的属性是某个特定值的元素 元素集合
[attribute^=value] 获取给定的属性是以某些值开始的元素 元素集合
[attribute$=value] 获取给定的属性是以某些值结尾的元素 元素集合
[attribute*=value] 获取给定的属性是以包含某些值的元素 元素集合
[selector1][selector2][selectorN] 获取满足多个条件的复合属性的元素（并且关系） 元素集合 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤选择器--属性过滤选择器</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <style>
        div {
            width: 200px;
            height: 50px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="dv">class=dv</div>
    <div title="标题">title=标题</div>
    <div class="dv1" title="标题1">class=dv1 title=标题1</div>
    <div class="dv1" title="标题2">class=dv2 title=标题2</div>

    <script>
        //获取所有（可以在[]前添加指定标签）class属性值以d开头的元素
        $('[class^=d]').css('background', 'pink');

        //获取所有class=dv1，title属性值含有2的元素
        $('[class=dv1][title*=2]').css('background', 'green');
    </script>
</body>
</html>

子元素过滤选择器

选择器 描述 返回值
:first-child 获取每个父元素下的第一个子元素 元素集合
:last-child 获取每个父元素下的最后一个子元素 元素集合
:only-child 获取每个仅有一个子元素的父元素下的子元素 元素集合
:nth-child(eq、even、odd、index) 获取每个元素下的特定元素，索引号从1开始 元素集合 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
    <ul>
        <li>北京</li>
        <li>上海</li>
    </ul>
    <ul>
        <li>广州</li>
        <li>深圳</li>
    </ul>
    <ul>
        <li>天津</li>
    </ul>
    <ul>
        <li>重庆</li>
    </ul>

    <script>
        //获取父元素下仅含一个的子元素
        $('li:only-child').css('background', 'pink');

        //获取元素指定元素下的第一个元素
        $('li:nth-child(1)').css('background', 'green');
    </script>
</body>

表单过滤选择器

选择器 描述 返回值
:input 获取表单中所有input、textarea、select、button元素（表单控件） 元素集合
:text 获取表单中所有input[type=text]的元素（单行文本框） 元素集合
:password 获取表单中所有input[type=password]的元素（密码框） 元素集合
:radio 获取表单中所有input[type=radio]的元素（单选按钮） 元素集合
:checkbox 获取表单中所有input[type=checkbox]的元素（复选框） 元素集合
:submit 获取表单中所有input[type=submit]的元素（提交按钮） 元素集合
:image 获取表单中所有input[type=image]的元素（图像域） 元素集合
:reset 获取表单中所有input[type=reset]的元素（重置按钮） 元素集合
:button 获取表单中所有input[type=button]的元素（普通按钮） 元素集合
:file 获取表单中所有input[type=file]的元素（文件域） 元素集合

注意：
①”:button”选择器的作用范围，包含使用input[type=button]和button元素定义的按钮
②”:image”选择器的作用范围，包含使用input[typeimage]定义的图像，但不包含img元素定义的图像

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
    <form id="myForm">
        昵称：<input type="text" value="text"/><br/>
        密码：<input type="password" value="password"/><br/>
        性别：<input type="radio"><span>男</span><input type="radio"><span>女</span><br/>
        爱好：<input type="checkbox"><span>游泳</span><input type="checkbox"><span>旅游</span><br/>
        照片1：<img src="./img/pro_down.png" width="100"><br/>
        照片2：<input type="image" src="./img/pro_down.png" width="150"><br/>
        说明：<textarea></textarea><br/>
        <input type="reset" value="重置"/>
        <button>清空</button>
        <input type="button" value="保存"/>
        <input type="submit" value="提交"/>
    </form>

    <script>
        //隐藏button定义的按钮
        //$('#myForm :button').hide();  //!!!!#myForm后面有空格，等价于#myForm *:button

        //隐藏input定义的图片
        $('#myForm :image').hide();  //不包含img元素
        
    </script>
</body>

表单对象属性过滤选择器

选择器 描述 返回值
:enabled 获取表单中所有属性为可用的元素 元素集合
:disabled 获取表单中所有属性为不可用的元素 元素集合
:checked 获取表单中所有被选中的元素 元素集合
:selected 获取表单中所有被选中的option的元素 元素集合 
1
$('input:checked').hide();  //隐藏选中的元素