强大的jQuery选择器

背景：

    + 考虑兼容问题，原生js提供的的选择DOM的方法只有两个：

      - 通过id属性获取指定元素-->document.getElementById()

      - 通过标签名获取指定元素-->document.getElementsByTagName()

    + 而jQuery实现了从CSS1到CSS3所有的选择器以及其他所有的选择器，各选择器之间可以相互替代。

      - 重点是：不存在兼容性问题！

Ⅰ、选择器

1、jQuery选择器的类型有：

  id选择器、类选择器、标签选择器、后代选择器、父子选择器、伪类选择器、表单选择器、属性选择器、通配符选择器、混合选择器

**id选择器 ** ------

• $("#id") 获取到的是具有该id属性的唯一的元素

标签选择器 ------

• $("标签名") 获取到的是所有的该标签元素，返回一个标签元素数组

类选择器 ------

• $(".类名") 获取到的是所有的该类的元素

通配符选择器 ------

• $("") 选择文档*中的所有的元素

后代选择器 ------

• $("li .link") 选择li元素下面的所有的具有类名叫link的后代元素

父子选择器 ------

• $("ul>li") 选择父元素ul下面的所有的直接子元素li

伪类选择器 ------

• $("ul li:eq(2)") 选择ul下面的第3个li元素（索引值从0开始）

• $("li:even") 选择所有的偶数li

• $("li:odd") 选择所有的奇数li

表单选择器 ------

• $(":checkbox") 所有 type="checkbox" 的 input 元素

• $(":checked") 所有被选中的 input 元素

• $(":text") 所有 type="text" 的 input 元素

属性选择器 ------

• $("li[id]") 所有带有id属性的li元素

• $("li[id='link']") 所有id属性值为link的元素

• $("li[id!='link']") 所有id属性值不 为link的元素

混合选择器 ------

• $("#id,.类名,标签名") 运用多种的选择方式进行联合选择

2、常用的选择器举例

*              $("*")              所有元素

#id            $("#lastname")      id="lastname" 的元素

.class          $(".intro")        所有 class="intro" 的元素

element        $("p")              所有 <p> 元素

.class.class    $(".intro.demo")    所有 class 具有 "intro" 且 "demo" 的元素

s1,s2,s3        $("th,td,.intro")  所有带有匹配选择的元素

:even      $("tr:even")    所有偶数 <tr> 元素

:odd        $("tr:odd")    所有奇数 <tr> 元素

:first      $("p:first")    第一个 <p> 元素

:last      $("p:last")    最后一个 <p> 元素

:eq(index)      $("ul li:eq(3)")    列表中的第四个元素（index 从 0 开始）

:gt(index)      $("ul li:gt(3)")    列出 index 大于 3 的元素 greater than

:lt(index)      $("ul li:lt(3)")    列出 index 小于 3 的元素 less than

:not(selector)  $("input:not(:empty)")  所有不为空的 input 元素

:header        $(":header")        所有标题元素 <h1> - <h6>

:animated      $(":animated")      所有正在执行动画的元素

:contains(text)    $(":contains('W3School')")  包含指定字符串的所有元素

:empty              $(":empty")                无子（元素）节点的所有元素

:hidden            $("p:hidden")              所有隐藏的 <p> 元素

:visible            $("table:visible")          所有可见的表格

[attribute]        $("[href]")        所有带有 href 属性的元素

[attribute=value]  $("[href='#']")    所有 href 属性的值等于 "#" 的元素

[attribute!=value]  $("[href!='#']")    所有 href 属性的值不等于 "#" 的元素

[attribute$=value]  $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素

:input      $(":input")        所有 <input> 元素

:text      $(":text")          所有 type="text" 的 <input> 元素

:password  $(":password")      所有 type="password" 的 <input> 元素

:radio      $(":radio")        所有 type="radio" 的 <input> 元素

:checkbox  $(":checkbox")      所有 type="checkbox" 的 <input> 元素

:submit    $(":submit")        所有 type="submit" 的 <input> 元素

:reset      $(":reset")        所有 type="reset" 的 <input> 元素

:button    $(":button")        所有 按钮元素（<button></button> 或者 input="button"）

:image      $(":image")        所有 type="image" 的 <input> 元素

:file      $(":file")          所有 type="file" 的 <input> 元素

:enabled    $(":enabled")  所有激活的 input 元素

:disabled  $(":disabled")  所有禁用的 input 元素

:selected  $(":selected")  所有被选取的 input 元素

:checked    $(":checked")  所有被选中的 input 元素

Ⅱ 、运用场景（选择方法）

• 获取父级元素

* $(selector).parent();    //获取直接父级

$(selector).parents('p'); //获取所有父级元素直到html

• 获取子代和后代的元素

* $(selector).children();  //获取直接子元素

* $(selector).find("span"); //获取所有的后代元素  find方法 可能用的多。

• 获取同级的元素

* $(selector).siblings()    //所有的兄弟节点

$(selector).next()        //下一个兄弟节点

$(selector).nextAll()    //后面的所有节点

$(selector).prev()        //前面一个的兄弟节点

$(selector).prevAll()    //前面的所有的兄弟节点

• 过滤方法

* $("p").eq(1);          //取第n个p元素(index从0开始)

$("div p").last();        //取最后一个元素

$("div p").first();      //取第一个元素

$("p").filter(".intro");  //过滤，选择所有p标签带有 .intro类

$("p").not(".intro");    //去除，跟上面的filetr正好相反

Ⅲ、总结

jQuery选择器永远比你想象的要强大得多，只有你想不到，没有他做不到。这里基本上将常用的选择器罗列了一遍，也举了一些例子，既可以作为学习用，也可以方便日后查询。