jQuery选择器之过滤选择器

简介: jQuery选择器之过滤选择器
+关注继续查看

过滤选择器


过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,选择器都以一个冒号(:)开头,按照不同的过滤规则,过滤选择器可以分为下面几类:


  1. 基本过滤选择器
  2. 内容过滤选择器
  3. 可见性过滤选择器
  4. 属性过滤选择器
  5. 子元素过滤选择器
  6. 表单对象属性过滤选择器


接下来让我们一起学习一下这几类选择器吧!


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选取所有被选中的元素(选项元素)集合元素


相关文章
|
JavaScript 开发者 索引
jQuery_基础过滤|学习笔记
快速学习 jQuery_基础过滤
193 0
jQuery_基础过滤|学习笔记
|
JavaScript 前端开发 索引
jQuery选择集过滤
选择集过滤就是在选择标签的集合里面过滤自己需要的标签
77 0
|
JavaScript 前端开发 开发者
jQuery 遍历_过滤3|学习笔记
快速学习 jQuery 遍历_过滤3
136 0
jQuery 遍历_过滤3|学习笔记
|
JavaScript 前端开发 开发者
jQuery 遍历_过滤2|学习笔记
快速学习 jQuery 遍历_过滤2
172 0
jQuery 遍历_过滤2|学习笔记
|
JavaScript 开发者 索引
jQuery遍历_过滤1|学习笔记
快速学习 jQuery 遍历_过滤1
183 0
jQuery遍历_过滤1|学习笔记
|
JavaScript 开发者
jQuery_子元素过滤|学习笔记
快速学习 jQuery_子元素过滤
177 0
jQuery_子元素过滤|学习笔记
|
JavaScript 前端开发 开发者
jQuery_内容过滤|学习笔记
快速学习 jQuery_内容过滤
194 0
jQuery_内容过滤|学习笔记
|
JavaScript 前端开发 开发者
jQuery_可见性过滤 jQuery 扩展|学习笔记
快速学习 jQuery_可见性过滤 jQuery 扩展
156 0
jQuery_可见性过滤 jQuery 扩展|学习笔记
|
JavaScript
jquery图片过滤归类应用
在线演示 本地下载
760 0
|
JavaScript
jQuery 遍历|过滤
缩小搜索元素的范围 三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。 其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
846 0