在用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")：选择所有<p>元素 |
| * |
选择所有元素 |
$("*")：选择页面所有元素 |
| selector1, selector2, selectorN |
将几个选择器用","分隔开再拼成一个选择器字符串, 可以同时选中这几个选择器匹配的内容. |
$("#form1, a, .bgRed") |
2. 层次选择器
| 选择器 |
描述 |
举例 |
| ancestor descendant |
使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input. |
$(".bgRed div") ：选择CSS类为bgRed的元素中的所有<div>元素. |
| parent > child |
选择parent的直接子节点child，child必须包含在parent中并且父类是parent元素. |
$(".myList>li") ：选择CSS类为myList元素中的直接子节点<li>对象. |
| 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. 属性过滤器
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
网友评论