作者:涩味122_508 | 来源:互联网 | 2023-10-11 14:24
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,该选择器都以“:”开头按照不同的过滤规则,过滤选择器又可分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单
过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
按照不同的过滤规则, 过滤选择器又可分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器
基本过滤
改变第一个 div 元素的背景色为 # bbffaa
$("div:first")
改变id不为 one 的所有p元素的背景色为 # bbffaa
$("p:not('#one')")
改变索引值为偶数的 tr元素的背景色为 # bbffaa
$(“tr:even")
改变索引值为大于 3 且为奇数的 p元素的背景色为 # bbffaa
$(“p:gt(3):odd")
改变所有的标题元素的背景色为 # bbffaa
$(":header")
改变当前正在执行动画的所有元素的背景色为 # bbffaa
内容过滤,
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
改变含有文本 ‘di’ 的 p元素的背景色为 # bbffaa
$("p:cotains(di)")
改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 # bbffaa
改变含有 class 为 mini 元素的 p元素的背景色为 # bbffaa
$("p:has(.mini)")
改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa
可见性过滤,
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素
可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 ()和 visible:hidden 之类的元素
属性过滤
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
子元素过滤
nth-child() 选择器详解如下:
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
(3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素
表单对象属性过滤
表单元素选择器