详解强大的jQuery选择器之过滤选择器、表单选择器
前言
上一篇文章( 详解强大的jQuery选择器之基本选择器、层次选择器 )介绍了jQuery四类选择器中的基本选择器、层次选择器，本文将介绍剩下的两种选择器：过滤选择器、表单选择器。
本文仍使用上一篇文章中的示例页面。
一、过滤选择器过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同。
按照不同的过滤规则，过滤选择器可以分为以下几种：
1、基本过滤选择器
2、内容过滤选择器
3、可见性过滤选择器
4、属性过滤选择器
5、子元素过滤选择器
6、表单对象属性过滤选择器
下面就对这几种过滤选择器分别加以介绍。
1.1基本过滤选择器基本过滤选择器是过滤选择器中用的最多的一种，它的过滤规则主要体现在元素的位置(索引)上及一些特定的元素。
基本过滤选择器规则：
基本过滤选择器
选 择 器 描 述 返 回 示 例 :first 选取第1个元素 单个元素 $("div:first")选取所有 <div>元素中第一个<div>元素 :last 选取最后1个元素 单个元素 $("div:last")选取所有 <div>元素
中最后一个<div>元素 :not(selector) 去除所有与给定选择器
匹配的元素 集合元素 $("input:not(.myClass)")选取class不是
myClass的<input>元素 :even 选取索引(从0开始)是偶数
的所有元素 集合元素 $("input:even")选取索引是偶数的
<input>元素 :odd 选取索引(从0开始)是奇数
的所有元素 集合元素 $("input:odd")选取索引是奇数的
<input>元素 :eq(index) 选取索引(从0开始)等于
index的元素 单个元素 $("input:eq(1)")选取索引等于1的
<input>元素 :gt(index) 选取索引(从0开始)大于
index的元素 集合元素 $("input:gt(1)")选取索引大于1的
<input>元素 :lt(index) 选取索引(从0开始)小于
index的元素 集合元素 $("input:lt(1)")选取索引小于1的
<input>元素 :header 选取所有的标题元素，即
<h1>到<h6> 集合元素 $(":header")选取页面中所有的标题元素 :animated 选取当前正在执行动画的
所有元素 集合元素 $("div:animated")选取当前正在执行动画
的<div>元素
示例：
1.2内容过滤选择器内容过滤选择器的过滤规则主要体现在它所含的子元素或文本内容上。
内容过滤选择器规则：
内容过滤选择器
选 择 器 描 述 返 回 示 例 :contains(text) 选取含有文本内容为 text 的元素 集合元素 $("div:contains('test')")选取含有文本内容为 test 的<div>元素 :empty 选取不包含子元素或文本的空元素 集合元素 $("div:empty")选取不包含子元素或文本
的空<div>元素 :has(selector) 选取含有给定选择器
匹配的元素的元素 集合元素 $("div:has(.myClass)")选取含有class为
myClass的元素的<div>元素 :parent 选取含有子元素或文本的元素 集合元素 $("div:parent")选取含有子元素或文本的
<div>元素
示例：
1.3可见性过滤选择器可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。
可见性过滤选择器规则：
可见性过滤选择器
选 择 器 描 述 返 回 示 例 :hidden 选取所有不可见的元素 集合元素 $("div:hidden")选取所有不可见的<div>元素 :visible 选取所有不可见的元素 集合元素 $("div:visible")选取所有可见的<div>元素示例：
1.4属性过滤选择器属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
属性过滤选择器规则：
属性过滤选择器
选 择 器 描 述 返 回 示 例 [attribute] 选取拥有此属性的元素 集合元素 $("div[id]")选取拥有属性id的元素 [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] 选取属性的值以value结束的元素 集合元素 $("div[title$=test]")选取属性 title 以
test 结束的<div>元素 [attribute*=value] 选取属性的值含有value的元素 集合元素 $("div[title*=test]")选取属性 title 含
有 test 的<div>元素 [selector1][selector2]
...[selectorN] 选取匹配以上所有属性
选择器的元素 集合元素 $("div[id][title*=test]")选取拥有属性id，
且属性 title 含有 test 的<div>元素
示例：
1.5子元素过滤选择器子元素过滤选择器的过滤规则是通过元素的父子关系来获取相应的元素。
子元素过滤选择器规则：
子元素过滤选择器
选 择 器 描 述 返 回 示 例:nth-child(index/
even/odd/equation)
选取每个父元素下的第index(索引值为奇数/
索引值为偶数/索引值等于某个表达式)个子元
素，index从1开始
集合元素 $("div:nth-child(1)")选取每个<div>中第一个子元素 :first-child 选取每个父元素下的第1个子元素 集合元素 $("div :first-child")选取每个<div>下第一个子元素 :last-child 选取每个父元素下的最后1个子元素 集合元素 $("div :last-child")选取每个<div>下最后一个子元素 :only-child 选取只有唯一子元素的元素的子元素 集合元素 $("div :only-child")选择只有一个子元素的<div>元素这里值得一提的是:nth-child()，这个选择器的详细功能如下：
1、nth-child(even) 能选取每个父元素下的索引值是偶数的元素
2、nth-child(odd) 能选取每个父元素下的索引值是奇数的元素
3、nth-child(2) 能选取每个父元素下的索引值等于2的元素
4、nth-child(3n) 能选取每个父元素下的索引值等于3的倍数的元素，n从0开始
5、nth-child(3n+1) 能选取每个父元素下的索引值等于 (3n+1) 的的元素，n从0开始
示例：
1.6表单对象属性过滤选择器此选择器主要是对所选择的表单元素进行过滤。
表单对象属性过滤选择器规则：
表单对象属性过滤选择器
选 择 器 描 述 返 回 示 例 :enabled 选取所有可用元素 集合元素 $("body:enabled")选取页面内所有可用元素 :disabled 选取所有不可用元素 集合元素 $("body:disabled")选取页面内所有不可用元素 :checked 选取所有被选中的元素(单选框、复选框) 集合元素 $("input:checked")选取所有被选中的<input>元素 :selected 选取所有被选中的选项元素(下拉列表) 集合元素 $("select:selected")选取所有被选中的选项元素示例：
二、表单选择器顾名思义，表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的。
表单选择器规则：
表单选择器
选 择 器 描 述 返 回 示 例 :input 选取所有的<input>、<textarea>、<select>和<button>元素 集合元素 $(":input")选取所有的<input>、<textarea>、
<select>和<button>元素 :text 选取所有的单行文本框 集合元素 $(":text")选取所有的单行文本框 :password 选取所有的密码框 集合元素 $(":password")选取所有的密码框 :radio 选取所有的单选框 集合元素 $(":radio")选取所有的单选框 :checkbox 选取所有的多选框 集合元素 $(":checkbox")选取所有的多选框 :submit 选取所有的提交按钮 集合元素 $(":submit")选取所有的提交按钮 :image 选取所有的图像按钮 集合元素 $(":image")选取所有的图像按钮 :reset 选取所有的重置按钮 集合元素 $(":reset")选取所有的重置按钮 :button 选取所有的按钮 集合元素 $(":button")选取所有的按钮 :file 选取所有的上传按钮 集合元素 $(":file")选取所有的上传按钮 :hidden 选取所有的不可见元素 集合元素 $(":hidden")选取所有的不可见元素
示例：
小结本文主要介绍了jQuery选择器中的过滤选择器和表单选择器，并对每种类型的选择器给出了示例代码，希望能对大家有所帮助。本人也是jQuery的初学者，欢迎大家拍砖。
参考书籍：《锋利的jQuery》(人民邮电出版社)
作者： 天行健，自强不息
出处： http://artwl.cnblogs.com
本文首发博客园，版权归作者跟博客园共有。
转载必须保留本段声明，并在页面显著位置给出本文链接，否则保留追究法律责任的权利。
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于详解强大的jQuery选择器之过滤选择器、表单选择器的详细内容...