小结：
主要介绍了jQuery中各种类型的选择器，选择器是行为与文档之间连接的纽带，并讲解了选择器中的一些注意事项。
- 了解jQuery选择器
要将某个样式应用于特定HTML元素，需要用到CSS选择器找到该元素。同样，要将某种行为应用到特定的DOM元素,需要用到jQuery选择器找到该元素。
- jQuery选择器优势
①简洁的写法
②支持CSS1和CSS2全部和CSS3部分选择器，并有少量独有的选择器
③完善的处理机制，不仅简洁而且能避免某些错误。
比如：
Document.getElementById(“tt”),如果网页中没有id为tt的元素就会报错，但是使用$(“#tt”)则永远不会报错。因此判断某个元素在网页中是否存在时，可以通过取到元素长度来判断。
If($(“#tt”).length>0){
//do something
}
或
If($(“#tt”)[0]){
//do something
}
或
If($(Document.getElementById(“tt”)){
//do something
}
1. jQuery选择器分类
jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。
1. 基本选择器
①Id选择器（#id）：eg: $(“#text”) 选取id为test的元素
②类选择器（.class）eg: $(“.test”) 选取所有class为test的元素
③元素选择器（element） eg: $(“p”) 选取所有p元素
④* 匹配所有元素 eg: $(“*”)
⑤selector1,selector2,selector3,selectorN 将每一个选择器匹配到的元素合并后一起返回 eg: $(“div,span,p.myClass”) 选取所有div，span标签以及所有class为myClass的p标签的一组元素。
1. 层次选择器
通过DOM之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等。
①$(“ancestor descendant”) 选取ancestor 元素里所有descendant（后代）元素
eg: $(“div span”)选取<div>里所有<span>元素
②$(“parent>child”) 选取parent元素下的子元素（与第一个有区别，子元素和后代元素）
eg: $(“div> span”)选取<div>里所有元素名是<span>的子元素
③$(“prev+next”) 选取紧跟在prev元素后面的next元素
eg: $(“.one+ span”)选取紧跟在class为one的元素后面<span>同辈元素
注意：这个因为可以用更简单的方法代替，所以使用几率较少。$(.one+div)=$(“.one”).next(“div”)
④$(“pre~siblings”) 选取prev元素后面的所有siblings元素
eg: $(“.one~ span”)选取在class为one的元素后面所有<span>同辈元素
注意：此选择器可用nextAll()代替
//选取#prev之后的所有同辈div元素
$(“#prev~ div”).css(“background”,”bbffaa”);
//同上
$(“#prev”).nextAll(“div”).css(“background”,”bbffaa”);
//选取#prev的所有同辈div元素，无论前后位置
$(“#prev”).siblings(“div”).css(“background”,”bbffaa”);
1. 过滤选择器
主要是通过特定的过滤规则来筛选出所需的DOM元素，与CSS中的伪类选择器语法相同。按照不同的过滤规则可分为：基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤。
①基本过滤选择器
:first eg:$(“div:first”) 选取所有div元素中第一个div元素
:last eg:$(“div:last”) 选取所有div元素中最后一个div元素
:not(selector) eg:$(“input:not(.myClass)”) 选取class不是myClass的input元素
:even eg:$(“div:even”) 选取索引是偶数的div元素，索引从0开始
:odd eg:$(“div:odd”) 选取索引是奇数的div元素，索引从0开始
:eq(index) eg:$(“div:eq(1)”) 选取索引等于1的div元素
:gt(index) eg:$(“div:gt(1)”) 选取索引大于1的div元素
:lt(index) eg:$(“div:lt(1)”) 选取索引小于1的div元素
:header eg:$(“:header”) 选取所有网页中的h1,h2,h3
:animated eg:$(“div:animated”) 选取正在执行动画的div元素
:focus eg:$(“:focus”) 选取当前正在获取焦点的元素
②内容过滤选择器：体现在他所包含的子元素或文本内容上
:contains(text) eg:$(“div:contains(‘我’)”) 选取含有文本内容为”我”的div元素
:empty eg:$(“div:empty”) 选取不包含子元素（包括文本元素）的div空元素
:has(selector) eg:$(“div:has(p)”) 选取含有p元素的div元素
:parent eg:$(“div:parent”) 选取拥有子元素（包括文本元素）的div元素
③可见性过滤选择器：根据元素的课件和不可见装填来选择相应的元素
:hidden eg:$(“:hidden”) 选取所有不可见的元素。包括<input type=”hidden”/>、<div style=”display:none;”>和<div style=”visibility:hidden;”>等元素，如果只是想选取input则可使用$(“input:hidden”)
:visible eg:$(“div:visible”) 选取所有可见的div元素
④属性过滤选择器：
[attribute] eg:$(“div[id]”) 选取拥有属性id的div元素
[attribute=value] eg:$(“div[title=test]”) 选取title属性为test的div元素
[attribute!=value] eg:$(“div[title!=test]”) 选取title属性不为test的div元素或者没有title属性的div元素
[attribute^=value] eg:$(“div[title^=test]”) 选取title属性以test开始的div元素
[attribute$=value] eg:$(“div[title$=test]”) 选取title属性以test结束的div元素
[attribute*=value] eg:$(“div[title*=test]”) 选取title属性含有test的div元素
[attribute|=value] eg:$(“div[title|=test]”) 选取title属性等于test或者以test为前缀（后跟一个连字符”-”）的div元素
[attribute~=value] eg:$(“div[title~=test]”) 选取title属性用空格分隔的值中包含字符test的div元素
[attribute1][attribute2][attributeN] eg:$(“div[id][title$test]”) 选取拥有属性id并且属性title以test结束的div元素
⑤子元素过滤选择器(注意与普通过滤器的区别)：
:nth-child(index/even/odd/equation) eg: :eq(index)只匹配一个元素，index从0开始，而:nth-child将为每一个父元素匹配子元素，并且index从1开始。
:nth-child(3n)选取每个父元素下索引值是3的倍数的元素
:first-child eg: :first(index)只匹配一个元素，而:first-child将为每一个父元素匹配第一个子元素。$(“ul li:first-child”) 选择每个ul钟第一个li元素
:last-child eg: :last(index)只匹配一个元素，而:last-child将为每一个父元素匹配最后一个子元素。$(“ul li:last-child”) 选择每个ul钟最后一个li元素
:only-child eg: $(“ul li:only-child”) 在ul中选取是唯一子元素的li元素
⑥表单对象属性过滤选择器：
:enabled eg:$(“#form1:enabled”) 选取id为form1的表单内所有可用元素
:disabled eg:$(“#form1:disabled”) 选取id为form1的表单内所有不可用元素
:checked eg:$(“input::checked”) 选取所有被选中的input元素。（单选框，复选框）
:selected eg:$(“#select option:selected”) 选取所有被选中的选项元素
1. 表单选择器
为了使用户更加灵活操作表单，jQuery专门加入了表单选择器。
:input eg:$(“:input”) 选取所有input、textarea、select和button元素
:text eg:$(“:text”) 选取所有的单行文本框
:password eg:$(“:password”) :input 选取所有的密码框
:radio eg:$(“:radio”) 选取所有单选框
:checkbox eg:$(“:checkbox”) 选取所有复选框
:submit eg:$(“:submit”) 选取提交按钮
:image eg:$(“:image”) 选取所有图像按钮
:reset eg:$(“:reset”) 选取所有重置按钮
:button eg:$(“:button”) 选取所有按钮
:file eg:$(“:file”) 选取所有上传域
:hidden eg:$(“:hidden”) 选取所有不可见元素
1. 其他选择器
为了满足多变的业务需要，jQuery提供可许多实用的选择器的扩展
其中一些插件可以用于增加更多的选择器，如.color可以匹配到颜色等
此外还可以利用JavaScript提供的CSS选择器如cssQuery()等
1. 选择器注意事项
2. 选择器中含有特殊符号的注意事项
①选择器中含有”.”,”#”,”(“,”[“等
如：
<div id=”id#b”>bb</div>
<div id=”id[1]”>cc</div>
$(“#id#b”)× $(“#id\\#b”)√
$(“#id[1]”) × $(“#id\\[1\\]”)
②属性选择器的@符号问题
1.3.1之前的版本 $(“div[@title=’test’]”)
1.3.1及之后的版本 $(“div[title=’test’]”)
1. 选择器中含有空格的注意事项
Var $t_a=$(‘.test :hidden’);//带空格的 选取class为test的元素里面的隐藏元素
Var $t_b=$(‘.test:hidden’);//带空格的 选取隐藏的class为test的元素本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
