从零开始学jQuery（二）：jQuery选择器

在用jQuery进行任何操作之前，我们应该先获得要对其进行操作的DOM对象，选择器就是在帮我们做这件事。

一、什么是选择器？

简单来说，选择器就是一个表示特殊意义的字符串，它能帮助你对元素组或单个元素进行操作。jQuery选择器以$()开头，$()是jQuery()的缩写。

二、选择器的分类

jQuery选择器可以分为以下几类：

• 基础选择器 Basics
• 层次选择器 Hierarchy
• 基本过滤器 Basic Filters
• 内容过滤器 Content Filters
• 可见性过滤器 Visibility Filters
• 属性过滤器 Attribute Filters
• 子元素过滤器 Child Filters
• 表单选择器 Forms
• 表单过滤器 Form Filters
  （不同的地方分类不同，这里我借鉴的是一位大牛前辈张子秋的分法）

1. 基础选择器

选择器	描述	举例
#id	根据元素ID进行选择	$("#form1")：选择ID为form1的元素
.class	根据元素的css类选择	$(".bgRed")：选择所用CSS类为bgRed的元素
element	根据元素的名称选择	$("p")：选择所有 元素
*	选择所有元素	$("*")：选择页面所有元素
selector1, selector2, selectorN	将几个选择器用","分隔开再拼成一个选择器字符串, 可以同时选中这几个选择器匹配的内容.	$("#form1, a, .bgRed")

2. 层次选择器

选择器	描述	举例
ancestor descendant	使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input.	$(".bgRed div") ：选择CSS类为bgRed的元素中的所有 元素.
parent > child	选择parent的直接子节点child，child必须包含在parent中并且父类是parent元素.	$(".myList>li") ：选择CSS类为myList元素中的直接子节点 对象.
prev + next	prev和next是两个同级别的元素. 选中在prev元素后面的next元素.	$("#hibiscus+img")：选在id为hibiscus元素后面的img对象.
prev ~ siblings	选择prev后面的根据siblings过滤的元素 注:siblings是过滤器	$("#someDiv~[title]")：选择id为someDiv的对象后面所有带有title属性的元素

3. 基本过滤器

选择器	描述	举例
:first	匹配找到的第一个元素	$("tr:first")：查找表格的第一行
:last	匹配找到的最后一个元素	$("tr:last")：查找表格的最后一行
:not(selector)	去除所有与给定选择器匹配的元素	$("input:not(:checked)")：查找所有未选中的 input 元素
:even	匹配所有索引值为偶数的元素，从 0 开始计数	$("tr:even")：查找表格的1、3、5...行
:odd	匹配所有索引值为奇数的元素，从 0 开始计数	$("tr:odd")：查找表格的2、4、6行
:eq(index)	匹配一个给定索引值的元素（注:index从 0 开始计数）	$("tr:eq(1)")：查找第二行
:gt(index)	匹配所有大于给定索引值的元素（注:index从 0 开始计数）	$("tr:gt(0)")：查找行数大于1的行，即索引值大于0
:lt(index)	选择结果集中索引小于 N 的 elements（注:index从 0 开始计数）	$("tr:lt(2)")：查找第一第二行，即索引值是0和1，也就是比2小
:header	选择所有h1,h2,h3一类的header标签.	$(":header").css("background", "#EEE")：给页面内所有标题加上背景色
:animated	匹配所有正在执行动画效果的元素	对不在执行动画效果的元素执行一个动画特效：$("div:not(:animated)").animate({ left: "+=20" }, 1000);

4. 内容过滤器

选择器	描述	举例
:contains(text)	匹配包含给定文本的元素	$("div:contains('John')")：查找所有包含 "John" 的 div 元素
:empty	匹配所有不包含子元素或者文本的空元素	$("td:empty")：查找所有不包含子元素或者文本的空元素
:has(selector)	匹配含有选择器所匹配的元素的元素	$("div:has(p)").addClass("test")：给所有包含 p 元素的 div 元素添加一个 text 类
:parent	匹配含有子元素或者文本的元素	$("td:parent")：查找所有含有子元素或者文本的 td 元素

5. 可见性过滤器

选择器	描述	举例
:hidden	匹配所有的不可见元素	$("tr:hidden")：查找所有不可见的 tr 元素
:visible	匹配所有的可见元素	$("tr:visible")：查找所有可见的 tr 元素

6. 属性过滤器

选择器	描述	举例
[attribute]	匹配包含给定属性的元素	$("div[id]")：查找所有含有 id 属性的 div 元素
[attribute=value]	匹配给定的属性是某个特定值的元素	$("input[name='newsletter']")：查找所有 name 属性是 newsletter 的 input 元素
[attribute!=value]	匹配给定的属性是不等于某个特定值的元素	$("input[name!='newsletter']")：查找所有 name 属性不是 newsletter 的 input 元素
[attribute^=value]	匹配给定的属性是以某些值开始的元素	$("input[name^='news']")
[attribute$=value]	匹配给定的属性是以某些值结尾的元素	$("input[name$='letter']")：查找所有 name 以 'letter' 结尾的 input 元素
[attribute*=value]	匹配给定的属性是包含某些值的元素	$("input[name*='man']"：查找所有 name 包含 'man' 的 input 元素)
[attributeFilter1][attributeFilter2][attributeFilterN]	复合属性选择器，需要同时满足多个条件时使用。	$("input[id][name$='man']")：找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的元素

7. 子元素过滤器

选择器	描述	举例
:nth-child()	匹配所有是其父元素下的第N个子元素的元素	$("ul li:nth-child(2)")：在每个 ul 中查找第 2 个li
:first-child	匹配所有父元素的第一个子元素	$("ul li:first-child")：在每个 ul 中查找第一个 li
:last-child	匹配所有父元素的最后一个子元素	$("ul li:last-child")：在每个 ul 中查找最后一个 li
:only-child	如果某个元素是其父元素中唯一的子元素，那将会被匹配	$("ul li:only-child")：在 ul 中查找是唯一子元素的 li

8. 表单选择器

选择器	描述	举例
:input	匹配所有 input, textarea, select 和 button 元素	$(":input")：查找所有的input元素
:text	$(":text")：匹配所有的文本框	查找所有文本框
:password	匹配所有密码框	$(":password")：查找所有密码框
:radio	匹配所有单选按钮	$(":radio")：查找所有单选按钮
:checkbox	匹配所有复选框	$(":checkbox")：查找所有复选框
:submit	匹配所有提交按钮	$(":submit")：查找所有提交按钮
:image	匹配所有图像域	$(":image")：匹配所有图像域
:reset	匹配所有重置按钮	$(":reset")：查找所有重置按扭
:button	匹配所有按钮	$(":button")：查找所有按钮
:file	匹配所有文件域	$(":file")：查找所有文件域

9. 表单过滤器

选择器	描述	举例
:enabled	匹配所有可用元素	$("input:enabled")：查找所有可用的input元素
:disabled	匹配所有不可用元素	$("input:disabled")：查找所有不可用的input元素
:checked	匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)	$("input:checked")：查找所有选中的复选框元素
:selected	匹配所有选中的option元素	$("select option:selected")：查找所有选中的选项元素

三、注意事项

1. 用对选择器

在今天的内容中，我们认识了很多选择器，不难发现，许多选择器可以帮助我们实现同样的功能，那我们在使用的时候该如何选择呢？事实上，不同选择器的性能是不一样的，记住：
1）最快的选择器：id选择器和元素标签选择器
遇到id选择器和元素标签选择器时，jQuery内部会自动调用浏览器的原生方法（比如getElementById()），所以它们的执行速度快。
2）较慢的选择器：class选择器
$('.className')的性能，取决于不同的浏览器。例如IE5-IE8都没有getElementByClassName()这个方法，所以这个选择器在IE中会相当慢。
3）最慢的选择器：伪类选择器和属性选择器
因为浏览器没有针对它们的原生方法，所以这两种选择器是比较慢的。但也有一些浏览器版本增加了querySelector()和querySelectorAll()方法，使得这类选择器的性能有所提升。

2. 做好缓存

在代码中反复选择一个网页元素是很耗内存的，使用选择器的次数应该越少越好，因此，要尽可能把选中的结果存到变量中以便之后使用。例如：

// 糟糕的写法：
jQuery('#top').find('p.classA');
jQuery('#top').find('p.classB');

// 改进：
var cached = jQuery('#top');
cached.find('p.classA');
cached.find('p.classB');

3. 使用链式写法

采用链式写法时，jQuery自动缓存每一步的结果，因此比非链式写法要快。

---

是不是觉得很难一下子记住这么多选择器？其实只要牢记几个基础选择器就行，其他的可以在使用的过程中逐渐记忆。

---

参考：
http://api.jquery.com/
http://www.cnblogs.com/zhangziqiu/archive/2009/05/03/jQuery-Learn-2.html
https://www.jquery123.com/](https://www.jquery123.com/
http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html