jquery 中多条件选择器,相对选择器,层次选择器的区别

Posted 2020-06-09

一、Jquery常用的过滤选择器如下所示： 

1、:first，选取第一个元素，比如$("div:first")选取第一个div元素 

2、:last，选取最后一个元素，比如$("div:last")选取最后一个div元素 

3、:not(选择器)，选取不满足“选择器”条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素 

4、：even/：odd，选取索引为偶数/奇数的元素，比如$("div:even"),选取索引号为偶数的所有div元素 

5、:eq(索引序号)/:gt(索引序号)/:lt(索引序号)，选取等于索引号/大于索引号/小于索引号的元素，比如$("div:lt(3)"),选取索引号小于3的所有div元素 

注意： 

过滤选择器的混合使用时要记住后面的过滤条件是以前面的过滤选择器过滤后的重新序号为基础，即过滤的逐级性，比如 

$("#t1 tr:gt(0):lt(3)").css("fontSize", "28"); //lt(3)是从gt(0)出的新序列中的序号，不要写成lt(4) 





二，重点 

多条件选择器 
多条件选择器：$("p,div,span,menuitem"),同时选择p标签,div标签,和拥有menuitem样式的span标签元素 
注意选择器表达式中的空格不能多不能少，易错！ 

相对选择器 

只要在$()指定第二个参数，第二个参数为相对的元素。比如html代码如下 

代码如下:

<table id="table1"> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
</table> 

那么可以用如下的js代码操作td的背景色 
$("td", $(this)).css("background", "red"),这句代码用的就是相对选择器，选择出的td是以当前的tr为相对的元素。选择的td元素是当前的tr元素下的所有td元素，没有涉及到其他行的td元素 

代码如下:

<script type="text/javascript"> 
$(function () { 
$("#table1 tr").click(function () { 
$("td", $(this)).css("background", "red"); 
}); 
}); 
</script> 

层次选择器： 
1 $("#div li")获取div下的所有li元素（后代，子，子的子....） 
2 $("#div > li")获取div下的直接li子元素//注意空格 
3 $(".menuitem + div")获取样式名为menuitem之后的第一个div元素，不常用。 
3 $(".menuitem ~ div")获取样式名为menuitem之后的所有的div元素，不常用。 

细节区别在于（易错点）： 
多条件选择器：$("p,div,span,menuitem"),相对选择器：$("td", $(this)).css("background", "red")",层次选择器：$("#div li")获取div下的所有li元素（后代，子，子的子....） 

三者的区别是： 

多条件选择器：在一个“”内有逗号区分， 

相对选择器：2个元素分开 ， 

层次选择器在一个“”内以空格区分