回味jQuery系列（1）-选择器

摘要：选择器浅析最核心的组成部分就是选择器引擎，选择器引擎占了很大一部分。它继承了的语法，可以对元素的标签名属性名状态等进行快速准确的选择，并且不必担心浏览器的兼容性。在构造选择器时，尽量简单，只保证必要的确定性。

jQuery 最核心的组成部分就是：选择器引擎，选择器引擎Sizzle占了jQuery很大一部分。它继承了CSS 的语法，可以对DOM 元素的标签名、属性名、状态等进行快速准确的选择，并且不必担心浏览器的兼容性。jQuery选择器实现了CSS1~CSS3 的大部分规则之外，还实现了一些自定义的选择器，用于各种特殊状态的选择。

选择类型           选择器                  返回  
元素名         $("div")            获取所有div元素的DOM对象
ID            $("#xzavier")       获取一个ID为box元素的DOM对象
类(class)     $(".xzavier")       获取所有class为box的所有DOM对象
群组选择       $("span,.xzavier")  获取多个选择器的DOM对象
后代选择       $("ul li a")        获取追溯到的多个DOM对象
通配选择       $("*")              获取所有元素标签的DOM对象
后代选择       $("ul li a")        获取追溯到的多个DOM对象
子选择         $("div p")          只获取子类节点的多个DOM对象
next选择       $("div + p")        只获取某节点后一个同级DOM对象
nextAll选择    $("div ~ p")        获取某节点后面所有同级DOM对象

$("#xzavier").find("button")      //等价后代选择器
$("#xzavier").children("button")  //等价子选择器
$("#xzavier").next("button")      //等价next选择器 
$("#xzavier").nextAll("button")   //等价nextAll选择器    
$("#xzavier").prev("button")      //选择同级上一个元素
$("#xzavier").prevAll("button")   //选择同级所有上面的元素
$("#xzavier").prevUntil("button") //选择同级上非指定元素，遇到则停止
$("#xzavier").nextUntil("button") //选择同级下非指定元素，遇到则停止
$("#xzavier").siblings("button")  //选择同级上下所有元素

更多：
1.ID返回的是单个元素，而元素标签名和类(class)返回的是多个，我们可以采用jQuery 核心自带的一个属性length 或size()方法来查看返回的元素个数。
2.ID在页面中是唯一的，一般要求开发者要遵守规范。如果你在页面中出现三次，在CSS使用样式是会成功显示样式的，但在jQuery，就匹配不到后面的ID。
3.在使用上，通配选择器一般用的并不多，尤其是，比如：$("")，这种使用方法效率很低，影响性能。
4.在构造选择器时，尽量简单，只保证必要的确定性。当选择器筛选越复杂，jQuery 内部的选器引擎处理字符串的时间就越长。
5.注意，find()、next()、nextAll()和children()这四个方法中，如果不传递参数，就相当于传递了“*”，即任何节点。

对应CSS模式               选择器                            返回
a[title]           $("a[title]")             获取title属性的DOM对象
a[title=num]       $("a[title=num]")         获取title属性且=num的DOM对象
a[title^=num]      $("a[title^=num]")        获取title且开头属性值匹配的DOM对象
a[title|=num]      $("a[title|=num]")        获取title且=num或开头属性值匹配后面跟一个“-”号的DOM对象
a[title$=num]      $("a[title$=num]")        获取title属性且结尾属性值匹配的DOM对象
a[title!=num]      $("a[title!=num]")        获取title属性且!=num的DOM对象
a[title~=num]      $("a[title~=num]")        获取title且属性值是以一个空格分割的列表，其中包含属性值的DOM对象
a[title*=num]      $("a[title*=num]")        获取title且属性值含有一个指定字串的DOM对象
a[xz][title=num]   $("a[xz][title=num]")     获取具有bbb属性且title属性=num的DOM对象

过滤器名          jQuery              返回       
:first         $("li:first")     选取第一个元素     
:last          $("li:last")      选取最后一个元素   
:not(selector) $("li:not(.xzavier)") 选取class不是xzavier的li元素
:even          $("li.even")      选择索引(0 开始)是偶数的所有元素
:odd           $("li:odd")       选择索引(0 开始)是奇数的所有元素
:eq(index)     $("li:eq(2)")     选择索引(0 开始)等于index的元素
:gt(index)     $("li:gt(2)")     选择索引(0 开始)大于index的元素
:lt(index)     $("li.lt(2)")     选择索引(0 开始)小于index的元素
:header        $(":header")      选择标题元素，h1 ~ h6 
:animated      $(":animated")    选择正在执行动画的元素
:focus         $(":focus")       选择当前被焦点的元素

更多：
1.:focus 过滤器，必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。而不是鼠标点击或者Tab键盘敲击激活的。
2.:first、:last 和first()、last()这两组过滤器和方法在出现相同元素的时候，first 会实现第一个父元素的第一个子元素，last 会实现最后一个父元素的最后一个子元素。所以，如果需要明确是哪个父元素。

过滤器名                jQuery                        返回
:contains(text)  $(":contains("xzavier")")  选取含有"xzavier"文本的元素
:empty           $(":empty")                选取不包含子元素或空文本的元素
:has(selector)   $(":has(.xzavier)")        选取含有class是xzavier的元素
:parent          $(":parent")               选取含有子元素或文本的元素

更多：
1.jQuery 提供了一个has()方法来提高:has 过滤器的性能：$("ul").has(".xzavier")
2.jQuery 提供了一个名称和:parent 相似的方法，但这个方法并不是选取含有子元素或文本的元素，而是获取当前元素的父元素，返回的是元素集合

过滤器名      jQuery            返回
:hidden    $(":hidden")    选取所有不可见元素集合元素
:visible   $(":visible")   选取所有可见元素集合元素

更多：
1.:hidden 过滤器一般是包含的内容为：CSS 样式为display:none、input 表单类型为type="hidden"和visibility:hidden 的元素

过滤器名             jQuery                   返回
:first-child   $("li:first-child")   获取每个父元素的第一个子元素
:last-child    $("li:last-child")    获取每个父元素的最后一个子元素
:only-child    $("li:only-child")    获取只有一个子元素的元素
:nth-child(odd/even/eq(index))  $("li:nth-child(even)")    获取每个自定义子元素的元素(索引值从1开始计算)

方法名                 jQuery                               备注
is(s/o/q/f)       $("li").is(".red")           参数可传递选择器、DOM、jquery对象或是函数来匹配
hasClass(class)   $("li").hasClass("xzavier")  同is("." + class)
slice(start, end) $("li").slice(0,2)           选择从start到end位置的元素，如果是负数，则从后面开始
filter(s/o/q/f)   $("li").filter(".xzavier")   参数可传递选择器、DOM、jquery对象或是函数来匹配
end()             $("div").find("p").end()     获取当前元素前一次状态集合元素
contents()        $("div").contents()          获取某元素下面所有元素节点，包括文本节点

选择器名         jQuery               返回
:input       $(":input")       所有  元素
:text        $(":text")        所有 type="text" 的  元素
:password    $(":password")    所有 type="password" 的  元素
:radio       $(":radio")       所有 type="radio" 的  元素
:checkbox    $(":checkbox")    所有 type="checkbox" 的  元素
:submit      $(":submit")      所有 type="submit" 的  元素
:reset       $(":reset")       所有 type="reset" 的  元素
:button      $(":button")      所有 type="button" 的  元素
:image       $(":image")       所有 type="image" 的  元素
:file        $(":file")        所有 type="file" 的  元素      
:enabled     $(":enabled")     所有激活的 input 元素
:disabled    $(":disabled")    所有禁用的 input 元素
:selected    $(":selected")    所有被选取的 input 元素
:checked     $(":checked")     所有被选中的 input 元素

更多：
1.这些选择器都是返回元素集合，如果想获取某一个指定的元素，最好结合一下属性选择器。

$(":text[name=xzavier]); //获取单行文本框name=xzavier 的元素  

我们在使用中，不会所有标签都有id，使用起来也不方便，代码冗杂。综合组合很多选择器使用，选到特定的元素，也是非常方便的。