过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,选择器都以一个冒号(:)开头,按照不同的过滤规则,过滤选择器可以分为下面几类:
- 基本过滤选择器
- 内容过滤选择器
- 可见性过滤选择器
- 属性过滤选择器
- 子元素过滤选择器
- 表单对象属性过滤选择器
接下来让我们一起学习一下这几类选择器吧!
1.基本过滤选择器
选择器 | 描述 | 返回值 |
:first | 选取第一个元素 | 单个元素 |
:last | 选取最后一个元素 | 单个元素 |
:not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 |
:even | 选取索引是偶数的所有元素,索引从0开始 | 集合元素 |
:odd | 选取索引是奇数的所有元素,索引从0开始 | 集合元素 |
:eq(index) | 选取索引等于index的所有元素,索引从0开始 | 单个元素 |
:gt(index) | 选取索引大于index的所有元素,索引从0开始 | 集合元素 |
:lt(index) | 选取索引小于index的所有元素,索引从0开始 | 集合元素 |
:header | 选取所有的标题元素,例如h1,h2,h3等等 | 集合元素 |
:animated | 选取当前正在执行动画的所有元素 | 集合元素 |
:focus | 选取当前获取焦点的元素 | 集合元素 |
2.内容过滤选择器
过滤规则主要体现在它所包含的子元素或文本内容上。
选择器 | 描述 | 返回值 |
:contains(text) | 选取含有文本内容为”text“的元素 | 集合元素 |
:empty | 选取不包含子元素或者文本的空元素 | 集合元素 |
:has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 |
:parent | 选取含有子元素或者文本的元素 | 集合元素 |
3.可见性过滤选择器
过滤规则是根据元素的可见和不可见状态来选择相应的元素。
选择器 | 描述 | 返回值 |
:hidden | 选取所有不可见的元素 | 集合元素 |
:visible | 选取所有可见的元素 | 集合元素 |
4.属性过滤选择器
过滤规则是通过元素的属性来获取相应的元素
选择器 | 描述 | 返回值 |
[attribute] | 选取拥有此元素的元素 | 集合元素 |
[attribute=value] | 选取属性的值为value的元素 | 集合元素 |
[attribute!=value] | 选取属性的值不等于value的元素 | 集合元素 |
[attribute^=value] | 选取属性的值以value开始的元素 | 集合元素 |
[attribute$=value] | 选取属性的值以value结尾的元素 | 集合元素 |
[attribute*=value] | 选取属性的值含有value的元素 | 集合元素 |
[attribute|value] | 选取属性等于给定字符串或以该字符串为前缀的元素 | 集合元素 |
[attribute~value] | 选取属性用空格分隔的值中包含一个给定值的元素 | 集合元素 |
[attribute][attribute2][attributeN] | 用属性选择器合并成一个复合属性选择器,满足多个条件,每选择一次,缩小一次范围 | 集合元素 |
5.子元素过滤选择器
过滤规则相对复杂
选择器 | 描述 | 返回值 |
:nth-child(index) | 选取每个父元素下的第index个子元素(index从1算起) | 集合元素 |
:first-child | 选取每个父元素下的第1个子元素 | 集合元素 |
:last-child | 选取每个父元素下的最后一个子元素 | 集合元素 |
:only-child | 如果某个元素是它父元素中唯一的子元素,那么将会匹配 | 集合元素 |
6.表单对象属性过滤选择器
此选择器主要对所选择的表单元素进行过滤
选择器 | 描述 | 返回值 |
:enable | 选取所有可用元素 | 集合元素 |
:disable | 选取所有不可用元素 | 集合元素 |
:checked | 选取所有被选中的元素(单选框,复选框) | 集合元素 |
:selected | 选取所有被选中的元素(选项元素) | 集合元素 |