jQuery选择器
- jQuery选择器类似于CSS选择器,用来选取网页中的元素
jQuery选择器分类
jQuery选择器功能强大,种类也很多,分类如下:
类CSS选择器
基本选择器
- 基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器
名称 | 语法构成 | 描述 | 示例 |
标签选择器 | element | 根据给定的标签名匹配元素 | $("h2" )选取所有h2元素 |
类选择器 | .class | 根据给定的class匹配元素 | $(" .title")选取所有class为title的元素 |
ID选择器 | #id | 根据给定的id匹配元素 | $(" #title")选取id为title的元素 |
并集选择器 | selector1,selector2,...,selectorN | 将每一个选择器匹配的元素合并后一起返回 | $("div,p,.title" )选取所有div、p和拥有class为title的元素 |
交集选择器 | element.class或element#id | 匹配指定class或id的某元素或元素集合 | $("h2.title")选取所有拥有class为title的h2元素 |
全局选择器 | * | 匹配所有元素 | $("*" )选取所有元素 |
层次选择器
- 层次选择器通过DOM 元素之间的层次关系来获取元素
名称 | 语法构成 | 描述 | 示例 |
后代选择器 | ancestor descendant | 选取ancestor元素里的所有descendant(后代)元素 | $("#menu span" )选取#menu下的<span>元素 |
子选择器 | parent>child | 选取parent元素下的child(子)元素 | $(" #menu>span" )选取#menu的子元素<span> |
相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元素 | $(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl> |
同辈元素选择器 | prev~sibings | 选取prev元素之后的所有siblings元素 | $(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl> |
属性选择器
名称 | 语法构成 | 描述 | 示例 |
属性选择器 | [attribute] | 选取包含给定属性的元素 | $(" [href]" )选取含有href属性的元素 |
[attribute=value] | 选取等于给定属性是某个特定值的元素 | $(" [href ='#']" )选取href属性值为“#”的元素 |
[attribute !=value] | 选取不等于给定属性是某个特定值的元素 | $(" [href !='#']" )选取href属性值不为“#”的元素 |
[attribute^=value] | 选取给定属性是以某些特定值开始的元素 | $(" [href^='en']" )选取href属性值以en开头的元素 |
[attribute$=value] | 选取给定属性是以某些特定值结尾的元素 | $(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素 |
[attribute*=value] | 选取给定属性是以包含某些值的元素 | $(" [href* ='txt']" )选取href属性值中含有txt的元素 |
[selector] [selector2] [selectorN] | 选取满足多个条件的复合属性的元素 | $("li[id][title=新闻要点]" )选取含有id属性和title属性为新闻要点的<li>元素 |
表单选择器
名称 | 说明 |
:input | 匹配并获得表单中所有input, textarea, select和button元素 |
:text | 匹配并获得所有的文本框 |
:password | 匹配并获得所有密码框 |
:radio | 匹配并获得所有单选按钮 |
:checkbox | 匹配并获得所有复选框 |
:submit | 匹配并获得所有提交按钮 |
:image | 匹配并获得所有图片 |
:reset | 匹配并获得所有重置按钮 |
:button | 匹配并获得所有按钮 |
:file | 匹配并获得所有文件域 |
:hidden | 匹配并获得所有隐藏域 |
表单属性选择器
名称 | 说明 |
:enabled | 匹配并获得所有正常使用的元素 |
:disabled | 匹配并获得所有禁用的元素匹配并获得所有禁用的元素 |
:checked | 匹配并获得所有被选中的复选框 |
:selected | 匹配并获得下拉列表框的选中项 |
内容选择器
- 内容选择器主要使用通过元素所包含的文本或子元素进行匹配或获取
名称 | 说明 |
:contains ( txt ) | 匹配并获得包含有txt文本的元素 |
:empty | 匹配并获得没有子元素或者文本的元素 |
:has ( selector ) | 匹配并获得包含有selector选择器的元素 |
过滤选择器
- 过滤选择器是在获取到元素后通过索引进一步进行过滤或筛选
名称 | 说明 |
:first | 获得匹配到的第一个元素 |
:last | 获得匹配到的最后一个元素 |
:not ( selector ) | 获得除了匹配的元素之外的元素 |
:even | 匹配所有索引值为偶数的元素,从0开始计数 |
:odd | 匹配所有索引值为奇数的元素,从0开始计数 |
:eq ( index ) | 匹配一个给定索引值的元素,从0开始计数 |
:gt ( index ) | 匹配所有大于给定索引值的元素,从0开始计数 |
:lt ( index ) | 匹配所有小于给定索引值的元素,从0开始计数 |
- 过滤选择器通过特定的过滤规则来筛选元素
- 语法特点是使用“:”,如使用$(“li:first”)来选取第一个li元素
- 主要分类如下:
- 基本过滤选择器
- 可见性过滤选择器
- 表单对象过滤选择器(本博客暂不涉及)
- 内容过滤选择器、子元素过滤选择器……
基本过滤选择器
- 选取索引值等于1的元素
- 选取索引值大于1的元素
- 选取索引值小于1的元素
基本过滤选择器还支持一些特殊的选择方式
名称 | 语法构成 | 描述 | 示例 |
基本过滤选择器 | :not(selector) | 选取去除所有与给定选择器匹配的元素 | $(" li:not(.three)" )选取class不是three的元素 |
:header | 选取所有标题元素,如h1~h6 | $(":header" )选取网页中所有标题元素 |
:focus | 选取当前获取焦点的元素 | $(":focus" )选取当前获取焦点的元素 |
可见性过滤选择器
名称 | 语法构成 | 描述 | 示例 |
可见性过滤选择器 | :visible | 选取所有可见的元素 | $(":visible" )选取所有可见的元素 |
:hidden | 选取所有隐藏的元素 | $(":hidden" ) 选取所有隐藏的元素 |
- 获取隐藏的<p>元素,使其显示
- 获取显示的<p>元素,使其隐藏
注意事项
特殊符号的转义
<div id="id#a">aa</div>
<div id="id[2]">cc</div>
错误方式:
$("#id#a");
$("#id[2]");
正确方式:
$("#id\\#a");
$("#id\\[2\\]");
选择器中的空格
- 选择器的书写规范很严格,多一个空格或少一个空格,都会影响选择器的效果
选取class为“test”的元素内部的隐藏元素:
var $t_a = $(".test :hidden"); //带空格的jQuery选择器
选取隐藏的class为“test”的元素:
var $t_b = $(".test:hidden"); //不带空格的jQuery选择器
总结
常见的jQuery选择器:
- 基本选择器
- 标签选择器、类选择器、ID选择器
- 并集选择器、交集选择器、全局选择器
- 层次选择器
- 属性选择器
- 基本过滤选择器
- 可见性过滤选择器