jQuery笔记：选择器
文章目录
- jQuery选择器是什么
- jQuery的基本选择器
- jQuery的层次选择器
- jQuery的过滤选择器
- 一、基本过滤选择器
- 二、内容过滤选择器
- 三、可见性过滤选择器
- 四、属性过滤选择器
- 五、子元素过滤选择器
- 六、表单对象属性过滤选择器
- jQuery的表单选择器
jQuery选择器是什么
在此之前我们需要了解前几年流行起来的CSS（Cascading Style Sheet）----层叠样式表技术。CSS是一项出色的技术，它使得网页的结构和表现形式完全分离。利用CSS选择器可以轻松对某个元素添加样式而不改动HTML结构。除了“标签选择器（某文档元素 {CSS规则}）”、“ID选择器(#ID {CSS规则})”、“类选择器(某文档元素.className {CSS规则})”、“群组选择器(文档元素1,文档元素2 {CSS规则})”、“后代选择器(父文档元素 子文档元素{CSS规则})”、“通配选择器(* {CSS规则})”，CSS还有伪类选择器（E:PseudoElements{CSS规则})、子选择器(E>F{CSS规则})、临近选择器(E+F{CSS规则})和属性选择器(E[attr]{CSS规则})等。但主流浏览器并非完全支持所有CSS选择器，但jQuery中的选择器能够完全兼容所有主流浏览器，jQuery中涉及操作CSS样式部分比单纯的CSS功能更为强大，并且拥有跨浏览器的兼容性。
jQuery的基本选择器
首先一段HTML代码，以下选择器都基于此HTML代码操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery选择器</title>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></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>
<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="tests">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为"hide"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素</span>
</body>
</html>
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，通过标签、元素id、class等来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使用。
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| #id | 根据给定id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
| .class | 根据类名匹配元素 | 集合元素 | $(".test")获取所有class为test的元素 |
| element | 根据的元素名匹配元素 | 集合元素 | $(“p”)选取所有 元素 |
| * | 匹配所有元素 | 集合元素 | $("*")选取所有元素 |
| select1,select2… | 将每一个选择器匹配到的元素合并一起返回 | 集合元素 | $(“div,span,p.myClass”)选取所有
,
和拥有class为myClass的
标签的一组元素 |
例子：
| 功能 | 代码 | 执行后 |
|---|---|---|
| 改变id为one的元素背景色 | $("#one").css(“background”,"#bbffaa") |  |
| 选择class为mini的所有元素 | $(’.mini’).css(“background”,"#bbffaa"); |  |
| 改变元素名是
的所有元素的背景色
|
$(‘div’).css(“background”,"#bbffaa"); |  |
| 改变所有元素的背景色 | $(’*’).css(“background”,"#bbffaa"); |  |
| 改变所有的元素和id为two的元素的背景色 | $(‘span,#two’).css(“background”,"#bbffaa"); |  |
jQuery的层次选择器
如果想通过DOM元素之间的层次关系获取特定元素，例如后代元素、子元素、相邻元素和同辈元素，则使用层次选择器。
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| $(“ancestor descendant”) | 选取ancestor元素里的所有descendant(后代)元素 | 集合元素 | $(“div span”)选取
里所有的
元素
|
| $(“parent > child”) | 选取parent元素下的child（直接子元素，child下面的元素不会选取） | 集合元素 | $(“div>span”)选取
元素仅下一层元素名是
的子元素
|
| $(“prev+next”)等价$(“prev”).next(“div”) | 选取紧接在prev元素后的同辈next元素 | 集合元素 | $(".one+div")选取class为one的下一个
同辈元素
|
| $(“prev~siblings”)等价$(“prev”).nextAll(“siblings”) | 选取prev元素之后的所有>siblings元素 | 集合元素 | $("#two~div")选取id为two的元素后面的所有
同辈元素
|
tips:
$(“prev~siblings”)或者$(“prev”).nextAll(“siblings”)只能选择"prev"元素后面的同辈"siblings"元素。而siblings()方法与前后位置无关，如$(“prev”).siblings(“div”).css(“background”,"#bbffaa");选取"prev"所有的同辈div元素，无论前后位置。
例子：
| 功能 | 代码 | 执行后 |
|---|---|---|
| 改变内所有 的背景色 |
$(‘body div’).css(“background”,"#bbffaa"); |  |
| 改变内子 元素的背景色 |
$(‘body > div’).css(“background”,"#bbffaa"); |  |
| 改变class为one的下一个 同辈元素背景色，需要连贯性，若中间隔了一个标签元素或者隐藏元素则该 不被选中，如红字部分 |
$(’.one + div’).css(“background”,"#bbffaa"); |  |
| 改变class为one的元素后面的所有 同辈元素背景色，不需要连贯性，注意同上的区别 |
$(’#.one ~ div’).css(“background”,"#bbffaa"); |  |
jQuery的过滤选择器
过滤选择器主要通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中伪类选择器语法相同，过滤器都是以冒号（:）开头且与选择器结合使用，通常选择器选择的都是一个集合，包含多个标签元素，当我们进一步选择的话就需要过滤器，即先进行选择再进行过滤。
一、基本过滤选择器
| 选择器 | 描述 | 返回 | 示例 | 执行后 |
|---|---|---|---|---|
| :first | 选取第1个元素 | 单个元素 | $(“div:first”)选取所有 元素中第一个 元素，嵌套放在同一层级比较 |
 |
| :last | 选取最后1个元素 | 单个元素 | $(“div:last”)选取所有 元素中最后一个 元素，嵌套放在同一层级比较 |
 |
| :eq(index) | 匹配一个给定索引值的元素 | 单个元素 | $(“div:eq(1)”)选取所有 元素中第二个 元素，将嵌套的元素也放在同一层级比较 |
 |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $(“div:not(.one)”)选取class不是myClass的元素 |  |
| :even | 选取索引是偶数的所有元素，索引从0开始 | 集合元素 | $(“div:even”)匹配 索引值为偶数的元素 |
 |
| :odd | 选取索引是奇数的所有元素，索引从0开始 | 集合元素 | $(“div:odd”)匹配 索引值为奇数的元素 |
 |
| :gt(index) | 选取索引大于而不等于index的元素，索引从0开始 | 集合元素 | $(“div:gt(0)”)选取索引大于0的 元素，包含嵌套的 |
 |
| :lt(index) | 选取索引小于而不等于index的元素，索引从0开始 | 集合元素 | $(“div:lt(3)”)选取索引小于3的 元素，包含嵌套的 |
 |
| :animated | 改变当前正在执行动画的元素的背景色 | 集合元素 | $(":animated")选取当前正在执行动画的元素 |  |
| :header | 选取所有的标题元素 | 集合元素 | $(":header")选取网页中所有的， |
|
| :focus | 选取当前获取焦点的元素 | 集合元素 | $(":focus")选取当前获取焦点的元素 |
二、内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。
| 选择器 | 描述 | 返回 | 示例 | 执行后 |
|---|---|---|---|---|
| :contains(text) | 选取含有文本内容为"text"的元素 | 集合元素 | $(“div:contains(di)”)选取含有文本"di"的 元素 |
 |
| :empty | 选取不包含子元素或者文本的空元素 | 集合元素 | $(“div:empty”)选取不包含子元素（包括文本元素）的空 元素 |
 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $(“div:has(’.mini’)”)选取含有class为mini元素的 元素 |
 |
| :parent | 选取含有子元素或者文本的元素 | 集合元素 | $(“div:parent”)选取拥有子元素（包含文本元素）的 元素 |
 |
三、可见性过滤选择器
根据元素的可见和不可见状态来选择相应的元素。
| 选择器 | 描述 | 返回 | 示例 | 执行后 |
|---|---|---|---|---|
| :hidden | 选取所有不可见元素 | 集合元素 | $(“div:hidden”).show(3000)由隐藏3秒切换到显示 |  |
| :visible | 选取所有可见元素 | 集合元素 | $(“div:visible“)选取可见的 元素 |
 |
tips：在可见性选择器中，:hidden不仅包含样式属性display为"none"的元素，也包括文本隐藏域
和visibility:hidden之类的元素。
四、属性过滤选择器
属性过滤选择器是通过元素的属性来获取相应的元素。
| 选择器 | 描述 | 返回 | 示例 | 执行后 |
|---|---|---|---|---|
| [attribute] | 选取拥有此属性的元素 | 集合元素 | $(“div[title]”)选取含有属性title的
元素
|
 |
| [attribute=value] | 选取属性的值为value的元素 | 集合元素 | $(“div[title=test]”)选择属性title值等于"test"的 元素 |
 |
| [attribute]!=value | 选取属性值不等于value的元素 | 集合元素 | $(“div[title!=test]”)选择title属性不等于"test" |  |
| [attribute^=value] | 选取属性值以value开头的元素 | 集合元素 | $(“div[title^=te]”)选择属性title以"te"开始的 元素 |
 |
| [attribute$=value] | 选取属性值以value结束的元素 | 集合元素 | $(“div[title$=est]”)选择属性title值以"est"结束的 |  |
| [attribute*=value] | 选取属性的值含有value的元素 | 集合元素 | $(“div[title*=es]”)选取属性title值含有"es"的
元素
|
 |
| [attribute1][attribute2][attributeN] | 利用属性选择器合并成一个复合属性选择器，满足多个条件，每选择一次，缩小一次范围 | 集合元素 | $(“div[id][title*=es]”)选择含有属性id，并且属性title值含有"es"的 元素 |
 |
五、子元素过滤选择器
子元素过滤选择器是筛选给定某个元素的子元素。
| 选择器 | 描述 | 返回 | 示例 | 执行后 |
|---|---|---|---|---|
| :first-child | 选取每个父元素的第1个子元素 | 集合元素 | :first只返回单个元素，而:first-child选择符将为每个父元素匹配第1个子元素，如:$(“div.one :first-child”)选择每个class为one的 父元素下的第1个子元素，注意空格不能少 |
 |
| :last-child | 选取每个父元素的最后一个子元素 | 集合元素 | :last只返回单个元素，而:last-child选择器将为每个父元素匹配最后一个子元素，如:$(“div.one :last-child”)选择每个class为one的 父元素 |
 |
| :only-child | 如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会匹配 | 集合元素 | $(“div.one :only-child”)如果class为one的 父元素下只有一个子元素，则选择该子元素 |
 |
| :nth-child(index/even/odd/equation) | 选取每个父元素下的第index个子元素或者奇偶元素（index从1开始） | 集合元素 | :eq(index)只匹配一个元素并且index从0开始,而:nth-child将为每个父元素匹配子元素并且index从1开始，如:$(“div.one :nth-child(2)”)选择每个class为one的 父元素下的第2个子元素 |
 |
tips:
- :nth-child(even)：选取每个父元素下索引值是偶数的元素
- :nth-child(odd)：选取每个父元素下索引值是奇数的元素
- :nth-child(2)：选取每个父元素下索引值等于2的元素
- :nth-child(3n)：选取每个父元素下的索引值是3的倍数的元素，n从1开始
- :nth-child(3n+1)：选取每个父元素下的索引值是（3n+1）的元素，n从1开始
六、表单对象属性过滤选择器
表单对象的属性过滤器通过表单元素的状态属性（如选中、不可用等状态）匹配元素。
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2-11</title>
<!-- 引入jQuery -->
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//
$(document).ready(function(){
//重置表单元素
$(":reset").click(function(){
setTimeout(function() {
countChecked();
$("select").change();
},0);
});
//对表单内 可用input 赋值操作.
$('#btn1').click(function(){
$("#form1 input:enabled").val("这里变化了！");
return false;
})
//对表单内 不可用input 赋值操作.
$('#btn2').click(function(){
$("#form1 input:disabled").val("这里变化了！");
return false;
})
//使用:checked选择器，来操作多选框.
$(":checkbox").click(countChecked);
function countChecked() {
var n = $("input:checked").length;
$("div").eq(0).html("有"+n+" 个被选中!");
}
countChecked();//进入页面就调用.
//使用:selected选择器，来操作下拉列表.
$("select").change(function () {
var str = "";
$("select :selected").each(function () {
str += $(this).text() + ",";
});
$("div").eq(1).html("你选中的是："+str+"");
}).trigger('change');
// trigger('change') 在这里的意思是：
// select加载后，马上执行onchange.
// 也可以用.change()代替.
});
//]]>
</script>
</head>
<body>
<h3> 表单对象属性过滤选择器.</h3>
<form id="form1" action="#">
<button type="reset">重置所有表单元素</button>
<br /><br />
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button>
<br /><br />
<!-- 测试的元素 -->
可用元素：<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>
<br/><br/>
<div></div>
</form>
</body>
</html>
| 选择器 | 描述 | 返回 | 示例 | 执行后 |
|---|---|---|---|---|
| :enabled | 选取所有可用元素 | 集合元素 | $("#form1 input:enabled").val(“这里变化了！”)改变id为"form1"的表单内可用元素的值 |  |
| :disabled | 选取所有不可用元素 | 集合元素 | $("#form1 input:disabled").val(“这里变化了！”)改变id为"form1"的表单内不可用元素的值 |  |
| :checked | 选取所有被选中的元素（单选框、复选框） | 集合元素 | $(“input:checked”).length获取所有被选中的多选框个数 |  |
| :selected | 选取所有被选中的选项元素（下拉列表） | 集合元素 | $(“select:selected”).text() 获取下拉框选中的内容 |  |
jQuery的表单选择器
表单选择器是匹配经常在表单内出现的元素，但是匹配的元素不一定在表单中
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :input | 选取所有、 |