2.3 jQuery选择器

发表于 更新于 分类于 ， Waline： 本文字数： 24k 阅读时长 ≈ 22 分钟

2.3 jQuery选择器

在正式学习jQuery选择器之前，先看几组用传统的JavaScript方法获取页面中的元素，然后给元素添加行为事件的例子。

例子1：给网页中的所有<p>元素添加onclick事件。

HTML代码如下：

1
2
<p>测试1</p>
<p>测试2</p>

要做的工作有以下几项。
（1）获取所有的<p>元素。
（2）对<p>元素进行循环（因为获取的是数组对象）。
（3）给每个<p>元素添加行为事件。

JavaScript代码如下：

1
2
3
4
5
6
var items = document.getElementsByTagName("p");//获取网页中所有的p元素
for(var i=0;i < items.length;i++){            //由于获取的是数组对象，因此需要把它循环出来
    items[i].onclick = function(){            //给每个对象添加onclick事件
        //doing something
    }
}

例子2：使一个特定的表格隔行变色。

HTML代码如下：

1
2
3
4
5
6
7
8
9
10
<table id="tb">
    <tbody>
    <tr><td>第一行</td><td>第一行</td></tr>
    <tr><td>第二行</td><td>第二行</td></tr>
    <tr><td>第三行</td><td>第三行</td></tr>
    <tr><td>第四行</td><td>第四行</td></tr>
    <tr><td>第五行</td><td>第五行</td></tr>
    <tr><td>第六行</td><td>第六行</td></tr>
    </tbody>
</table>

要做的工作有以下几项。
（1）根据表格id获取表格。
（2）在表格内获取<tbody>元素。
（3）在<tbody>元素下获取<tr>元素。
（4）循环输出获取的<tr>元素。
（5）对<tr>元素的索引值除以2并取模，然后根据奇偶设置不同的背景色。

JavaScript代码如下：

1
2
3
4
5
6
7
8
var item = document.getElementById("tb"); //获取id为tb的元素(table)
var tbody = item.getElementsByTagName("tbody")[0]; //获取表格的第1个tbody元素
var trs = tbody.getElementsByTagName("tr"); //获取tbody元素下的所有tr元素
for (var i = 0; i < trs.length; i++) { //循环tr元素
    if (i % 2 == 0) { //取模(取余数。例如0%2==0,1%2==1,2%2==0,3%2==1)
        trs[i].style.backgroundColor = "#888"; //改变符合条件的tr元素的背景色
    }
}

例子3：对多选框进行操作，输出选中的多选框的个数。

HTML代码如下：

1
2
3
4
<input type="checkbox" value="1" name="check" checked="checked"/>
<input type="checkbox" value="2" name="check"/>
<input type="checkbox" value="3" name="check" checked="checked"/>
<input type="button" value="你选中的个数" id="btn"/>

要做的工作有以下几项。
（1）新建一个空数组。
（2）获取所有name为“check”的多选框。
（3）循环判断多选框是否被选中，如果被选中则添加到数组里。
（4）获取输出按钮，然后为按钮添加onclick事件，输出数组的长度即可。

JavaScript代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//获取id为btn的元素(button)
var btn = document.getElementById("btn");
//给元素添加onclick事件
btn.onclick = function () {
    //创建一个数组对象
    var arrays = new Array();
    //获取name为check的一组元素(checkbox)
    var items = document.getElementsByName("check");

    //循环这组数据
    for (i = 0; i < items.length; i++) {
        //判断是否选中
        if (items[i].checked) {
            //把符合条件的数据添加到数组中
            arrays.push(items[i].value);
            //push()是JavaScript数组中的方法
        }
    }
    alert("选中的个数为：" + arrays.length)
}

上面的几个例子都是用传统的JavaScript 方法进行操作，中间使用了 getElementById()、getElementsByTagName()和getElementsByName()等方法，然后动态地给元素添加行为或者样式。这些虽然都是JavaScript中最简单的操作，但不断重复使用getElementById()和getElementsByTagName()等冗长而难记的名称，使越来越多的开发人员开始厌倦这种枯燥的写法，并且有时候为了获取网页中的某个元素，需要编写很多的getElementById()和getElementsByTagName()方法。然而在 jQuery中，类似的这些操作则非常简洁。

下面学习如何使用jQuery获取这些元素。

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。在下面的章节中将分别用不同的选择器来查找 HTML 代码中的元素并对其进行简单的操作。为了能更清晰、直观地讲解选择器，首先需要设计一个简单的页面，里面包含各种<div>元素和<span>元素，然后使用jQuery选择器来匹配元素并调整它们的样式。

新建一个空白页面，输入以下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
<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" size="8" />
</div>
<span id="mover">正在执行动画的span元素.</span>

然后用CSS对这些元素进行初始化大小和背景颜色的设置，CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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;
}

根据以上HTML+CSS代码，可以生成图2-2所示的页面效果。

image-20211215155456971

图2-2 初始状态

2.3.1 基本选择器

基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使用。基本选择器的介绍说明如表2-2所示。

表2-2 基本选择器

epub_731606_46

选择器 描述 返回 示例
#id 根据给定的id匹配一个元素 单个元素 $("")选取id为test的元素
.class 根据给定的类名匹配元素 集合元素 $("")选取所有class为test的元素
element 根据给定的元素名匹配元素 集合元素 $("")选取所有的<p>元素
selector1,selector2,...,selectorN 将每一个选择器匹配到的元素合并后一起返回 集合元素 $("div,span,p.myClass")选取所有<div>,span和拥有class为myClass的<p>标签的一组元素

可以使用这些基本选择器来完成绝大多数的工作。下面用它们来匹配刚才 HTML代码中的<div>，<span>等元素并进行操作（改变背景色），示例如表2-3所示。

表2-3 基本选择器示例
功能 代码 执行后
改变id为one的元素的背景色 $("#one").css("background","#bbffaa"); image-20211215155942007
改变class为mini的所有元素的背景色 $(".mini").css("background","#bbffaa"); image-20211215161918372
改变元素名是<div>的所有元素的背景色 $("div").css("background","#bbffaa"); image-20211215162721046
改变所有元素的背景色 $("*").css("background","#bbffaa"); image-20211215162047746
改变所有的span元素和id为two的元素的背景色 $("span,#two").css("background","#bbffaa"); image-20211215162116977

2.3.2 层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。层次选择器的介绍说明如表2-4所示。

表2-4 层次选择器
选择器 描述 返回 示例
$("ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素 集合元素 $("div span")选取<div>里的所有的<span>元素
$("parent>child") 选取parent元素下的child(子)元素，与$("ancestor descendant")有区别，$("ancestor descendant")选择的后代元素 集合元素 $("div>span")选取<div>元素下的元素名是<span>的子元素
$("prev+next") 选取紧接在prev元素后的next元素 集合元素 $(".one+div")选取class为one的下一个<div>同辈元素。
$("prev~siblings") 选取prev元素之后的所有siblings元素 集合元素 $("#two~div")选取id为two的元素后面的所有<div>同辈元素

继续沿用刚才例子中的HTML和CSS 代码，然后用层次选择器来对网页中的<div>，<span>等元素进行操作，示例如表2-5所示。

表2-5 层次选择器示例
功能 代码 执行后
改变<body>内所有<div>的背景色 $("body div").css("background","#bbffaa"); image-20211215185504190
改变<body>内子<div>元素的背景色 $("body>div").css("background","#bbffaa"); image-20211215185748518
改变class为one的下一个<div>同辈元素的背景色 $(".one+div").css("background","#bbffaa"); image-20211215185911800
改变id为two的元素后面的所有<div>同辈元素的背景色 $("#two~div").css("background","#bbffaa"); image-20211215190808240

在层次选择器中，第1个和第2个选择器比较常用，而后面两个因为在jQuery里可以用更加简单的方法代替，所以使用的几率相对少些。

可以使用next()方法来代替$('prev + next')选择器，如表2-6所示。

表2-6 $('prev + next')选择器与next()方法的等价关系
空 选择器 方法
等价关系 $(".one+div") $(".one").next("div")

可以使用nextAll()方法来代替$('prev~siblings')选择器，如表2-7所示。

表2-7 $('prev~iblings')选择器与nextAll()方法的等价关系
空 选择器 方法
等价关系 $("#prev~div") $("#prev").nextAll("div")

在此我将后面要讲解的siblings()方法拿出来与$('prev~siblings')选择器进行比较。$("#prev~div")选择器只能选择“prev”元素后面的同辈<div>元素。而siblings()方法与前后位置无关，只要是同辈节点就都能匹配。

1
2
3
4
5
6
//选取#prev之后的所有同辈div元素
$("#prev~div").css("background","#bbffaa");
//同上
$("#prev").nextAll("div").css("background","#bbffaa");
//选取#prev所有的同辈div元素，无论前后位置
$("#prev").siblings("div").css("background","#bbffaa");

例如：

1
2
3
4
//选取#two之后的所有同辈div元素
$("#two~div").css("background","#bbffaa");
//同上
$("#two").nextAll("div").css("background","#bbffaa");

效果为：
image-20211215200300198
而：

1
2
//选取#two所有的同辈div元素，无论前后位置
$("#two").siblings("div").css("background","#bbffaa");

效果为：
image-20211215200308529

2.3.3 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

1．基本过滤选择器

表2-8 基本过滤选择器

epub_731606_52

选择器 描述 返回 示例
:first 选取第一个元素 单个元素 $("div:first")选取所有<div>元素的第1个<div>元素
:last 选取最后一个元素 单个元素 $("div:last")选取所有<div>元素中最后一个<div>元素
:not(selector) 去除所有与给定选择器匹配的元素 集合元素 $("input:not(.myClass)")选取class不是myClass的<input>元素
:even 选取索引是偶数的所有元素，索引从0开始 集合元素 $("input:even")选取索引是偶数的<input>元素
:odd 选取索引是奇数的所有元素，索引从0开始 集合元素 $("input:odd")选取索引是奇数的<input>元素
:eq(index) 选取索引等于index的元素（index从0开始） 单个元素 $("input:eq(1)")选取索引等于1的<input>元素
:gt(index) 选取索引大于index的元素（index从0开始） 集合元素 $("input:gt(1)")选取索引大于1的<input>元素，（注:大于1，而不包括1）
:lt(index) 选取索引小于index的元素（index从0开始） 集合元素 $("input:lt(1)")选取索引小于1的<input>元素，（注：小于1，而不包括1）
:header 选取所有的标题元素，例如<h1>，<h2>，<h3>等等 集合元素 $(":header")选取网页中所有的<h1>，<h2>，<h3>，…..
:animated 选取当前正在执行动画的所有元素 集合元素 $("div:animated")选取正在执行动画的<div>元素。
:focus 选取当前正在获取焦点的元素 集合元素 $(":focus")选取当前获取焦点的元素

接下来，使用这些基本过滤选择器来对网页中的<div>，<span>等元素进行操作，示例如表2-9所示。

表2-9 基本过滤选择器示例

epub_731606_53

功能 代码 执行后
改变第一个<div>元素的背景色 $("div:first").css("background","#bbffaa"); image-20211216090106901
改变最后一个<div>元素的背景色 $("div:last").css("background","#bbffaa"); image-20211216090229258
续表

epub_731606_54

功能 代码 执行后
改变class不为one的<div>元素的背景色 $("div:not(.one)").css("background","#bbffaa"); image-20211216090542768
改变索引值为偶数的<div>元素的背景色 $("div:even").css("background","#bbffaa"); image-20211216090659831
改变索引值为奇数的<div>元素的背景色 $("div:odd").css("background","#bbffaa"); image-20211216091209172
改变索引值等于3的<div>元素的背景色 $("div:eq(3)").css("background","#bbffaa"); image-20211216091308548
改变索引值大于3的<div>元素的背景色 $("div:gt(3)").css("background","#bbffaa"); image-20211216091416022
续表

epub_731606_55

功能 代码 执行后
改变索引值小于3的<div>元素的背景色 $("div:lt(3)").css("background","#bbffaa"); image-20211216091811950
改变所有的标题元素，例如<h1>，<h2>，<h3>，…这些元素的背景色 $(":header").css("background","#bbffaa"); image-20211216092505907
改变当前正在执行动画的元素的背景色 $(":animated").css("background","#bbffaa"); image-20211216094031802
改变当前获取焦点的元素的背景色 $(":focus").css("background","#bbffaa"); 插图

执行动画的测试方法如下：
HTML:同上
JS:

1
2
3
4
5
6
7
for(i=0;i<10;i++){
    // 执行动画
    $("#mover").hide(1000*3);
    $("#mover").show(1000*3);
}
// 改变当前正在执行动画的元素的背景色
$(":animated").css("background","#bbffaa");

动画效果如下:

image-20211216094031802
image-20211216094104872

2．内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。内容过滤选择器的介绍说明如表2-10所示。

表2-10 内容过滤选择器
选择器 描述 返回 示例
:contains(text) 选取含有文本内容为“text”的元素 集合元素 $("div:contains('我')")选取含有文本“我”的<div>
:empty 选取不包含子元素或者文本的空元素 集合元素 $("div:empty")选取不包含子元素（包括文本元素）的<div>空元素
：has(selector) 选取含有选择器所匹配的元素的元素 集合元素 $("div:has(p)")选取含有<p>元素的<div>元素
:parent 选取含有子元素或者文本的元素 集合元素 $("div:parent")选取拥有子元素（包括文本元素）的<div>元素

接下来使用内容过滤选择器来操作页面中的元素，示例如表2-11所示。

表2-11 内容过滤选择器示例
功能 代码 执行后
改变含有文本”di”的<div>元素的背景色 $("div:contains(di)").css("background","#bbffaa"); image-20211216150423081
改变不包含子元素（包括文本元素）的<div>空元素的背景色 $("div:empty").css("background","#bbffaa"); image-20211216150530814
改变含有class为mini元素的<div>元素的背景色 $("div:has('.mini')").css("background","#bbffaa"); image-20211216150716592
改变含有子元素（包括文本元素）的<div>元素的背景色 $("div:parent").css("background","#bbffaa"); image-20211216150900129

3．可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。可见性过滤选择器的介绍说明如表2-12所示。

表2-12 可见性过滤选择器
选择器 描述 返回 示例
:hidden 选取所有不可见的元素 集合元素 $(":hidden")选取所有不可见的元素。包括<inputtype="hidden"/>，<divstyle="display:none;">和<divstyle="visibility:hidden;"/>等元素。如果只想选取<input>元素，可以使用$("input:hiddren")
:visible 选取所有可见的元素 集合元素 $("div:visible")选取所有可见的<div>元素

在例子中使用这些选择器来操作DOM元素，示例如表2-13所示。

表2-13 可见性过滤选择器示例
功能 代码 执行后
改变所有可见的<div>元素的背景色 $("div:visible").css("background","#FF6500"); image-20211216152217712
显示隐藏的<div>元素 $("div:hidden").show(3000)
$(":animated").css("background","#bbffaa");		 image-20211216152555314

在可见性选择器中，需要注意选择器:hidden，它不仅包括样式属性display为“none”的元素，也包括文本隐藏域（<input type="hidden"/>）和visibility:hidden之类的元素。

注意：show()是jQuery的方法，它的功能是显示元素，3000是时间，单位是毫秒。

4．属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。属性过滤选择器的介绍说明如表2-14所示。

表2-14 属性过滤选择器
选择器 描述 返回 示例
[atrribute] 选取拥有此属性的元素 集合元素 $("div[id]")选取用拥有属性id的元素
[attribute=value] 选取属性的值为value的元素 集合元素 $("div[title=test]")选取属性title为“test”的<div>元素
[attribute!=value] 选取属性的值不等于value的元素 集合元素 $("div[title!=test]")选取属性title不等于“test”的<div>元素（注意：没有title属性的<div>元素也会被选取）
[attribute^=value] 选取属性的值以value开头的元素 集合元素 $("div[title^test]")选取属性title以“test”开头的<div>元素
[attribute$=value] 选取属性的值以value结尾的元素 集合元素 $("div[title$=test]")选取属性title以“test”结尾的<div>元素
[attribute*=value] 选取属性的值含有value的元素 集合元素 $("div[title*=test]")选取属性title含有“test”的<div>元素
`[attitude =value]` 选取属性值等于给定字符串或者以该字符串为前缀（该字符串后跟着一个连字符“-”）的元素 集合元素
[attibute~=value] 选取属性用空格分隔的值中包含一个给定值的元素 集合元素 $("div[title~='uk']")选取属性title中空格分隔的值中包含字符uk的元素。
[attribute1][attribute2]...[attributeN] 用属性选择器合成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围 集合元素 $("div[id][title$='test']")选取拥有属性id，并且属性title以“test”结束的<div>元素。

接下来使用属性过滤选择器来对<div>和<span>等元素进行操作，示例如表2-15所示。

表2-15 属性过滤选择器示例
功能 代码 执行后
改变含有属性title的<div>元素的背景色 $("div[title]").css("background","#bbffaa"); image-20211216194623728
改变属性title值等于test的<div>元素的背景色 $("div[title=test]").css("background","#bbffaa"); image-20211216194819301
改变属性title值不等于“test”的<div>元素的背景色 $("div[title!=test]").css("background","#bbffaa"); image-20211216194947309
改变属性title值以“te”开始的<div>元素的背景色 $("div[title^=te]").css("background","#bbffaa"); image-20211216195100035
改变属性title值以“est”结束的<div>元素的背景色 $("div[title$=est]").css("background","#bbffaa"); image-20211216195203888
改变属性title值含有”es”的<div>元素的背景色 $("div[title*=es]").css("background","#bbffaa"); image-20211216195318051
改变含有有属性id，并且属性title值含有“es”的<div>元素的背景色 $("div[id][title*=es]").css("background","#bbffaa"); image-20211216195417858

jQuery属性选择器的过滤规则比较多，特别容易混淆。为此，我把几个容易混淆的单独做了一个例子，以加强印象。HTML代码如下：

1
2
3
4
5
<div title="en">title为en的div元素</div>
<div title="en-UK">title为en-UK的div元素</div>
<div title="english">title为english的div元素</div>
<div title="en uk">title为en uk的div元素</div>
<div title="uken">title为uken的div元素</div>

生成的效果图如图2-3所示。

image-20211216200328043

图2-3 初始状态现在用jQuery的表单过滤选择器来操作它们，示例如表2-16所示。
表2-16 属性过滤选择器示例
功能 代码 执行后
改变属性title值以“en”开始的<div>元素的背景色 $("div[title^='en']").css("background","#bbffaa"); image-20211216201336681
改变属性title值含有“en”的<div>元素的背景色 $("div[title*='en']").css("background","#bbffaa"); image-20211216201501273
改变属性title等于“en”或以en为前缀（以该字符串后给有一个连字符’=’） `$(“div[title =’en’]”).css(“background”,”#bbffaa”);`
改变属性title用空格分隔的值中包含字符uk的元素的背景色 $("div[title~='uk']").css("background","#bbffaa"); image-20211216201708505

5．子元素过滤选择器

子元素过滤选择器的过滤规则相对于其它的选择器稍微有些复杂，不过没关系，只要将元素的父元素和子元素区分清楚，那么使用起来也非常简单。另外还要注意它与普通的过滤选择器的区别。

子元素过滤选择器的介绍说明如表2-17所示。

表2-17 子元素过滤选择器
选择器 描述 返回 示例
:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素。(index从1算起) 集合元素 :eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0算起的
:first-child 选取每个父元素的第1个子元素 集合元素 :first只返回单个元素，而:first-child选择符将为每个父元素匹配第1个子元素。
例如$("ul li:first-child");选取每个<ul>中第1个<li>元素
:last-child 选取每个父元素的最后一个子元素 集合元素 同样，:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素。
例如$("ul li:last-child");选择每个<ul>中最后一个<li>元素
:only-child 如果某个元素是它父元素惟一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配 集合元素 $("ul li:only-child")在<ul>中选取是惟一子元素的<li>元素

:nth-child()选择器是很常用的子元素过滤选择器，详细功能如下。

（1）:nth-child(even)能选取每个父元素下的索引值是偶数的元素。
（2）:nth-child(odd)能选取每个父元素下的索引值是奇数的元素。
（3）:nth-child(2)能选取每个父元素下的索引值等于2的元素。
（4）:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素，（n从1开始）。
（5）:nth-child(3n+1)能选取每个父元素下的索引值是（3n+1）的元素。（n从1开始）

接下来利用刚才所讲的选择器来改变<div>元素的背景色，示例如表2-18所示。

表2-18 子元素过滤选择器示例
功能 代码 执行后
改变每个class为one的<div>父元素下的第2个子元素的背景色 $("div.one :nth-child(2)").css("background","#bbffaa"); image-20211217111518207
改变每个class为one的<div>父元素下的第1个元素的背景色 $("div.one :first-child").css("background","#bbffaa"); image-20211217111639646
改变每个class为one的<div>父元素下的最后一个子元素的背景色 $("div.one :last-child").css("background","#bbffaa"); image-20211217111746411
如果class为one的div父元素下只有一个子元素，那么则改变这个子元素的背景色 $("div.one :only-child").css("background","#bbffaa"); image-20211217111909275
注意：eq(index)只匹配一个元素，而:nth-child 将为每一个符合条件的父元素匹配子元素。同时应该注意到 nth-child(index)的index是从 1 开始的，而:eq(index)是从 0 开始的。同理:first和:first-child，:last和:last-child也类似。

6．表单对象属性过滤选择器

此选择器主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。表单对象属性过滤选择器的介绍说明如表2-19所示。

表2-19 表单对象属性过滤选择器
选择器 描述 返回 示例
:enabled 选取所有可用元素 集合元素 $("form1:enabled");选取id为“form1”的表单内的所有可用元素
:disabled 选取所有不可用元素 集合元素 $("form2:disabled");选取id为“form2”的表单内的所有不可用元素
:checked 选取所有被选中的元素（单选框，复选框） 集合元素 $("input:checked");选取所有被选中的<input>元素
:selected 选取所有被选中的选项元素（下拉列表） 集合元素 $("selectoption:selected");选取所有被选中的选项元素

为了演示这些选择器，需要制作一个包含表单的网页，里面要包含文本框、多选框和下拉列表，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
<form id="form1" action="#">
    可用元素：<input name="add" value="可用文本框" /> <br />
    不可用元素：<input name="email" disabled="disabled" value="不可用文本框" /><br />
    可用元素： <input name="che" value="可用文本框" /><br />
    不可用元素：<input name="name" disabled="disabled" 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
    <div></div>
    <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>
    <div></div>
</form>

生成的效果图如图2-4所示。

image-20211217113205473

图2-4 初始状态

现在用jQuery的表单过滤选择器来操作它们，示例如表2-20所示。

表2-20 表单对象属性过滤示例
作用 代码 执行后
改变表单内可用<input>元素的值 $("#form1 input:enabled").val("这里变化了!"); image-20211217132330216
改变表单内不可用<input>元素的值 $("#form1 input:disabled").val("这里变化了!"); image-20211217132504426
获取多选框中的个数 $("input:checked").length; image-20211217145226475
获取下拉框选中的内容 $("select:selected").text(); image-20211217153852108

上表中的后两项测试代码如下:

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
<form id="form1" action="#">
    可用元素：<input name="add" value="可用文本框" /> <br />
    不可用元素：<input name="email" disabled="disabled" value="不可用文本框" /><br />
    可用元素： <input name="che" value="可用文本框" /><br />
    不可用元素：<input name="name" disabled="disabled" 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
    <div id="checkbox_div"></div>
    <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>
    <div id="select_div"></div>
</form>

js代码：

1
2
3
4
5
6
7
8
// 获取多选框中的个数
$('input[name=newsletter]').change(function() {
    $("#checkbox_div").html("<strong>有" + $("input:checked").length + "个被选中!</strong>");
});
// 获取下拉框选中的内容
$("select").change(function () {
    $("#select_div").html("<strong>你选中的是，"+$("select :selected").text()+"</strong>")
})

2.3.4 表单选择器

为了使用户能够更加灵活地操作表单，jQuery中专门加入了表单选择器。利用这个选择器，能极其方便地获取到表单的某个或某类型的元素。

表单选择器的介绍说明如表2-21所示。

表2-21 表单对象属性过滤示例
选择器 描述 返回 示例
:input 选取所有的<input>，<textarea>,<select>和<button>元素 集合元素 $(":input")选取所有<input>，<textarea>和<button>元素
:text 选取所有的单行文本框 集合元素 $(":text")选取所有的单行文本框
:password 选取所有的密码框 集合元素 $(":password")选取所有的密码框
:radio 选取所有的单选框 集合元素 $(":radio")选取所有的单选框
:checkbox 选取所有的多选框 集合元素 $(":checkbox")选取所有的复选框
:submit 选取所有的提交按钮 集合元素 $(":submit")选取所有的提交按钮
:image 选取所有的图像按钮 集合元素 $("image")选取所有的图像按钮
:reset 选取所有的重置按钮 集合元素 $(":reset")选取所有的重置按钮
:button 选取所有的按钮 集合元素 $(":button")选取所有的按钮
:file 选取所有的上传域 集合元素 $(":file")选取所有的上传域
:hidden 选取所有的不可见元素 集合元素 $(":hidden")选取所有不可见元素（已经在不可见性过滤选择器中讲解过）

下面把这些表单选择器运用到下面的表单中，对表单进行操作。

表单HTML代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form id="form1" action="#">
    <input type="button" value="Button" /><br />
    <input type="checkbox" name="c" />1
    <input type="checkbox" name="c" />2
    <input type="checkbox" name="c" />3<br />
    <input type="file" /><br />
    <input type="hidden" />
    <div style="display:none">test</div><br />
    <input type="image" /><br />
    <input type="password" /><br />
    <input type="radio" name="a" />1<input type="radio" name="a" />2<br />
    <input type="reset" /><br />
    <input type="submit" value="提交" /><br />
    <input type="text" /><br />
    <select>
        <option>Option</option>
    </select><br />
    <textarea></textarea><br />
    <button>Button</button><br />
</form>
<div id="show"></div>

根据以上HTML代码，可以生成图2-5所示的页面效果。

image-20211217170509168

图2-5 初始状态

如果想得到表单内表单元素的个数，代码如下：

1
$("#form1 :input").length;

如果想得到表单内单行文本框的个数，代码如下：

1
$("#form1 :text").length;

如果想得到表单内密码框的个数，代码如下：

1
$("#form1 :password").length;

同理，其他表单选择器的操作与此类似。

测试代码：

1
2
3
4
var text = "&lt;input&gt;元素的个数:" + $("#form1 :input").length + "<br>";
text += "&lt;input type='text'&gt;元素的个数:" + $("#form1 :text").length + "<br>";
text += "&lt;input type='password'&gt;元素的个数:" + $("#form1 :password").length + "<br>";
$("#show").html(text);

运行效果：
image-20211217170701172