jQuery选择器是继承了CSS和Xpath的部分语法,总体分为四种:基本选择器、层次选择器、过滤选择器和表单选择器。
基本选择器
基本选择器 | 功能描述 | 简单示例 |
#id ID选择器 | 根据指定 id 匹配一个元素 | $("#abc") 获取id为abc的元素 |
.class 类选择器 | 根据指定类名匹配元素 | $(".abc") 获取类名为abc的元素 |
element 元素选择器 | 根据指定元素名匹配元素,即标签。 | $("div") 获取所有的<div>元素 |
selector1,s2,s3.群组选择器 | 将匹配到的所有元素合并到返回的jQuery对象 | $("div, p, h1, .abc ") 获取所有的<div>、<p>、<h1>元素及类名为abc的元素 |
* 通配选择器 | 匹配所有元素 | $("*") 获取所有元素 |
<div>
div标签
</div>
<p>p标签</p>
<h1>H1标签</h1>
<h2>H2标签</h2>
<div id="d2">
<span>span1</span>
<span>span2</span>
<p>p2</p>
</div>
<!-- 简单演示群组选择器、通配选择器 -->
<script>
//选取所有div p ul h1元素,设置字体为红色
$("div, p, ul, h1").css("color", "red");
//选取id为d2元素中所有元素,设置字体为蓝色
$("#d2 *").css("color", "blue");
</script>
层次选择器
层次选择器 | 功能描述 | 简单示例 |
$("E F") 后代选择器 | 匹配祖先元素 E 中所有的后代元素 F | $("div .test") 选取div元素中,类名为test的所有元素 |
$("E > F") 子选择器 | 匹配父元素 E 中所有的子元素 F | $("#test > div") 匹配所有div元素,父元素是id为test元素 |
$("E + F") 相邻兄弟选择器 | 匹配紧接着 E 元素后的相邻元素 F | 省略,看实例。 |
$("E ~ F") 通用兄弟选择器
| 匹配 E 元素之后的所有 F 元素
| 省略,看实例。 |
<div id="outer">
<div id="inter_1">
<h1>inter_1的h1</h1>
<p>inter_1的p</p>
</div>
<div id="inter_2">
<h1>inter_2的h1</h1>
<p>inter_2的p</p>
</div>
<h1>outer的h1</h1>
<p>outer的p</p>
</div>
<script>
//选取id为outer元素中所有的 h1 和 p 元素
$("#outer h1,p").each(function(){
console.log( $(this).text() ); //控制台查看获取的文本值
});
//选取所有 h1 和 p 元素,它们父元素是id为outer的元素
$("#outer > h1,p").css("color", "red");
//选取id为inter_1的元素中所有紧接着 h1 元素的p元素
$("#inter_1 h1+p").css("color", "green");
$("#inter_1 > h1+p") //如果匹配h1+p的父元素非#inter_1 ,就不能匹配。
//匹配h1之后所有的p元素,祖先元素是id为inter_2的元素
$("#inter_2 h1 ~ p")
//匹配h1之后所有的p元素,父元素是id为inter_2的元素
$("#inter_2 > h1 ~ p")
</script>
层次选择器和基本选择器常常结合起来使用,使用时要注意区分后代选择器和子选择器的层次关系:一个是祖先关系,一个是父系。
关于相邻兄弟选择器和通用兄弟选择器,jQuery有两个方法和它们是等价的,next() 和 nextAll()。
next()返回下一个元素,nextAll()返回后续全部元素。注意这是无参时,因为jQuery有些方法都有个特点,就是担当get和set的功能,就像text()或者html(),无参就返回相应结果,传参就设置相关值。这两个也一样,实例如下:
//在id为inter_2的祖先元素中匹配h1元素之后的p元素。相当于nextAll("p")[0]
$("#inter_2 h1 + p") == $("#inter_2 h1").next("p")
//在id为inter_2的祖先元素中匹配h1元素之后的所有p元素
$("#inter_2 h1 ~ p") == $("#inter_2 h1").nextAll("p")
过滤选择器
基本过滤选择器 | 功能描述 | 简单实例 |
---|---|---|
:first first() | 获取第一个元素 | $("p:first") 选取第一个 <p> 元素。 |
:last last() | 获取最后一个元素 | $("p:last") 最后一个 <p> 元素 |
:even | 获取所有索引值为偶数的元素,索引从0开始 | $("tr:even") 所有偶数 <tr> 元素 |
:odd | 获取所有索引值为奇数的元素,索引从0开始 | $("tr:odd") 所有奇数 <tr> 元素 |
:eq(index) | 获取所有等于指定索引值的元素,索引从0 | $("ul li:eq(3)") 列表中的第四个元素(索引从 0 开始) |
:gt(index) | 获取所有大于指定索引值的元素,索引从0 | $("ul li:gt(3)") 列出 index 大于 3 的元素 |
:lt(index) | 获取所有小于指定索引值的元素,索引从0 | $("ul li:lt(3)") 列出 index 小于 3 的元素 |
:header | 获取所有标题元素<h1>-<h6> | $("#test :header") 匹配id为test元素中的所有标题元素 |
:not(selector) | 获取除指定选择器之外的所有元素。取反! | $("input:not(:empty)") 所有不为空的 input 元素 |
:animated | 获取正在执行动画效果的元素 | |
内容过滤选择器 | -------------------------------------------- | -------------------------------------------------------- |
:contains(text) | 获取所有包含指定文本的元素 | $(":contains('文本字符')") 包含 “文本字符” 字符串的所有元素 |
:empty | 获取所有不包含子元素或者文本的空元素 | $("p:empty") 获取不包含子元素或者文本的p元素 |
:has(selector) | 获取包含指定选择器所匹配元素的所有元素 | $("div:has('p')") 获取所有div元素,过滤出只包含p元素的div元素 |
:parent | 获取包含子元素或者文本的元素 | $("#d :parent") 获取id为d 元素中包含子元素或者文本的元素 |
可见性过滤选择器 | -------------------------------------------- | -------------------------------------------------------- |
:hidden | 获取所有不可见元素或type=hidden的表单元素 | $("p:hidden") 所有隐藏的 <p> 元素 |
:visible | 获取所有可见的元素 | $("table:visible") 所有可见的表格 |
属性过滤选择器 | 功能描述 | 简单实例 |
---|---|---|
[attribute] | 获取包含指定属性的元素 | $("[id]") 所有具有id 属性的元素 |
[attr = value] | 获取指定的属性等于该属性值的元素 | $("[href='#']") 所有 href 属性的值等于 "#" 的元素 |
[attr != value] | 获取指定的属性不等于该属性值的元素 | $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素 |
[attr ^= value] | 获取指定的属性是以value作为开始的元素 | $("[class^=abc]")所有class属性以abc作为前缀的元素 |
[attr $= value] | 获取指定的属性是以value作为结尾的元素 | $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
[attr ~= value] | 获取指定的属性用空格分隔的值中包含一个给定值的元素 | |
[attr |= value] | 获取指定的属性等于value或以value作为前缀的元素 | $("[class |= t]") 选取class属性等于t 或以 t作为前缀的元素 |
[attr *= value] | 获取指定的属性是以包含了value值的元素 | $("[class *= t]") 选取class属性中包含了t值的元素 |
[attr1] [attr2] [attrN] | 获取包含了多个指定属性的元素 | $("[class *= t][ab][xyz]") 选取class属性中包含t值 ,具有ab属性和xyz属性的元素 |
除此之外,还有一个专门针对子元素的过滤选择器,语法如下:
:nth-child(index/even/odd/equation) 选取每个父元素下第index个子元素(父元素中的子元素都有个索引号,表明顺序)或者奇偶元素,index是从1开始。
:first-child 选取每个父元素的第一个子元素。
:last-child 选取每个父元素的最后一个子元素。
:only-child 选取只有一个子元素的父元素。
使用注意: 使用过滤选择器时一定要注意空格问题,例如:
console.log( $(".abc :first") ); //选取class=abc的所有元素,匹配后代元素中第一个元素
console.log( $(".abc").first() );//选取class=abc的所有元素,匹配第一个class=abc的元素
根据层次关系的改变,过滤规则所对应的元素也不相同,所以要非常注意。
表单选择器
在前端开发中,通过表单来提交和传递数据非常频繁,所以jQuery为了更加方便、高效地获取表单元素,专门提供一个表单选择器。语法和过滤选择器差不多,以冒号开头,但后续名称都是表单类型名和表单属性,非常容易记忆。 可以简单理解成:以表单相关内容作为过滤规则的过滤选择器。想了解表单元素有哪些,请戳表单元素总结
事件名 | 触发该事件 |
:input | 获取所有 <input> <select> <textarea> 元素。 |
:text | 获取所有 type=text 的 <input> 元素。文本框 |
:password | 获取所有 type=password 的 <input> 元素。加密文本框。 |
:radio | 获取所有 type=radio 的 <input> 元素。单选框 |
:checkbox | 获取所有 type=checkbox 的 <input> 元素。复选框 |
:submit | 获取所有 type=submit 的 <input> 元素。提交表单按钮 |
:reset | 获取所有 type=reset 的 <input> 元素。重置表单内容按钮 |
:file | 获取所有 type=file 的 <input> 元素。 文件上传 |
:button | 获取所有 type=button 的 <input> 元素。按钮框,已被<button>代替。 |
:image | 获取所有 type=image 的 <input> 元素。 图像提交按钮。 |
:hidden | 获取所有 type=hidden 的 <input> 元素。即不可见 |
:checked | 获取表单中所有被选中的元素。 |
:selected | 获取表单中所有被选中的<option>元素。 |
:enabled | 获取表单中所有属性为可用的元素。 |
:disabled | 获取表单中所有属性为不可用的元素。 |
使用注意::input会获取表单中的<input> <select> <textarea> <button>元素,如果要单独查找某元素,建议使用标签名。而要查找<input>的具体类型元素时,使用上面的 :text、:password、:submit等非常方便,等同于$("input[type='value']")选择器。
下面给上运用:checked 实现全选、全不选和反选复选框。
<body>
<!-- 包含全选/全不选 -->
<button id="all_select">全选</button>
<button id="inverse_select">反选</button>
<div id="sel_div">
<input type="checkbox" value="">语文
<input type="checkbox" value="">数学
<input type="checkbox" value="">英语
</div>
<script>
//全选全不选按钮 添加单击事件
$("#all_select").on("click", function(){
if( $(this).text() == "全选" ){
//遍历筛选出的所有 type=checkbox的input元素
$( "#sel_div :checkbox" ).each(function(i, domEle) {
//input元素的checked属性为未选中,即!false
if(!domEle.checked)
domEle.checked = true;
});
$(this).text("全不选");
}else{
$("#sel_div :checkbox").each(function(){
//选中的改成不选中
if(this.checked)
this.checked = false;
});
$(this).text("全选");
}
});
//反选
$("#inverse_select").on("click", function(){
//获取所有复选框
$("#sel_div :checkbox").each(function(){
//选中的就改成不选中,不选中的改成选中
if(this.checked)
this.checked = false;
else
this.checked = true;
});
});
</script>
至于其他表单选择器就不一一举例了。如果要实验它们的作用,可以单独写一个包含所有表单元素的注册页面,然后一一测验这些选择器。