jQuery选择器之过滤选择器

为什么80%的码农都做不了架构师？>>>   

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，及选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

1. 基本过滤选择器

   
   

   选择器	描述	返回	示例
   :first	选取第一个元素	单个元素	$("div:first")选取所有<div> 元素中第一个<div>元素
   :last	选取最后一个元素	单个元素	$("div:last")选取所有<div> 元素中最后一个<div>元素
   :not	去除所有与给定选择器匹配的元素	集合元素	$("input:not(.myclass)")选取class 不是myclass的<input>元素
   :even	选取索引是偶数的所有元素，索引从0开始	集合元素	$("input:even")选取索引是 偶数的<input>元素
   :odd	选取索引是奇数的所有元素，索引从0开始	集合元素	$("input:odd")选取索引是 奇数的<input>元素

   选择器	描述	返回	示例
   :eq(index)	选取索引等于index的元素（index从0开始）	单个元素	$("input:eq(1)")选取索引 等于1的<input>元素
   :gt(index)	选取索引大于index的元素（index从0开始）	集合元素	$("input:gt(1)")选取索引 大于1的<input>元素(大于1， 但不包括1)
   :lt(index)	选取索引小于index的元素（index从0开始）	集合元素	$("input:lt(1)")选取索引 小于1的<input>元素(小于1， 但不包括1)
   :header	选取所有的标题元素，例如h1,h2,h3等	集合元素	$(":header")选取网页中 所有的<h1>,<h2>,<h3>...
   :animated	选取当前正在执行动画的所有元素	集合元素	$("div:animated")选取 正在执行动画的<div>元素
   :focus	选取当前获取焦点的元素	集合元素	$(":focus")选取当前获取焦 点的元素

2. 内容过滤选择器

   选择器	描述	返回	示例
   :contains(text)	选取含有文本内容为“text”的元素	集合元素	$("div:contains('我')")选取含有 文本'我'的<div>元素
   :empty	选取不包含子元素或者文本的空元素	集合元素	$("div:empty")选取不包含子元素 （包括文本元素）的<div>空元素
   :parent	选取含有子元素或者文本的元素	集合元素	$("div:parent")选取拥有子元素 （包括文本元素）
   :has(selector)	选取含有选择器所匹配的元素的元素	集合元素	$("div:has(p)")选取含有<p>元素 的<div>元素

3. 可见性过滤选择器

   可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

   选择器	描述	返回	示例
   :hidden	选取所有不可见的元素	集合元素	$(":hidden")选取所有不可见的元素。 包括<input type="hidden"/>,<div style="display:none;"> 和<div style="visibility:hidden;">等元素。 如果只想选取<input>元素，可以使用$("input:hidden")
   :visible	选取所有可见的元素	集合元素	$("div:visible")选取所有可见的<div>元素

4. 属性过滤选择器

   属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

   选择器	描述	返回	示例
   [attribute]	选取拥有此属性的元素	集合元素	$("div[id]")选取拥有属性 id的元素
   [attribute=value]	选取属性的值为value的元素	集合元素	$("div[title=test]")选取属性 title为"test"的<div>
   [attribute!=value]	选取属性的值不等于value的元素	集合元素	$("div[title!=test]")选取属性 title不等于"test"的<div>元素 （注意：没有属性title的<div> 元素也会被选取）
   [attribute^=value]	选取属性的值以value开始的元素	集合元素	$("div[title^=test]")选取属性 title以"test"开始的<div>元素
   [attribute$=value]	选取属性的值以value结束的元素	集合元素	$("div[title$=test]")选取属性 title以"test"结束的<div>元素
   [attribute*=value]	选取属性的值含有value的元素	集合元素	$("div[title*=test]")选取属性 title含有"test"的<div>元素
   [attribute|=value]	选取属性等于给定字符串或以该字符串 为前缀(该字符串后跟一个连字符"-")的元素	集合元素	$("div[title|='en']")选取属性 title等于en或以en为前缀 （该字符串后跟一个连字符'-'） 的元素
   [attribute~=value]	选取属性用空格分隔的值中包含一个 给定值的元素	集合元素	$("div[title~='uk']")选取属性 title用空格分割的值中包含字 符串uk的元素
   [attribute1][attribute2][attributeN]	用属性选择器合并成一个复合属性选择器， 满足多个条件。每选择一次，缩小一次范围	集合元素	$("div[id][title$='test']")选取 拥有属性id，并且 属性title以"test"结束的<div>元素

5. 子元素过滤选择器

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

   选择器	描述	返回	示例
   :nth-child(index/even/odd/equation)	选取每个父元素下的第index个子 元素或者奇偶元素。(index从1算起)	集合元素	:eq(index)只匹配一个元素， 而:nth-child将为每一个父元 素匹配子元素，并且:nth-child(index) 的index是从1开始的，而:eq(index)是 从0算起的。
   :first-child	选取每个父元素的第一个子元素	集合元素	:first只返回单个元素，而:first-child 选择符将为每个父元素匹配第一个子 元素。例如$("ul li:first-child")选取 每个<ul>中第一个<li>元素
   :last-child	选取每个父元素的最后一个子元素	集合元素	同样，:last只返回单个元素， 而:last-child选择符将为每个 父元素匹配最后一个子元素。 例如$("ul li:last-child")选择每个<ul> 中最后一个<li>元素
   :only-child	如果某个元素是它父元素中唯一的子 元素，那么将会被匹配。如果父元素 中含有其他元素，则不会被匹配	集合元素	$("ul li:only-child")在<ul>中选取是 唯一子元素的<li>元素

   :nth-child()选取器是很常用的子元素过滤选择器，详细功能如下：

   （1）:nth-child(even)能选取每个父元素下的索引值是偶数的元素

   （2）:nth-child(odd)能选取每个父元素下索引值是奇数的元素

   （3）:nth-child(2)能选取每个父元素下的索引值等于2的元素

   （4）:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素，(n从1开始)

   （5）:nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素。（n从1开始）

6. 表单属性过滤选择器

   此选择器主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。

   选择器	描述	返回	示例
   :enabled	选取所有可用的元素	集合元素	$("#form1 :enabled")选取id为"form1"的表单内所有可用元素
   :disabled	选取所有不可用的元素	集合元素	$("#form1 :disabled")选取id为"form1"的表单内所有不可用元素
   :checked	选取所有被选中的元素(单选框，复选框)	集合元素	$("input:checked")选取所有被选中的<input>元素
   :selected	选取所有被选中的选项元素(下拉列表)	集合元素	$("select option:selected")选取所有被选中的选项元素

转载于:https://my.oschina.net/935572630/blog/381035