jQuery选择器总结

jQuery选择器的优势：

1、使用$("#ID")代替document.getElementById()，使用$("tagName")代替document.getElementsByTagName()函数

2、支持CSS1到CSS3选择器

3、完善的处理机制，即，使用jQuery获取不存在的元素也不会报错

为了方便学习，我们将jQuery的选择器和CSS的选择器进行对比学习。

一、基本选择器

jQuery与CSS选择器做对比

左边CSS，右边jQuery.

1.标签选择器 

     td{font-size:14px;}             $("td")

2.ID选择器

     #note{font-size:14px;}         $("#note")

3.类选择器

     .note{font-size:14px;}         $(".note")

4.群组选择器

     td,p,div.a{font-size:14px;}    $("td,p,div.a")

5.通配选择符

     *{font-size:14px;}             $("*")    //选取所有元素

二、层次选择器

jQuery与CSS选择器做对比

左边CSS，右边jQuery.

1.后代选择器

     #div span{font-size:14px;}     $("#div span")    //选取<div>里的 所有 的<span>元素， 包括子元素、孙元素、曾孙元素等等。

2.子元素选择器

     div > span{font-size:14px;}     $("div > span")   //选取<div>元素 下 元素名是<span>的子元素， 不包括孙元素、曾孙元素等等。

eg: http://www.w3school.com.cn/tiy/t.asp?f=csse_selector_child

3.相邻兄弟选择器

     .one + div{font-size:14px;}     $(".one + div")   //选取与class为one 同辈的后面第一个 <div>元素

                                 或 $(".one").next("div")   //next()方法

4.~ 选择器

     #two~div{font-size:14px;}       $("#two~div")     //选取与id为two 同辈的后面所有 <div>元素

                                  或 $("#two").nextAll("div") //nextAll()方法

5.siblings():

$("#two~div")只能选择"#two"元素 后面同辈的所有 <div>元素，

而$("#two").siblings("div")方法能选择 与"#two"同辈的所有<div> 元素，无论前后

三、过滤选择器       类似于CSS的伪类

1、基本过滤选择器

（1）:first

     $("div:first") //选取所有<div>元素中第一个<div>元素

（2）:last

     $("div:last")  //选取所有<div>元素中最后一个<div>元素

（3）:not(selector)

     $("input:not(.myclass)")  //选取class不是myclass的<input>元素

（4）:even

     $("input:even")  //选取索引是偶数的<input>元素,索引从0开始

（5）:odd

     $("input:odd")   //选取索引是奇数的<input>元素,索引从0开始

（6）:eq(index)

     $("input:eq(1)") //选取索引等于1的<input>元素

（7）:gt(index)

     $("input:gt(1)") //选取索引大于1的<input>元素

（8）:lt(index)

     $("input:lt(1)") //选取索引小于1的<input>元素

（9）:header

     $(":header")     //选取网页中所有的<h1>,<h2>,<h3>····

（10）:animated

     $("div:animated")          //选取正在执行动画的<div>元素

     $(":animated").css("background","#000");   //改变正在执行动画的元素的背景色

2、内容过滤选择器：通过 (过滤)子元素和文本内容 来获取相应元素

（1）:contains(text)

     $("div:contains('我')")   //选取含有文本“我”的<div>元素

（2）:empty

     $("div:empty")  //选取不包含子元素(包含文本元素)的<div> 空元素

 （3）:parent

     $("div:parent")           //选取拥有子元素(包含文本元素)的<div>元素

（4）:has(selector)

     $("div:has(p)") //选取含有<p>元素的<div>元素

3、可见性过滤选择器：通过 (过滤)可见和不可见 来获取相应元素

（1）:hidden

     $(":hidden")选取所有不可见元素.包括<input type="hidden"/>,<div style="display:none;">和       <div style="visibility:hidden;">等元素。

如果只是想选取<input>元素，可以使用$("input:hidden")

（2）:visible     

     $(":visible")    //选取所有可见元素

    $("div:visible") //选取所有可见的<div>元素

4、属性过滤选择器：通过 (过滤)元素属性 来获取相应元素

[attribute]

     $("div[id]")   //选取拥有id属性的元素

[attribute=value]

     $("div[title=test]")  //选取title属性为"test"的<div>元素

[attribute!=value]

     $("div[title!=test]") //选取title属性不等于"test"的<div>元素

[attribute^=value]

     $("div[title^=test]") //选取title属性以"test"开始的<div>元素

[attribute$=value]

     $("div[title$=test]") //选取title属性以"test"结束的<div>元素

[attribute*=value]

     $("div[title*=test]") //选取title属性含"test"的<div>元素

[selector1][selector2][selectorN]

     $("div[id][title$='test']")  //选取拥有id属性 和 有以"test"结束的title属性 的<div>元素

5、子元素过滤选择器

选择器	描述	返回	示例
:nth-child(index/even /odd/equatioin)	选取每个父元素下第index个子元素或奇偶元素， index从1开始	集合元素	将为每一个父元素匹配子元素
:first-child	选取每个父元素的第一个子元素	集合元素	将为每一个父元素匹配子元素
:last-child	选取每个父元素的最后一个子元素	集合元素	将为每一个父元素匹配子元素
:only-child	若某个元素是其父元素唯一的子元素，则被匹配	集合元素	$("ul li:only-child")在<ul>中选取是唯一 子元素的<li>元素

:nth-child()选择器功能如下： 1、:nth-child(even)选择索引是偶数的元素 2、:nth-child(2)选择索引是2的元素 3、:nth-child(3n+1)选择索引是（3n+1）的元素，n从1开始

6、表单对象属性过滤选择器

:enabled

     $("#form1 :enabled");     //选取id为"form1"的表单内的所有可用元素 

:disabled

     $("#form2 :disabled");    //选取id为"form2"的表单内的所有不可用元素

:checked

     $("input:checked");       //选取所有被选中的<input>元素

:selectd

     $("select:selected")      //选取所有被选中的选项元素