摘要:一、Jquery常用的过滤选择器如下所示: 1、:first,选取第一个元素,比如$("p:first")选取第一个p元素 2、:last,选取最后一个元素,比如$("p:last")选取最后一个p元素 3、:not(选择器),选取不满足“选择器”条件的元素,比如$("p:not(.className)"),选取样式不是className的所有p元素 4、:even/:odd,选取索引为偶数/奇数的元素,比如$("p:even"),选取索引号为偶数的所有p元素 5、:eq(索引序号)/:gt(索引序号)/:lt(索引序号),选取等于索引号/大于索引号/小于索引号的元素,比如$("p:lt(3)"),选取索引号小于3的所有p元素 注意: 过滤选择器的混合使用时要记住后面的过滤条件是以前面的过滤选择器过滤后的重新序号为基础,即过滤的逐级性,比如 $("#t1 tr:gt(0):lt(3)").css("fontSize", "28"); //lt(3)是从gt(0)出的新序列中的序号,不要写成lt(4) 二,重点 多条件选择器 多条件选择器:$("p,p,span,menuitem"),同时选择p标签,p标签,和拥有menuitem样式的span标签元素 注意选择器表达式中的空格不能多不能少,易错! 相对选择器 只要在$()指定第二个参数,第二个参数为相对的元素。比如html代码如下

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-jquery 中多条件选择器,相对选择器,层次选择器的区别

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

一、Jquery常用的过滤选择器如下所示:
1、:first,选取第一个元素,比如$("p:first")选取第一个p元素
2、:last,选取最后一个元素,比如$("p:last")选取最后一个p元素
3、:not(选择器),选取不满足“选择器”条件的元素,比如$("p:not(.className)"),选取样式不是className的所有p元素
4、:even/:odd,选取索引为偶数/奇数的元素,比如$("p:even"),选取索引号为偶数的所有p元素
5、:eq(索引序号)/:gt(索引序号)/:lt(索引序号),选取等于索引号/大于索引号/小于索引号的元素,比如$("p:lt(3)"),选取索引号小于3的所有p元素
注意:
过滤选择器的混合使用时要记住后面的过滤条件是以前面的过滤选择器过滤后的重新序号为基础,即过滤的逐级性,比如
$("#t1 tr:gt(0):lt(3)").css("fontSize", "28"); //lt(3)是从gt(0)出的新序列中的序号,不要写成lt(4)
二,重点
多条件选择器
多条件选择器:$("p,p,span,menuitem"),同时选择p标签,p标签,和拥有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 $("#p li")获取p下的所有li元素(后代,子,子的子....)
2 $("#p > li")获取p下的直接li子元素//注意空格
3 $(".menuitem + p")获取样式名为menuitem之后的第一个p元素,不常用。
3 $(".menuitem ~ p")获取样式名为menuitem之后的所有的p元素,不常用。
细节区别在于(易错点):
多条件选择器:$("p,p,span,menuitem"),相对选择器:$("td", $(this)).css("background", "red")",层次选择器:$("#p li")获取p下的所有li元素(后代,子,子的子....)
三者的区别是:
多条件选择器:在一个“”内有逗号区分,
相对选择器:2个元素分开 ,
层次选择器在一个“”内以空格区分。

 

一、Jquery常用的过滤选择器如下所示:
1、:first,选取第一个元素,比如$("p:first")选取第一个p元素
2、:last,选取最后一个元素,比如$("p:last")选取最后一个p元素
3、:not(选择器),选取不满足“选择器”条件的元素,比如$("p:not(.className)"),选取样式不是className的所有p元素
4、:even/:odd,选取索引为偶数/奇数的元素,比如$("p:even"),选取索引号为偶数的所有p元素
5、:eq(索引序号)/:gt(索引序号)/:lt(索引序号),选取等于索引号/大于索引号/小于索引号的元素,比如$("p:lt(3)"),选取索引号小于3的所有p元素
注意:
过滤选择器的混合使用时要记住后面的过滤条件是以前面的过滤选择器过滤后的重新序号为基础,即过滤的逐级性,比如
$("#t1 tr:gt(0):lt(3)").css("fontSize", "28"); //lt(3)是从gt(0)出的新序列中的序号,不要写成lt(4)
二,重点
多条件选择器
多条件选择器:$("p,p,span,menuitem"),同时选择p标签,p标签,和拥有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 $("#p li")获取p下的所有li元素(后代,子,子的子....)
2 $("#p > li")获取p下的直接li子元素//注意空格
3 $(".menuitem + p")获取样式名为menuitem之后的第一个p元素,不常用。
3 $(".menuitem ~ p")获取样式名为menuitem之后的所有的p元素,不常用。
细节区别在于(易错点):
多条件选择器:$("p,p,span,menuitem"),相对选择器:$("td", $(this)).css("background", "red")",层次选择器:$("#p li")获取p下的所有li元素(后代,子,子的子....)
三者的区别是:
多条件选择器:在一个“”内有逗号区分,
相对选择器:2个元素分开 ,
层次选择器在一个“”内以空格区分。

 

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-jquery 中多条件选择器,相对选择器,层次选择器的区别

全部内容,希望文章能够帮你解决

js实例教程-jquery 中多条件选择器,相对选择器,层次选择器的区别

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过