分类解析jQuery选择器

基本选择器：

#id

根据Id匹配一个元素

.class

  根据给定的类名匹配一个元素

element

　  根据元素名匹配一个元素

*

　匹配所有元素

selecttor1,selector2

　  并集，返回两个选择器匹配到的元素

层次选择器：

ancestor descendant

　根据祖先匹配所有的后代元素

parent>child

　 根据父元素匹配所有的子元素，直接后代

prev+next

匹配下一个兄弟元素 相当于next()方法

prev~siblings

   匹配后面的兄弟元素 相当于nextAll()方法     siblings()方法为匹配所有的兄弟元素

简单过滤选择器：

:first或first()

　 匹配第一个元素

:last或last()

  　匹配最后一个元素

:not(selector)

  匹配非selector能匹配到的元素

:even

  匹配索引值为偶数的元素，索引号从0开始

:odd

　匹配索引值为奇数的元素，索引号从0开始

:eq(index)

　

　匹配指定索引号的元素，索引号从0开始

:gt(index)

　 

　匹配索引号大于给定索引值的元素，索引号从0开始

:lt(index)

 

匹配索引号小于给定索引值的元素，索引号从0开始

:header

匹配所有的标题元素  h1 h2 h3 h4 h5 h6

:animated

  匹配所有正在执行动画的元素

内容过滤选择器：

:contains(text)

匹配包含给定文本的元素

:empty

匹配所有不包含子元素或者文本的空元素

:has(selector)

  匹配后代中含有selector能匹配上元素的元素

:parent

匹配含有子元素或者文本的元素

可见性过滤选择器：

:hidden

匹配不可见元素，或者type="hidden"的元素　含有css样式:display:"none";的元素，无论CSS是内联，导入，链接式

:visible

获取所有的可见元素

属性过滤选择器：

[attribute]

匹配含有给定属性的元素

[attribute=value]

   匹配含有属性=value的元素

[attribute!=value]

  匹配含有属性但!=value的元素

[attribute^=value]

匹配属性值是以value开始的元素

[attribute$=value]

  匹配属性值是以value结束的元素

[attribute*=value]

  匹配属性值包含某些值的元素，部分前后，中间有也算

[selector][selector]

匹配属性选择器的交集

子元素过滤选择器：

:nth-child(eq|even|odd|index)

获取所有父元素特定位置的子元素

:first

　 获取所有父元素下的第一个子元素

:last

　 获取所有父元素下最后一个子元素

:only-child

获取所有父元素下唯一的一个元素

表单对象属性过滤选择器：

:enabled

    获取表单中所有可用的元素

:disabled

　 获取表单中所有不可用的元素

:checked

　获取表单张所有被选中的元素

:selected

   获取表单中所有被选中的option的元素

表单选择器：

:input

获取所有的表单元素<input开头的，还有textarea select

:text

   获取所有的单行文本框

<input type="text" />

:password

获取所有的密码框元素      <input type="password" />

:radio

获取所有的单选按钮

　<input type="radio" />

:checkbox

获取所有的复选框

<input type="checkbox">

:submit

　 获取所有的提交按钮

　<input type="submit" />

:image

获取所有的图像按钮

<input type="image" />

:reset

获取所有的重置按钮

　 <input type="reset" />

:button

    获取所有的按钮

　<input type="button">

:file

　 获取所有的文件上传框

<input type="file" />

1、基本选择器

(1)、#id  根据Id匹配一个元素

　$("#div1").css("background-color","red");
//匹配id为"div1"的元素

　<div id="div1">我是一个DIV</div> //会选中该div元素

(2)、element  根据给定的元素名匹配元素

$("p").css("background-color","red");

//匹配页面所有的p元素


<p>我是一个P</p>

(3)、class  根据class属性匹配元素

$(".important").removeClass();

//匹配所有class="important"元素


<p class="important">我是一个p元素</p>

(4)、*      匹配所有的元素

$("*").css("background-color","red");

(5)、selector1,selector2

选择器之间用逗号分隔

返回每一个选择器匹配到的元素

$(".div1,#span1").css("background-color","red");

2、层次选择器

　(1)、ancestor descendant   根据祖先元素匹配所有的后代元素，返回的是匹配到的后代元素，用空格分开。

$("#div1 span").css("color","red");


<div id="div1">



<span>我是span1</span>

　***会被选中，是#div1的后代span



<div>




<span>我是span3</span>
　***会被选中，也是#div1的后代span



</div>


</div>


<span>我是span2</span>


　***不会被选中，不是#div1的后代

     (2)、parent > child

根据父元素匹配所有的子元素

返回所有的子元素

用大于号">"分隔

$("#div1 > span").css("color","red");

<div id="div1">



<span>我是span1</span>

　***会被选中，是#div1的子元素span



<div>




<span>我是span3</span>
　***不会被选中，是#div1的后代元素，但不是直接子元素



</div>


</div>


<span>我是span2</span>


　***不会被选中，不是#div1的子元素

    (3)、prev + next

匹配紧接在prev元素后的相邻的下一个元素   用加号"+"分隔。

相当于.next()方法

$(".p1 + p").css("color","red");
//此行代码相当于$(".p1").next().css("color","red");


<div>



<p>我是第一个P</p>


***不会被选中，是class为p1的上一个了



<p class="p1">我是第二个P</p>
***prev本身并不会被选中



<p>我是第三个P</p>


***会被选中，是class为p1的下一个相邻元素



<p>我是第四个P</p>


***不会被选中，不是class为p1的下一个，是下二个了


</div>

      (4)、prev ~ sibings

匹配prev后面的的所有兄弟元素 用波浪线"~"分隔开

相当于 nextAll()方法

$(".p1 + p").css("color","red");
//此行代码相当于$(".p1").nextAll("p").css("color","red");


<div>



<p>我是第一个P</p>


***不会被选中，是class为p1前面的元素



<p class="p1">我是第二个P</p>
***prev本身并不会被选中



<p>我是第三个P</p>


***会被选中，是class为p1后面的P兄弟元素



<p>我是第四个P</p>


***会被选中，也是class为p1后面的P兄弟元素


</div>

　(5)、选中所有的兄弟元素 siblings() 方法

$(".p1").sibings("p").css("color","red");

<div>



<p>我是第一个P</p>


***会被选中，是class为p1的P兄弟元素



<p class="p1">我是第二个P</p>
***prev本身并不会被选中



<p>我是第三个P</p>


***会被选中，是class为p1的P兄弟元素



<p>我是第四个P</p>


***会被选中，也是class为p1的P兄弟元素


</div>

3、简单过滤选择器

(1)、first()或:first

选中符合条件的第一个元素

$("#div1 > p:first").css("color","red")//此行代码相当于
$("#div1 > p").first().css("color","red");


<div id="div1">



<p>我是第一个P</p>
　***会被选中，是id为#div1下的第一个P元素



<p>我是第二个P</p>
　***不会被选中，是第二个P元素了



<p>我是第三个P</p>
　***不会被选中，是第三个P元素了


</div>

(2)、last()或:last

符合条件的最后一个元素

$("#div1 > p:last").css("color","red");
//此行代码相当于　$("#div1 > p").last().css("color","red");


<div id="div1">



<p>我是第一个P</p>
　***不会被选中，是第一个



<p>我是第二个P</p>
　***不会被选中，是第二个



<p>我是第三个P</p>
　***会被选中，id为#div1下的最后一个P元素


</div>

　(3)、:not(selector)

符合条件但不能被selector选中的元素

$("#div1 > p:not('.p1')").css("color","red");

<div id="div1">



<p>我是第一个P</p>



***会被选中



<p class="p1">我是第二个P</p>
***不会被选中，因为符合了:not里的条件 class="p1"



<p>我是第三个P</p>



***会被选中


</div>

　(4)、:even

获取指定索引值为偶数的元素(0、2、4、6、8……)，注意索引号是从0开始的

$("#div1 > p:even").css("color","red");

<div id="div1">



<p>我是第一个P</p>
***会被选中，索引号0



<p>我是第二个P</p>
***不会被选中，索引号1



<p>我是第三个P</p>
***会被选中，索引号2



<p>我是第四个P</p>
***不会被选中，索引号3



<p>我是第五个P</p>
***会被选中，索引号4


</div>

　(5)、odd

获取指定索引值为奇数的元素(1、3、5、7、9......)，注意索引号是从1开始的

$("#div1 > p:odd").css("color","red");

<div id="div1">



<p>我是第一个P</p>
***不会被选中，索引号0



<p>我是第二个P</p>
***会被选中，索引号1



<p>我是第三个P</p>
***不会被选中，索引号2



<p>我是第四个P</p>
***会被选中，索引号3



<p>我是第五个P</p>
***不会被选中，索引号4


</div>

(6)、eq(index)

选取指定索引值的元素，索引值从0开始

$("#div1 > p:eq(1)").css("color","red");

<div id="div1">



<p>我是第一个P</p>
***不会被选中，索引号为0



<p>我是第二个P</p>
***不会被选中，索引号为1



<p>我是第三个P</p>
***不会被选中，索引号为2



<p>我是第四个P</p>
***不会被选中，索引号为3


</div>

　(7)、gt(index)

获取所有索引值大于index的元素，索引号从0开始

$("#div1 > p:gt(1)").css("color","red");

<div id="div1">



<p>我是第一个P</p>
***不会被选中，索引号为0



<p>我是第二个P</p>
***不会被选中，索引号为1



<p>我是第三个P</p>
***会被选中，索引号为2大于1了



<p>我是第四个P</p>
***会被选中，索引号为3大于1了


</div>

　(8)、lt(index)

获取所有索引值小于index的元素，索引号从0开始

$("#div1 > p:lt(1)").css("color","red");

<div id="div1">



<p>我是第一个P</p>
***会被选中，索引号为0，小于1



<p>我是第二个P</p>
***不会被选中，索引号为1，不小于1



<p>我是第三个P</p>
***不会被选中，索引号为2大于1了



<p>我是第四个P</p>
***不会被选中，索引号为3大于1了


</div>

(9)、:header

　索取所有标题类型元素h1、h2、h3、h4、h5、h6

$("#div1 > :header").css("color","red");
　 <div id="div1">



<p>我是一个P</p>


***不会被选中，不是标题类型元素



<span>我是一个span</span> ***不会被选中，不是标题类型元素



<h1>我是一个h1</h1>

***会被选中，h1是标题类型元素



<h6>我是一个h6</h6>

***会被选中，h6是标题类型元素


</div>

(10)、animated

正在执行动画效果的元素

4、内容过滤选择器

 

(1)、:contains(text)    获取包含给定文本的元素

　$("p:contains('三')").css("background-color","red");


　<div>



<p>我是第一个P</p>
***不会被选中



<p>我是第二个P</p>
***不会被选中



<p>我是第三个P</p>
***会被选中，文本里包含了"三"


　</div>

(2)、:empty

获取不包含子元素或文本的空元素

$(:empty).text("我是空元素");


<div>




<div><span></span></div>
***div不会被选中，因为有<span></span>子元素。<span></span>会被选中，因为没有子元素也没有文本元素




<p></p>





***会被选中，没有子元素，也没有文本元素




<span>我是一个span</span>
***不会被选中,有文本元素



</div>

　(3)、:has(selector)

　选中含有selector所匹配元素的元素,(注意不限于直接子元素，只要是后代含有都算)

$("div:has('span')").css("background-color","red");


<div>




***此div会被选中，因为他的有孙子span




我是最外层div






<div><p>我是一个P</p></div>

***此div不会被选中，因为不含有后代span




<div><span>我是一个span</span></div>
***此div会被选中，含有后代span



</div>

(4)、:parent

含有子元素或者文本元素的元素

　$(":parent").text("不含子元素或文本元素");



<div>我是一个div</div>
***不会被选中，因为含有文本元素



<div><span>我是一个span</span></div>
***不会被选中，含有子元素。



<div></div>



***会被选中，不含子元素也不含有文本元素

5、可见性过滤选择器

(1)、:hidden

选中所有不可见元素

$("span:hidden").css("display","block");
 $("input:hidden").val("我是jQuery");

　 <span style="display:none">我是一个span</span>
***会被第一条规则选中


　 <input type="hidden" value="我是一个隐藏的input" />　***会被第二条jQuery选中


　 <span class="span1">我是span1</span>


　***会被第一条jQuery选中

        (2)、:visible

选中所有可见元素

6、属性过滤选择器

(1)、[attribute]

获取包含给定属性的元素

$("div[class]").css("font-size","30px");
 

<div>



　<div class="div1">我是第一个div</div>
***会被选中，含有class属性



　<div>我是第二个div</div>



 ***不会被选中，没含有class属性。


　</div>

 

(2)、[attribute=value]

获取属性值等于value的元素

$("div[class=div1]").css("font-size","30px");



<div>




<div class="div1">我是div1</div>
***会被选中，class属性等于div1。




<div class="div2">我是div2</div>
***不会被选中,class属性不等于div1。



</div>

 

(3)、[attribute!=value]

获取属性值不等于value的元素

$("div[class!=div1]").css("color","red");



<div>我是一个没有class属性的div</div>




 ***会被选中，没有class属性自然class属性不等于div1



<div class="div2">我是一个class属性等于div2的div</div>
 ***会被选中，class属性不等于div1



<div class="div1">我是一个class属性等于div1的元素</div>
***不会被选中，class属性等于div1

(4)、[attribute^=value]

获取属性值以value开始的元素

$("div[class^=div]").css("color","red');



<div class="div1">我是div1</div>
***会被选中，class属性以div开始



<div class="div2">我是div2</div>
***会被选中，class属性以div开始



<div class="abc">我是div3</div>
 ***不会被选中，class属性不以div开始

(5)、[attribute$=value]

获取属性值以value结束的元素

$("div[class$=div]").css("color","red");



<div class="1div">我是第一个div</div>
***会被选中，class属性以div结束



<div class="2div">我是第二个div</div>
***会被选中，class属性以div结束



<div class="abc">我是第三个div</div>
 ***不会被选中，class属性不以div结束

(6)、[attribute*=value]

获取属性值包含value值元素

$("div[class*=div]").css("font-size","30px");



<div class="div1">我是div1</div>
***会被选中，属性值包含div



<div class="1div">我是1div</div>
***会被选中，属性值包含div



<div class="1div1">我是1div1</div> ***会被选中，属性值包含div



<div class="abc">我是abc</div>
　***会被选中，属性值包含div

(7)、[selector][selector][selector]

获取属性交集元素

$("div:[class][title=title1]").css("background-color","red");



<div class="div1" title="title1">我是div1,title1</div>
***会被选中，有class属性且title属性等于title1



<div class="div1" title=title2>我是div1,title2</div>
　***不会被选中，虽然有class属性，但是title属性不等于title2



<div class="div3">我是div3</div>




　***不会被选中，没有title属性

7、子元素过滤选择器

　(1):nth-child(eq|even|odd|index)

获取每个父元素下的特定位置元素，索引号从1开始

$("div>p:nth-child(1)").css("background-color","red");//选中每一个父元素下的div下的第一个直接P元素
<div>

<p>我是第一个P</p> 
*** 会被选中，是div下的第一个子P元素

<p>我是第二个P</p> 
*** 不会被选中，是第二个了
</div>
<div>

<P>我是第三个P</P> 
*** 会被选中，是div下的第一个子P元素

<P>我是第四个P</P> 
*** 不会被选中，是第二个了
</div>

(2):first-child

选中每个父元素下的第一个

$("p:first-child").css("background-color","red");
//选中每一个父元素下的第一个P元素
<div>

<p>我是第一个P</p> 
*** 会被选中，是div下的第一个子P元素

<p>我是第二个P</p> 
*** 不会被选中，是第二个了
</div>
<ul>

<li>


<P>我是第三个P</P> 
*** 会被选中，是div下的第一个子P元素


<P>我是第四个P</P> 
*** 不会被选中，是第二个了

</li>
</ul>

(3)、:last-child

选中每一个父元素下的最后一个元素

$("p:last-child").css("background-color","red");
//选中每一个父元素下的第一个P元素
<div>

<p>我是第一个P</p> 
*** 不会被选中，不是某父元素的最后一个子P元素

<p>我是第二个P</p> 
*** 会被选中，是div元素下的最后一个子P元素
</div>
<ul>

<li>


<P>我是第三个P</P> 
*** 不会被选中，不是某父元素下的最后一个子P元素


<P>我是第四个P</P> 
*** 会被选中，是div元素下的最后一个P元素

</li>
</ul>

(4)、:only-child

获取每个父元素下唯一仅有的一个子元素

$("p:only-child").css("background-color","red");
<div>


<p>我是第一个P</p>
***不会被选中，不是某父元素下的唯一一个P元素


<p>我是第二个P</p>
***不会被选中，不是某父元素下的唯一一个P元素

</div>

<div>


<span>我是一个span</span>
***不会被选中，不是某父元素下的唯一一个P元素


<p>我是第三个P</p>


 ***不会被选中，不是某父元素下的唯一一个span元素

</div>

<div>


<p>我是一个P</p>

***会被选中，是div下的唯一一个P元素

</div>

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

(1)、:enabled

获取表单中所有属性为可用的元素

$("input:enabled").val("jQuery表单对象属性过滤选择器");
<div>


<input type="text" value="我是一个可用的input" />

***会被选中，是一个可用的表单元素


<input type="text" value="我是一个不可用的input" disabled="disabled" />
***不会被选中，是不可用的表单元素

</div>

(2)、:disabled

获取表单中属性不可用的元素

$("input:enabled").val("jQuery表单对象属性过滤选择器");

<div>

　<input type="text" value="我是一个可用的input" />

***不会被选中，是一个可用的表单元素

　<input type="text" value="我是一个不可用的input" disabled="disabled" />
***会被选中，是不可用的表单元素 //注意，jQuery能够操作不可用
　的表单元素

</div>

(3)、:checked

获取表单中被选中的元素

从属性能够知道用户选中了哪个

$("input:checked").val("jQuery");


<div>



<input type="checkbox" checked="checked" value="1">选中



<input type="checkbox" value="0">未选中


</div>

(4)、:selected

获取表单中被选中的元素

此属性能够知道用户选择了哪个

alert($("input:selected").text(""));//获取所有被选中的option元素


<div>



<selected>




<option value="0" selected="selected">option1</option>
***会被选中




<option value="1">option2</option>




***不会被选中，因为本option不是选中的。



</selected>


</div>

9、表单选择器

(1)、:input

获取所有的input、textarea、select

$(":input").val("jQuery");

<div>



<textarea>我是一个兵</textarea>
***会被选中



<input text="button" value="" />
***会被选中



<p>我是一个P</p>




***不会被选中


</div>

(2)、:text

获取所有的单行文本框，也就是<input type="text" />元素

$(":text").val("jQuery");

<div>



<input type="text" value="我是一个input" />
***会被选中，是单行文本框



<input type="button" value="确定" />

　 ***不会被选中，不是单行文本框



<textarea>我是一个textarea</textarea>

 ***不会被选中，不是单行文本框


</div>

(3)、:password

获取所有的密码框

也就是<input type="password" />元素

$(":password").hide(3000);


<div>



<input type="password" />

***会被选中，是密码框



<input type="text" value="我是一个文本框" />
***不会被选中，是文本框


</div>

(4)、:radio

获取所有的单选按钮

$(":radio").hide(3000);


<div>



<input type="radio" />我是一个radio
***单选按钮会被选中，但是后面的文字不会



<input type="text" />我是一个文本框
***不会被选中


</div>

(5)、：checkbox

获取所有的复选框

$(":checkbox").hide(3000);


<div>



<input type="checkbox" />我是一个checkbox
***复选框会被选中，文本不会



<input type="text" />我是一个文本框


 ***不会被选中，不是复选框


</div>

(6)、:submit

获取所有的提交按钮

$(":submit").hide(3000);


<div>



<input type="submit" value="提交">


***会被选中，是提交按钮



<input type="text" value="我是一个文本框">
 ***不会被选中，不是提交按钮


</div>

(7)、:image

获取所有的图像域

$(":image").attr("title","我是一个图片按钮");


<div>



<input type="image" src="http://www.baidu.com/img/baidu_sylogo1.gif" />
***会被选中



<input type="text" value="我是一个文本框" />


***不会被选中，不是图片按钮


</div>

(8)、:reset

获取所有重置按钮

$(":reset").hide(3000);


<div>



<input type="reset" value="重置">


***会被选中，是重置按钮



<input type="text" value="我是一个文本框">　 ***不会被选中，不是重置按钮


</div>

(9)、:button

获取所有的按钮

$(":button").hide(3000);


<div>



<input type="button" value="确认" />


***会被选中，是按钮元素



<input type="text" value="我是一个文本框" />
 ***不会被选中，不是按钮元素


</div>

(10)、:file

获取所有的文件域

$(":file").hide(3000);


<div>



<input type="file" title="file" />



<input type="text" value="我是一个文本框" />


</div>

以上就是本文的全部内容，希望对大家有所帮助，谢谢对三水点靠木的支持！