jQuery的选择器(三) 过滤选择器

1. 基本过滤选择器

选择器 描述 返回
:first 选取第1个元素 单个元素
:last 选取最后一个元素 单个元素
:not(selector) 去除所有与给定选择器匹配的元素 集合元素
:even 选取索引是偶数的所有元素,索引从0开始 集合元素
 dd 选取索引是奇数的所有元素,索引从0开始 集合元素
:eq(index) 选取索引等于index的元素(index从0开始) 单个元素
:gt(index) 选取索引大于index的元素(index从0开始) 集合元素
:lt(index) 选取索引小于index的元素(index从1开始) 集合元素
:header 选取所有的标题元素,例如h1,h2,h3等等 集合元素
:animated 选取当前正在执行动画的所有元素 集合元素

 

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的元素 集合元素
[selector1][selector2][selectorN] 用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围 集合元素

5. 子元素过滤选择器
子元素过滤选择器的过滤规则相对于其他的选择器稍微有些复杂,不过没有关系,只要将元素的父元素和子元素区分清楚,那么使用起来也非常简单。

选择器 描述 返回
:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素。(index从1算起) 集合元素
:first-child 选取每个父元素的第1个子元素 集合元素
:last-child 选取每个父元素的最后一个子元素 集合元素
 nly-child 如果某个元素是它父元素中惟一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配 集合元素

6. 表单对象属性过滤选择器
表单对象属性过滤选择器主要是对所选择的表单对象进行过滤。

选择器 描述 返回
:enabled 选取所有可用元素 集合元素
:disabled 选取所有不可用元素 集合元素
:checked 选取所有被选中的元素(单选框,复选框) 集合元素
:selected 选取所有被选中的选项元素(下拉列表) 集合元素

过滤选择器的种类众多,而且使用的规则也有一些小差别,大家可以多多尝试来记住其特性。

时间: 2024-08-02 21:52:56

jQuery的选择器(三) 过滤选择器的相关文章

jquery表单对象属性过滤选择器用法

  本文实例讲述了jquery表单对象属性过滤选择器用法.分享给大家供大家参考.具体分析如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

jquery表单对象属性过滤选择器实例分析_jquery

本文实例讲述了jquery表单对象属性过滤选择器用法.分享给大家供大家参考.具体分析如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

jQuery表单对象属性过滤选择器实例详解_jquery

本文实例讲述了jQuery表单对象属性过滤选择器.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2-11</title> <script src="jquery-1.7.2.min.js" type="t

jquery选择器之层级过滤选择器详解_jquery

复制代码 代码如下: $("ancestor descendant"):选取parent元素后所有的child元素$("parent > child"):选取parent元素后所有的直属child元素,何谓"直属",也就是第一级的意思了$("prev + next"):prev和next是两个同级别的元素. 选中在prev元素后面的next元素$("prev ~ siblings"):选择prev后面

jquery选择器之内容过滤选择器详解_jquery

先写出DOM元素的HTML结构: 复制代码 代码如下: <style type="text/css">    /*高亮显示*/    .highlight{               background-color: gray    }</style> 复制代码 代码如下: <div>John Resign</div><div>George Martin</div><div>Malcom John

jquery选择器之属性过滤选择器详解_jquery

复制代码 代码如下: <style type="text/css">  /*高亮显示*/  .highlight{      background-color: gray  } </style> 复制代码 代码如下: <body>   <div>      <p>Hello</p>   </div>   <div id="test">ID为test的DIV</div

jquery选择器之基本过滤选择器详解_jquery

复制代码 代码如下: <style type="text/css">  /*高亮显示*/  .highlight{      background-color: gray  } </style> 复制代码 代码如下: <body>   <h3>各省市行政区划</h3>   <table border="1" width="50%">    <thead>     

jQuery的内容过滤选择器学习教程_jquery

内容过滤器的过滤规则主要是包含的子元素或文本内容上. $('div:contains("xxx")').css('background', '#ccc'); //选择元素文本节点含有xxx 文本的元素 $('div:empty').css('background', '#ccc'); //选择空元素 $('ul:has(.red)').css('background', '#ccc'); //选择子元素含有class 是red 的元素 $(':parent').css('backgro

jQuery过滤选择器详解_jquery

过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM元素,该选择器都以":"开头 按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器. 基本过滤选择器 基本过滤选择器示例 改变第一个 div元素的背景色为 # bbffaa 改变最后一个 div元素的背景色为 # bbffaa 改变class不为 one的所有 div元素的背景色为 # bbffaa 改变索引值为偶数的 div元素的背景色为 # bbffaa