什么是选择器?
选择器是jQuery的根基，在jQuery中，所有的操作，例如事件处理，遍历DOM和Ajax操作都依赖于选择器。因为只有先选中我们需要操作的元素，才能够进行相应的操作，下面就给大家介绍一下jQuery选择器，后面还有一个实例，帮助大家理解。
一：jQuery选择器简介和优势
1.简介
jQuery中的选择器完全继承了CSS风格。但与CSS不同的是，CSS选择器是找到元素后添加样式，jQuery选择器是找到元素后添加行为。利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。
2.优势
(1)写法简单
$()函数在许多javaScript函数库中都被作为一个选择器函数来使用，在jQuery也是。在jQuery中，$("#ID")用来替代document.getElementById()函数，通过ID获取元素;；$("tagName")用来代替document.getElementsByTagName()函数，通过标签名获取html元素。。
(2)支持CSS1到CSS3选择器
jQuery选择器支持CSS1到CSS2的全部和CSS3的部分选择器，同时也有少量独有的选择器。并且无需考虑浏览器兼容性问题。
(3)完善的处理机制
jQuery在一些问题上的处理是非常不错的，即使用jQuery获取网页中不存在的元素也不会报错。但要注意的是，$()获取的是jQuery对象，因此要检查某个元素在网页上是否存在时，应该获取到元素的长度或者转化为DOM对象来判断。
二：jQuery选择器分类
jQuery选择器分为基本选择器，层次选择器，过滤选择器和表单选择器
1.基本选择器
内容：基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过id,class和标签名等来查找DOM元素，每一个id名称只能使用一次，class允许重复使用。
用法：
| 选择器 | 作用 | 返回值 | 示例 |
|---|---|---|---|
| #id | 根据给定的id匹配一个元素 | 单个元素 | $("#a")选取id="a"的元素 |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(".b")选取所有class="b"的元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 | $("my")选取所有的<my>元素 |
| * | 匹配所有的元素 | 集合元素 | $("*")选取所有的元素 |
| selector,selector, ......selectorN |
将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $(a,b,#c,.my)选取所有的<a>,<b>和拥有id="c"元素下的所有的class为my的元素 |
2.层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素和同辈元素，那就要用到层次选择器。
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| $("a b") | 选取a元素里的所有b(后代)元素 | 集合元素 | $("a b")选取<a> |
| $("a > b") | 选取a元素下的b(子)元素，与$("a b")有区别 | 集合元素 | $("a > b")选取<a>元素下元素名是<b>的子元素 |
| $("a + b") | 选取紧接在a元素后的b元素 | 集合元素 | $("a + b")选取<a>元素的下一个<b>同辈元素 |
| $("a ~ b") | 选取a元素之后的所有<b>元素 | 集合元素 | $("a ~ b")选取<a>元素后面的所有<b>同辈元素 |
在层次选择器中，第一个和第二个选择器比较常用。可以用next()方法替代$("a + b")选择器，用nextAll()方法替代$("a ~ b")选择器。
3.过滤选择器
过滤选择器通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器。
（1）基本过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :first | 选取第一个元素 | 单个元素 | $("a:first")选取所有<a>元素中第一个<a>元素 |
| :last | 选取最后一个元素 | 单个元素 | $("a:last")选取所有<a>元素中最后一个<a>元素 |
| :not(selector) | 去除所有与给定元素匹配的元素 | 集合元素 | $("input:not(.b)")选取所有class不是b的<input>元素 |
| :even | 选取索引是偶数的所有元素(从0开始) | 集合元素 | $("input:even")选取索引是偶数的<input>元素 |
| :odd | 选取索引是奇数的所有元素(从0开始) | 集合元素 | $("input:odd")选取索引是奇数的<input>元素 |
| :eq(index) | 选取索引等于index的元素(从0开始) | 单个元素 | $("input:eq(1)")选取索引等于1的<input>元素 |
| :gt(index) | 选取索引大于index的元素(从0开始) | 集合元素 | $("input:gt(1)")选取索引大于1的<input>元素 |
| :lt(index) | 选取索引小于index的元素(从0开始) | 集合元素 | $("input:lt(1)")选取索引小于1的<input>元素 |
| :header | 选取所有的标题元素 | 集合元素 | $(":header")选取网页中的所有的<h1>,<h2>,<h3>......标题元素 |
| :animated | 选取当前正在执行动画的所有元素 | 集合元素 | $("div:animated")选取正在执行动画的<div>元素 |
| :focus | 选取当前获取焦点的元素 | 集合元素 | $(":focus")选取当前获取焦点的元素 |
(2)内容过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :contains(text) | 选取含有文本内容为"text"的元素 | 集合元素 | $("div:contains('什么')")选取含有文本'什么'的<div>元素 |
| :empty | 选取不包含子元素或者文本的空元素 | 集合元素 | $("div:empty")选取不包含子元素(以及文本元素)的<div>空元素 |
| :has(selector) | 选取含有选择器匹配的元素的元素 | 集合元素 | $("div:has(p)")选取含有<p>元素的<div>元素 |
| :parent | 选取含有子元素或者文本的元素 | 集合元素 | $("div:parent")选取拥有子元素(以及文本元素)的<div>元素 |
(3)可见性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :hidden | 选取所有不可见的元素 | 集合元素 | $(":hidden")选取所有不可见的元素，$("input:hidden")选取所有<input>元素中的不可见的元素 |
| :visible | 选取所有可见的元素 | 集合元素 | $("div:visible")选取所有可见的<div>元素 |
(4)属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| [attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]")选取拥有属性id的元素 |
| [attribute=value] | 选取属性值为value的元素 | 集合元素 | $("div[class=my]")选取属性class为"my"的<div>元素 |
| [attribute!=value] | 选取属性值不等于value的元素 | 集合元素 | $("div[class!=my]")选取属性class不等于"my"的<div>元素(没有属性class的<div>元素也会被选取) |
| [attribute^=value] | 选取属性值以value开始的元素 | 集合元素 | $("div[class^=my]")选取属性class以"my"开始的<div>元素 |
| [attribute$=value] | 选取属性值以value结束的元素 | 集合元素 | $("div[class$=my]")选取属性class以"my"结束的<div>元素 |
| [attribute*=value] | 选取属性值含有value的元素 | 集合元素 | $("div[class*=my]")选取属性class含有"my"的<div>元素 |
| [attribute|=value] | 选取属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符"-")的元素 | 集合元素 | $("div[b!="my"]")选取属性b等于my或以my为前缀(该字符串后跟一个连字符'-')的元素 |
| [attribute~=value] | 选取属性用空格分隔的值中包含一个给定值的元素 | 集合元素 | $("div[class~="my"]")选取属性class用空格分隔的值中包含字符my的元素 |
| [attribute1][attribute2][attribute3] | 用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小范围 | 集合元素 | $("div[class][id][a^='my']")选取拥有属性class。并且属性a以"my"开始的<div>元素 |
(5)子元素过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :nth-child(index/even/odd/equation) | 选取每个父元素下的第index个子元素或者奇偶元素(index从1算起) | 集合元素 | 与:eq()index有所区别，:nth_child将为每一个父元素匹配子元素，并且是从1开始的 |
| :first-child. |
选取每个父元素的第一个子元素 | 集合元素 | :first只返回单个元素，而:first-child选择器将为每个父元素匹配第一个子元素 |
| :last-child | 选取每个父元素的最后一个子元素 | 集合元素 | :last只返回单个元素，而:last-child选择器将为每个父元素匹配第一个子元素 |
| :only-child | 如果某个元素是它父元素中唯一的元素，那么将会匹配，如果父元素中含有其他元素，则不会匹配 | 集合元素 | $("a b:only-child")在<a>中选取是惟一子元素的<b>元素 |
(6)表单对象属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :enabled | 选取所有可用元素 | 集合元素 | $("#my:enabled")选取id为"my"的表单内的所有可用元素 |
| :disabled | 选取所有不可用元素 | 集合元素 | $("#my:disabled")选取id为"my"的表单内的所有不可用元素 |
| :checked | 选取所有被选中的元素(单选框，复选框) | 集合元素 | $("input:checked")选取所有被选中的<input>元素 |
| :selected | 选取所有被选中的选项元素(下拉列表) | 集合元素 | $("select option:selected")选取所有被选中的选项元素 |
4.表单选择器
当然，jQuery还提供了表单选择器，使用户能够更加灵活地操作表单。
| 选择器 | 描述 | 返回 |
|---|---|---|
| :input | 选取所有的<input>,<textarea>,<select>和<button>元素 | 集合元素 |
| :text | 选取所有的单行文本框 | 集合元素 |
| :password | 选取所有的密码框 | 集合元素 |
| :radio | 选取所有的单选框 | 集合元素 |
| :checkbox | 选取所有的多选框 | 集合元素 |
| :submit | 选取所有的提交按钮 | 集合元素 |
| :image | 选取所有的图像按钮 | 集合元素 |
| :reset | 选取所有的重置按钮 | 集合元素 |
| :button | 选取所有的按钮 | 集合元素 |
| :file | 选取所有的上传域 | 集合元素 |
| :hidden | 选取所有不可见元素 | 集合元素 |
选择器基本上就是这么多了，还有一些其他的选择器，这里就不一一介绍了，在下一个文章中，将展示一些选择器的使用和在实际问题中如何使用这些选择器。