5.2.1基本选择器
基本语法:$(选择器)
选择器 | 功能描述 | 示例 |
* | 匹配所有元素 | $("*"):选取所有的元素 |
#id | 根据指定id匹配一个元素 | $("#test"):选取id为test的元素 |
.class | 根据指定类名匹配所有元素 | $(".test"):选取所有class为test的元素 |
element | 根据指定元素名匹配所有元素 | $("div"):选取所有<div>元素 |
selector1,… ,
selectorN
| 将每个选择器匹配到的元素合并后一起返回 | $("div,span,p.test"):选取所有标签为<div>、<span>和<p class="test"的一组元素 |
5.2.2层次选择器
层次选择器是通过DOM元素间的层次关系来获取元素的。例如:后代元素、子元素、相邻元素、兄弟元素等。
选择器 | 功能描述 | 示例 |
ancestor descendant | 选取祖先(ancestor)元素匹配所有后代(descendant)元素 | $("div span")选取<div>中所有后代元素<span> |
parent>child | 根据父元素匹配所有的子元素 | $("div > span")选取<div>中所有子元素<span> |
prev+next | 匹配所有紧接在prev元素后的相邻元素 | $(".test+div")选取class为test后紧邻的<div>元素 |
prev~siblings | 匹配prev元素之后的所有兄弟元素 | $("#test~div")选取id为test的元素后面的所有<div>兄弟元素 |
5.2.3过滤选择器
过滤选择器通过特定的过滤规则筛选出所需的DOM元素
按照不同的过滤规则,分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象过滤
1.基本过滤选择器
选择器 | 功能描述 | 示例 |
:first | 匹配找到的第一个元素 | $("div:first")选取所有<div>元素中的第一个<div>元素 |
:last | 匹配找到的最后一个元素 | $("div:last")选取所有<div>元素中的最后一个<div>元素 |
:not(selector) | 匹配所有不匹配给定选择器的元素 | $("div:not(.test) ")选取所有class不是test的<div>元素 |
:even | 匹配索引是偶数的所有元素(从0开始计数) | $("div:even")选取所有索引是偶数的<div>元素 |
:odd | 匹配索引是奇数的所有元素(从0开始计数) | $("div:odd")选取所有索引是奇数的<div>元素 |
:eg(index) | 匹配一个给定索引值的元素(从0开始计数) | $("div:eq(1)")选取一个索引等于1的<div>元素 |
:gt (index ) | 匹配所有大于给定索引值的元素(从0开始计数) | $("div:gt(1)")选取所有索引大于1的<div>元素 |
:lt(index ) | 匹配所有小于给定索引值的元素(从0开始计数) | $("div:lt(1)")选取所有索引小于1的<div>元素 |
:header | 匹配所有的标题元素(从0开始计数) | $(:header)选取所有的标题元素<h1>、<h2>、<h3>…… |
:animated | 匹配所有当前正在执行动画的元素 | $("div:animated ")选取所有正在执行动画的<div> 元素 |
2.内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。
选择器 | 功能描述 |
:contains(text) | 匹配包含给定文本的元素 |
:empty | 匹配所有不包含子元素和文本的空元素 |
:has(selector) | 匹配含有“选择器所匹配的元素"的元素 |
:parent | 匹配含有子元素或者文本的元素 |
3.可见性过滤选择器
选择器 | 功能描述 |
:hidden | 匹配所有不可见的元素 |
:visiable | 匹配所有可见的元素 |
4.属性过滤选择器
选择器 | 功能描述 |
[attribute] | 匹配拥有此属性的元素 |
[attribute=value] | 匹配属性的值为value的元素 |
[attribute=!value] | 匹配属性的值不为value的元素 |
[attribute^=value] | 匹配属性的值以value开始的元素 |
[attribute$=value] | 匹配属性的值以value结束的元素 |
[attribute*=value] | 匹配属性含有value的元素 |
[selector1][selector2]……[selectorN] | 复合属性选择器,需要同时满足多个条件时使用 |
5.子元素过滤选择器
通过子元素过滤选择器可以获取父元素中指定的元素
选择器 | 功能描述 |
:nth-child(index|odd|even) | 匹配父元素下的特定位置元素(从1开始计数) |
:first-child | 匹配父元素下的第一个子元素 |
:last-child | 匹配父元素下的最后一个子元素 |
:only-child | 如果某个元素时父元素中唯一的一个子元素,则会被匹配 |
6.表单对象属性过滤选择器
选择器 | 功能描述 |
:checked | 匹配所有被选中的元素 |
:selected | 匹配所有被选中的选项元素 |
:enabled | 匹配所有可用的元素 |
:duisabled | 匹配所有不可用的元素 |
5.2.4表单选择器
选择器 | 功能描述 |
:input | 匹配所有的<inpput>、<textarea>、<select>和<button>元素 |
:text | 匹配所有的单行文本框 |
:password | 匹配所有的密码框 |
:radio | 匹配所有的单选按钮 |
:heckbox | 匹配所有的复选框 |
:submit | 匹配所有的提交按钮 |
:image | 匹配所有的图像域 |
:reset | 匹配所有的重置按钮 |
:button | 匹配所有的按钮 |
:file | 匹配所有的文件上传域 |
:hidden | 匹配所有的不可见元素 |