JQuery中的选择器
选择器是JQuery的根基，在JQuery中，对事件处理，遍历DOM以及Ajax操作都依赖于选择器。熟练的使用选择器就，不仅能够简化代码，还能达到事半功倍的效果。以前一直在使用，但是对其中的知识不是很了解，最近花时间整理了一下。
在介绍jQuery选择器之前，我们先了解一下css，css使得网页结构和表现样式完全分离。利用css选择器能够轻松的对某个元素添加样式而不改动html结构，只需要添加不同的CSS规则就行。要使用摸个样式应用于特定的html元素，首先要找到该元素，在CSS中，css选择器能够实现该功能，css选择器也是学习css的基础，灵活性很大。常用的CSS选择器如下
| 选择器 | 语法 | 描述 | 实例 |
| 标签选择器 |
E{css规则} |
以文档元素作为选择符 |
td{
font—size：16px；
width:200px;
}
a{
text-decoration:none
}
|
| ID选择器 |
#ID{css规则} |
以元素的唯一标识ID作为选择符 |
#IDName{
font-size:16px;
width:200px;
}
|
| 类选择器 | E.ClassName{css规则} | 以文档元素的Class作为选择符 |
div.note { font-size:16px } .td{ font-size:16px }
|
| 群组选择器 | E1,E2,E3{css规则} | 多个选择符应用同样的样式 |
td,div.a,td{ font-size:16px }
|
| 后代选择器 | E F{css规则} | E元素的任意后代元素F |
#div table{ font-size:16px }
|
| 通配符选择器 | *{css规则} | 以文档的所有元素作为选择符 |
*{ font-size:16px; }
|
几乎所有的浏览器都支持上面的这些常用选择器。此外css还有一些伪类选择器（E:Pseudo-Elements{css规则}），子选择器（E>F{css规则}）、临近选择器（E+F{css规则}）、和属性选择器（E[attr]{css规则}）。但是并非所有的主流浏览器都支持这些选择器。了解完这些基础知识后咱们先来看一个例子,代码如下：
<p style="color:red;font-size:30px">一些文本</p>
上面代码是将<p>元素里面的文本颜色设置为红色，字体大小设置为30px。像这种把CSS和html代码混在一起是非常不妥的，因为背离了表现和内容相分离的原则建议使用一下代码：
<style> .p1{ color:red; font-size:30px; } </style> <p class="p1">一些文本</p>
先把样式写在<style>标签里面，然后用class属性将元素和样式连接起来，class作为连接样式和网页之间的纽带，这样的写法不仅容易阅读和理解，而且要改变一些样式的时候，只要在<style>标签中改变样式即可。例如要使所有class为p1的<p>元素的字体加粗，直接在<style>里编写，而不需要再网页中去寻找所有的元素再逐个添加了，代码如下：
<style> .p1{ color:red; font-size:30px; font-weight:bold; } </style> <p class="p1">一些文本</p>
把CSS用用到网页中有三种形式，即行间样式表，内部样式表和外部样式表。上例中使用的是内部样式表，缺点是不能被多个页面重复使用
jQuery中的选择器完全继承了CSS的风格。主要有以下几个优势：
1、简洁的写法$()函数在很多JS类库中都被作为一个选择器使用
2、支持CSS1、CSS2的全部和CSS3的部分选择器
3、完善的处理机制
jQuery的选择器只要分为基本选择器、层次选择器、过滤选择器、表单选择器。下面分别进行介绍这几种选择器：
一、基本选择器：
| 选择器 | 描述 | 返回 | 示例 |
| #Id | 根据指定的Id匹配一个元素 | 单个元素 | $（"#one"）选取id为one的元素 |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(".two")选取所有class为two的元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 | $("p")选取素有的<p>元素 |
| * | 匹配所有元素 | 集合元素 | $("*")选取所有的元素 |
| s1,s2,s3...sn | 将每一个选择器匹配的元素合并后一起返回 | 集合元素 | $("div,span,p.one")选取所有div，span和class为one的p元素 |
二、层次选择器：如果想通过DOM元素之间的层次关系来获取指定的元素，层次选择器是一个不错的选择：
| 选择器 | 描述 | 返回 | 示例 |
| $("ancestor descendant") | 选取ancestor元素里面的所有descendant（后代）元素 | 集合元素 | $("div span")选取div里面的所有span元素 |
| $("parent>child") | 选取parent元素下的child（子元素）跟上面那个有区别，不是后代元素 | 集合元素 | $(div>span)选取div元素下名是soan的子元素 |
| $("pre+next") | 选取紧接着pre元素后的next元素 | 集合元素 | $(".one+div")选取class为one的下一个div元素 |
| $("pre~siblings") | 选取pre元素之后的所有siblings元素 | 集合元素 | $（"#two~div"）选取Id为two的元素后的所有div兄弟与元素 |
在层次选择器中，第一个个第二个比较常用。因为后面两个在jquery里可以用更加简单的方法来代替，分别用next（）和nextAll（）方法来代替。
三、过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素。过滤选择器与CSS中的伪类选择器语法相同，即通过一个冒号开头（：）按照不同的规则，可以分为基本过滤、内容过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
（1）基本过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :first | 选取第一个元素 | 单个元素 | $("div:first")选取所有div元素中的第一个div元素 |
| :last | 选取最后一个元素 | 单个元素 | $("div:last")选取所有div元素中的最后一个div元素 |
| :not(selector) | 去除所有给定选择器匹配的元素 | 集合元素 | $("input:not(.one)")选取class不是one的input元素 |
| :even | 选取索引是偶数的所有元素（索引从0开始） | 集合元素 | $("table tr:even")选取表格中的偶数行 |
| :odd | 选取索引是奇数的所有元素（索引从0开始） | 集合元素 | $("table tr:even")选取表格中的奇数行 |
| :eq(index) | 选取索引等于index的元素（索引从0开始） | 单个元素 | $("td :eq(1)")选取索引等于1的td元素 |
| :gt(index) | 选取索引大于index的元素（索引从0开始） | 集合元素 | $("td :gt(1)")选取索引大于1的td元素 |
| :lt(index) | 选取索引小于index的元素（索引从0开始） | 集合元素 | $("td :lt(1)")选取索引小于1的td元素 |
| :header | 选取所有的标题元素,如h1，h2，h3等 | 集合元素 | $(":header")选取网页中所有的<h1>,<h1>,<h3>...... |
| :animated | 选取所有当前正在执行动画的元素 | 集合元素 | $("div:animated")选取正在执行动画的div元素 |
（2）内容过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :contains(text) | 选取含有文本内容“text”的元素 | 集合元素 | $("div:contains('www')")选取含有文本“www”的div元素 |
| :empty | 选取不包含子元素或者文本为空的元素 | 集合元素 |
$("div:empty")选取不包含子元素或者文本元素的div元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $("div:has(p)")选取含有p元素的div元素 |
| :parent | 选取含有子元素或者文本的元素 | 集合元素 | $("div:parent")选取拥有子元素的或者文本元素的div元素 |
（3）可见性选择器
可见性过滤选择器是根据元素的可见不可见状态来选择相应的元素其中:hidden为选择所有不可见元素，:visible为选取所有可见元素。
(4)属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| [attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]")选取拥有属性id的div元素 |
| [attribute=value] | 选取属性值为value的元素 | 集合元素 | $("div[id=one]")选取属性id=one的div元素 |
| [attribute!=value] | 选取属性值不等于value的元素 | 集合元素 | $("div[id!=one]")选取属性id!=one的div元素 |
| [attribute^=value] | 选取属性值以value开头的元素 | 集合元素 | $("div[id^=one]")选取属性id以one开头的div元素 |
| [attribute$=value] | 选取属性值以value结束的元素 | 集合元素 | $("div[id$=one]")选取属性id以one结束的div元素 |
| [attribute*=value] | 选取属性值含有value的元素 | 集合元素 | $("div[id*=one]")选取属性id含有one的div元素 |
| [s1],[s2]....[sn] | 用属性选择器合并成一个复合的属性选择器，满足多个条件， | 集合元素 | $("div[id][name!='one']")选取含有属性id的元素并且属性name不等于one |
（5）子元素过滤选择器
子元素选择器相对 与其他的选择器比较复杂，详细介绍如下表：
| 选择器 | 描述 | 返回 | 示例 |
| :nth-child(index/even/odd/eq) | 选取每个父元素下的第index个与萨努或者就元素等 | 集合元素 | :eq(index)只适配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的索引是从1开始的。 |
| :first-child | 选取每一个父元素的第一个元素 | 集合元素 |
:first只返回一个元素，而first-child选取每个父元素匹配到的第一个子元素。 例如：$("ul li:first-child")选取每一个ul中的第一个li元素 |
| :last-child | 选取每一个父元素的最后一个元素 | 集合元素 |
:last只返回一个元素，而last-child选取每个父元素匹配到的最后一个子元素。 例如：$("ul li:last-child")选取每一个ul中的最后一个li元素 |
| :only-child |
如果某个元素是他父元素的唯一的一个子元素，将会被匹配 如果父元素中海油其他的元素，将不会被匹配 |
集合元素 | $("ul li:only-child")在ul中选取唯一子元素的li元素 |
: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开始
（6）表单对象属性过滤选择器：
| 选择器 | 描述 | 返回 | 示例 |
| :enable | 选取所有可用元素 | 集合元素 | $("#form1:enable")选取id为form1表单中所有可用元素 |
| :disabled | 选取所有不可用元素 | 集合元素 | $("#form1:disabled")选取id为form1表单中所有不可用元素 |
| :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")选取所有上传域 |
| :hiden | 选取所有不可见元素 | 集合元素 | $(":hiden")选取所有不可见元素 |
致此，JQuery中的选择器基本已经介绍完了，实际运用中还需要大家多练习，熟记。这些都是比较基础的。写的有什么不对的地方请大家多多提出宝贵意见，，
