jQuery 选择器

1.层次选择器
下面看一个实例：HTML代码部分
<div>
<div style="display: none;">aa</div>
<div style="display: none;">bb</div>
<div style="display: none;">cc</div>
<div style="display: none;">dd</div>
</div>
<div style="display: none;">ee</div>
<div style="display: none;">ff</div>

var $ta = $('.test :hidden'); //带空格的选择器表示class为test的元素中所有隐藏的元素，很明显结果是第一个div里所有的元素
var $tb = $('.test:hidden'); //不带空格的选择器，表示的是class为test并且是隐藏的元素，这里指的是后两个div以及第一个div中的最后一个子元素
alert($ta.length); //输出为4
alert($tb.length); // 输出为3

1. 基本过滤选择器
选择器 描述 返回
:first 选取第1个元素 单个元素
:last 选取最后一个元素 单个元素
:not(selector) 去除所有与给定选择器匹配的元素 集合元素
:even 选取索引是偶数的所有元素，索引从0开始 集合元素
:odd 选取索引是奇数的所有元素，索引从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 选取每个父元素的最后一个子元素 集合元素
:only-child 如果某个元素是它父元素中惟一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配 集合元素
6. 表单对象属性过滤选择器
表单对象属性过滤选择器主要是对所选择的表单对象进行过滤。
选择器 描述 返回
:enabled 选取所有可用元素 集合元素
:disabled 选取所有不可用元素 集合元素
:checked 选取所有被选中的元素（单选框，复选框） 集合元素
:selected 选取所有被选中的选项元素（下拉列表） 集合元素
过滤选择器的种类众多，而且使用的规则也有一些小差别，大家可以多多尝试来记住其特性。