-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-07-24
来源 ：
阅读 1121
评论 0
摘要：本篇jQuery教程探讨了选择器的相关内容，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。
基本选择器
基本选择器是jquery中最常见的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每一个id名称只能使用一次，class允许重复使用。
示例HTML与CSS：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title></head><style>
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;
}
h1 {
color: red;
}</style>
<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="tesst">class为mini,title为tesst</div>
</div>
<div class="none" style="display: 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></body><script src="./js/js.js"></script>
</html>
初始效果：
初始效果
#id
$("#one").css("background","#bbffaa");
功能描述：改变id为one的元素的背景色
$("#one").css("background","#bbffaa")
.class
$(".mini").css("background","#bbffaa");
功能描述：改变class为mini的所有元素的背景色
$(".mini").css("background","#bbffaa")
element
代码示例：
$("div").css("background","#bbffaa");
功能描述：改变元素名是<div>的所有元素的背景色
$("div").css("background","#bbffaa")
*
代码示例：
$("*").css("background","#bfa");
功能描述：改变所有元素的背景色
$("*").css("background","#bfa");
selector1,selector2,.......,selectorN
将每一个选择器匹配到的元素合并后一起返回
代码示例：
$("span, #two").css("background","#bbffaa");
功能描述：改变所有的<span>元素和id为two元素的背景色
$("span, #two").css("background","#bbffaa");
层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。
$("ancestor descendant")
选择ancestor元素里的所有descendant（后代）元素。（递归的选取子代，子子代）
$("body div").css("background","#bbffaa");
功能描述：改变<body>内所有<div>元素的背景色
$("body div").css("background","#bbffaa");
$("parent > child")
选取parent元素下的child（子元素）元素。（仅子元素，无递归）
$("body > div").css("background","#bbffaa");
功能描述：改变<body>内子元素<div>的背景色
$("body > div").css("background","#bbffaa");
类比W3C的CSS选择器示例：
element>element 选择器用于选取带有特定父元素的元素。 注释：如果元素不是父元素的直接子元素，则不会被选择。
$("parv + next")
选取紧接在prev元素后的next元素
$(".one + div").css("background","#bbffaa");
功能描述：改变class为one的下一个<div>同辈元素背景色
$(".one + div").css("background","#bbffaa");
可以类比W3C的CSS选择器示例：
element+element 选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素。
$("prev ~ siblings")
选取prev元素之后的所有siblings元素
$("#two ~ div").css("background","#bbffaa");
功能描述：改变id为two的元素后面的所有<div>同辈元素的背景色。
$("#two ~ div").css("background","#bbffaa");
类比CSS选择器示例：
element1~element2 选择器 element1 之后出现的所有 element2。 两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。
在层次选择器中，第一个和第二个比较常用，后面两个因为在jquery里可以用更加简单的方法代替，所以使用的机率相对少些。
可以使用next()方法来代替$("prev + next")选择器
$("prev + next")选择器与next()方法的等价关系
选择器 方法
等价关系 $(".one + div"); $(".one").next("div")
可以使用nextAll()方法来代替$("prev ~ siblings")选择器
$("#prev ~ div")选择器与nextAll()方法的等价关系
选择器 方法
等价关系 $("#prev ~ div"); $("#prev").nextAll("div");
siblings()
这里多提一个siblings()方法：
$("#two").siblings("div").css("background","#bbffaa");
功能描述：选取id为two元素的所有同辈div元素，无论前后位置
$("#two").siblings("div").css("background","#bbffaa");
siblings()方法与前后位置无关，只要是同辈节点就都能匹配。
而$("#prev ~ div")和$("prev").nextAll()匹配到的DIV元素都是在#prev元素之后的。
过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号（：）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见
性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
:first
$("div:first").css("background","#bbffaa");
功能描述：改变第一个<div>元素的背景色
$("div:first").css("background","#bbffaa");
:last
$("div:last").css("background","#bbffaa");
功能描述：改变最后一个<div>元素
$("div:last").css("background","#bbffaa");
:not(selector)
$("div:not(.one)").css("background","#bbffaa");
功能描述：去除所有与给定选择器匹配的元素，即取反。
$("div:not(.one)").css("background","#bbffaa");
:even
选取索引是偶数的所有元素，索引从0开始。
$("div:even").css("background","#bbffaa");
功能描述：改变索引值为偶数的<div>元素的背景色
$("div:even").css("background","#bbffaa");
:odd
选取索引是奇数的所有元素，索引从0开始。
$("div:odd").css("background","#bbffaa");
功能描述：改变索引值为奇数的<div>元素的背景色
$("div:odd").css("background","#bbffaa");
:eq(index)
选区索引等于index的元素，index从0开始
$("div:eq(3)").css("background","#bbffaa");
功能描述：改变索引值等于3的<div>元素的背景色。
$("div:eq(3)").css("background","#bbffaa");
:gt(index)
选区索引大于index的元素，index从0开始
$("div:gt(3)").css("background","#bbffaa");
功能描述：改变索引值大于3的<div>元素的背景色。
$("div:gt(3)").css("background","#bbffaa");
:lt(index)
选区索引小于index的元素，index从0开始
$("div:lt(3)").css("background","#bbffaa");
功能描述：改变索引值小于3的<div>元素的背景色。
$("div:lt(3)").css("background","#bbffaa");
:header
选取所有的标题元素，例如h1,h2,h3等
$(":header").css("background","#bbffaa");
功能描述：改变所有的标题元素的背景色。
$(":header").css("background","#bbffaa");
:animated
选取当前正在执行动画的所有元素
$(":animated").css("background","#bbffaa");
功能描述：改变当前正在执行动画的元素的背景色
:focus
选取当前获取焦点的元素
$(":focus").css("background","#bbffaa");
功能描述：改变当前获取焦点的元素的背景色
内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。
:contains(text)
选取含有文本内容为"text"的元素
$("div:contains(di)").css("background","#bbffaa");
功能描述：选取含有文本内容为"di"的的元素
$("div:contains(di)").css("background","#bbffaa");
:empty
选取不包含子元素或者文本的空元素。（空格符也不许有哦）
$("div:empty").css("background","#bbffaa");
功能描述：改变不包含子元素（包括文本元素）的<div>空元素的背景色。
:has(selector)
选取含有选择器所匹配的元素的元素。
$("div:has('.mini')").css("background","#bbffaa");
功能描述：改变，含有class为mini元素的<div>元素的背景色。
$("div:has('.mini')").css("background","#bbffaa");
:parent
选取含有子元素或者文本的元素。（含有空格符也会被选中）
$("div:parent").css("background","#bbffaa");
功能描述：改变含有子元素的<div>元素的背景色
$("div:parent").css("background","#bbffaa");
可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态选择相应的元素。
:hidden
选取所有不可见的元素
$("div:hidden").show(2000);
功能描述：显示隐藏的<div>元素
$("div:hidden").show(2000);
:visible
选取所有可见的元素
$("div:visible").css("background","#ff6500");
功能描述：改变所有可见的<div>元素的背景色
$("div:visible").css("background","#ff6500");
**在可见性选择器中，需要注意:hidden，它不仅包括样式属性display为"none"的元素，也包括文本隐藏域（<input type="hidden" />）和visibility:hidden之类的元素。
属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
[attribute]
选取拥有此属性的元素
$("div[title]").css("background","#bbffaa");
功能描述：改变含有属性title的<div>元素的背景色。
$("div[title]").css("background","#bbffaa");
[attribute=value]
选取属性的值为value的元素
$("div[title=test]").css("background","#bbffaa");
功能描述：改变属性title值等于“test”的<div>元素的背景色
$("div[title=test]").css("background","#bbffaa");
[attribute!=value]
选取属性的值不等于value的元素
$("div[title!=test]").css("background","#bbffaa");
功能描述：改变属性title值不等于"test"的<div>元素
$("div[title!=test]").css("background","#bbffaa");
[attribute^=value]
选取属性的值以value开始的元素
$("div[title^=te]").css("background","#bbffaa");
功能描述：改变属性title值以"te"开始的<div>元素的背景色
$("div[title^=te]").css("background","#bbffaa");
[attribute$=value]
选取属性的值以value结束的元素
$("div[title$=est]").css("background","#bbffaa");
功能描述：改变属性title值以"est"结束的<div>元素的背景色
$("div[title$=est]").css("background","#bbffaa");
[attribute*=value]
选取属性的值含有value的元素
$("div[title*=es]").css("background","#bbffaa");
功能描述：改变属性title值含有"es"的<div>元素的背景色
$("div[title*=es]").css("background","#bbffaa");
jQuery属性选择器的过滤规则比较多，特别容易混淆，为此，把几个容易混淆的单独做一个例子。
HTML：
<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>
初始效果图：
[attribute^=value]
$("div[title^='en']").css("background","#bbffaa");
功能：改变属性title值以“en”开始的<div>元素的背景色
$("div[title^='en']").css("background","#bbffaa");
[attribute*=value]
$("div[title*='en']").css("background","#bbffaa");
功能：改变属性title值含有“en”的<div>元素的背景色
$("div[title*='en']").css("background","#bbffaa");
[attribute|=value]
选取属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个-）的元素
$("div[title|='en']").css("background","#bbffaa");
功能：改变属性title值等于en，或以en为前缀（后跟一个-）的元素的背景色
$("div[title|='en']").css("background","#bbffaa");
[attribute~=value]
选取属性用空格分隔的值中包含一个给定值的元素。
$("div[title~='uk']").css("background","#bbffaa");
功能：改变属性title用空格分隔的值中包含字符uk的元素的背景色。
$("div[title~='uk']").css("background","#bbffaa");
子元素过滤器
子元素过滤选择器的过滤规则相对于其他的选择器稍微有些复杂，要注意它与普通的过滤选择器的区别。
:nth-child(index/even/odd/equation)
选取每个父元素下的第index个子元素或奇偶元素（index从1算起）
$("div.one :nth-child(2)").css("background","#bbffaa");
功能描述：改变每个class为one的<div>父元素下的第2个子元素的背景色。
$("div.one :nth-child(2)").css("background","#bbffaa");
:first-child
选取每个父元素的第1个子元素
$("div.one :first-child").css("background","#bbffaa");
功能描述：改变每个class为one的<div>父元素下的第1个子元素的背景色。
$("div.one :first-child").css("background","#bbffaa");
:last-child
选取每个父元素的最后一个子元素
$("div.one :last-child").css("background","#bbffaa");
功能描述：改变每个class为one的<div>父元素下的最后一个子元素的背景色。
$("div.one :last-child").css("background","#bbffaa");
:only-child
如果某个元素，是它父元素中唯一的子元素，那么将会匹配。如果父元素中含有其他元素，则不匹配。
$("div.one :only-child").css("background","#bbffaa");
功能描述：如果class为one的<div>父元素下只有一个子元素，那么改变这个子元素的背景色。
$("div.one :only-child").css("background","#bbffaa");
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开始）。
表单对象属性过滤选择器
此选择器主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。
演示HTML：
<form id="form1" action="#">
可用元素：
<input type="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>
初始状态：
初始
:enabled
选取所有可用元素
$("#form1 input:enabled").val("这里变化了！").css("color","red");
功能描述：改变表单内可用<input>元素的值和字体颜色
$("#form1 input:enabled").val("这里变化了！").css("color","red");
:disabled
选取所有不可用元素
$("#form1 input:disabled").val("这里变化了！").css("color","red");
功能描述：改变表单内不可用<input>元素的值和字体颜色
$("#form1 input:disabled").val("这里变化了！").css("color","red");
:checked
选取所有被选中的的元素（单选框，复选框）
$("input:checked").length;
功能描述：获取多选框选中的个数
$("input:checked").length;
:selected
选取所有被选中的选项元素（下拉列表）
$("select :selected").text();
功能描述：获取下拉框选中的内容
表单选择器
为了是用户能够更加灵活的操作表单，jQuery中专门加入表单选择器。
本文由职坐标整理发布，学习更多的jQuery相关知识，请关注职坐标WEB前端jQuery频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
