摘要:代码如下:<html xmlns="https://www.w3.org/1999/xhtml"> <head> <!-- 1.层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种 注:ancestor descendant与parent>child所选择的元素集合是不同的,前者的层次关系是祖先与后代,而后者是父子关系;另外,prev+next可以使用.next()代替,而prev~siblings可以使用nextAll()代替。 --> <title></title> <!-- 使用jQuery层次选择器选择元素:在页面中,设置4块<p>标记,其中第二块<p>中,添加1个<span>标记,在该<span>标记中又新增1个<span>标记,全部元素初始值均为隐藏,然后通过jQuery层次选择器,显示相应的页面标记。--> <script src="jquery-1.9.1.js" type="text/javascript"></script> <style type="text/css"> body{font-size:12px;text-align:center;} p,span{float:left;border:solid 1 px #ccc;margin:8px;display:none} .clsFraA{width:65px;height:65px} .clsFraP{width:45px;height:45px;background-color:#eee} .clsFraC{width:25px;height:25px;background-color:#ddd} </style> <script type="text/javascript"> $(function () { $('#pMid').css('display', 'block'); $('p span').css('display', 'block'); //显示p中所有的<span>标记 }) $(function () { $('#pMid').css('display', 'block'); $('p>span').css('display', 'block'); //显示<p>中子<span>标记 }) $(function () { $('#pMid+p').css('display', 'block'); //显示ID为pMid元素后的下一个<p> $('#pMid').next().css('display', 'block'); }) $(function () { $('#pMid ~ p').css('display', 'block'); //显示ID为pMid元素后的所有<p> $('#pMid').nextAll().css('display', 'block'); }) $(function () { $('#pMid').siblings('p').css('display','block'); //显示ID为pMid元素的所有相邻<p> }) /* siblings()方法与选择器prev~siblings 区别在于,前者获取全部的相邻元素,不分前后,而后者仅获取标记后面全部相邻元素,不能获取前面部分*/ </script> </head> <body> <p class="clsFraA"> Left</p> <p class="clsFraA" id="pMid"> <span class="clsFraP" id="Span1"> <span class="clsFraC" id="Span2"> </span> </span> </p> <p class="clsFraA"> Right_1</p> <p class="clsFraA"> Right_2</p> </body> </html>

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

js实例教程-jQuery层次选择器选择元素使用介绍

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

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

代码如下:

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<!--
1.层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素
jQuery选择器详解
根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种
注:ancestor descendant与parent>child所选择的元素集合是不同的,前者的层次关系是祖先与后代,而后者是父子关系;另外,prev+next可以使用.next()代替,而prev~siblings可以使用nextAll()代替。
-->
<title></title>
<!-- 使用jQuery层次选择器选择元素:在页面中,设置4块<p>标记,其中第二块<p>中,添加1个<span>标记,在该<span>标记中又新增1个<span>标记,全部元素初始值均为隐藏,然后通过jQuery层次选择器,显示相应的页面标记。-->
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:12px;text-align:center;}
p,span{float:left;border:solid 1 px #ccc;margin:8px;display:none}
.clsFraA{width:65px;height:65px}
.clsFraP{width:45px;height:45px;background-color:#eee}
.clsFraC{width:25px;height:25px;background-color:#ddd}
</style>
<script type="text/javascript">
$(function () {
$('#pMid').css('display', 'block');
$('p span').css('display', 'block'); //显示p中所有的<span>标记
})
$(function () {
$('#pMid').css('display', 'block');
$('p>span').css('display', 'block'); //显示<p>中子<span>标记
})
$(function () {
$('#pMid+p').css('display', 'block'); //显示ID为pMid元素后的下一个<p>
$('#pMid').next().css('display', 'block');
})
$(function () {
$('#pMid ~ p').css('display', 'block'); //显示ID为pMid元素后的所有<p>
$('#pMid').nextAll().css('display', 'block');
})
$(function () {
$('#pMid').siblings('p').css('display','block'); //显示ID为pMid元素的所有相邻<p>
})
/* siblings()方法与选择器prev~siblings 区别在于,前者获取全部的相邻元素,不分前后,而后者仅获取标记后面全部相邻元素,不能获取前面部分*/
</script>
</head>
<body>
<p class="clsFraA">
Left</p>
<p class="clsFraA" id="pMid">
<span class="clsFraP" id="Span1">
<span class="clsFraC" id="Span2"> </span>
</span>
</p>
<p class="clsFraA">
Right_1</p>
<p class="clsFraA">
Right_2</p>
</body>
</html>

代码如下:

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<!--
1.层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素
jQuery选择器详解
根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种
注:ancestor descendant与parent>child所选择的元素集合是不同的,前者的层次关系是祖先与后代,而后者是父子关系;另外,prev+next可以使用.next()代替,而prev~siblings可以使用nextAll()代替。
-->
<title></title>
<!-- 使用jQuery层次选择器选择元素:在页面中,设置4块<p>标记,其中第二块<p>中,添加1个<span>标记,在该<span>标记中又新增1个<span>标记,全部元素初始值均为隐藏,然后通过jQuery层次选择器,显示相应的页面标记。-->
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:12px;text-align:center;}
p,span{float:left;border:solid 1 px #ccc;margin:8px;display:none}
.clsFraA{width:65px;height:65px}
.clsFraP{width:45px;height:45px;background-color:#eee}
.clsFraC{width:25px;height:25px;background-color:#ddd}
</style>
<script type="text/javascript">
$(function () {
$('#pMid').css('display', 'block');
$('p span').css('display', 'block'); //显示p中所有的<span>标记
})
$(function () {
$('#pMid').css('display', 'block');
$('p>span').css('display', 'block'); //显示<p>中子<span>标记
})
$(function () {
$('#pMid+p').css('display', 'block'); //显示ID为pMid元素后的下一个<p>
$('#pMid').next().css('display', 'block');
})
$(function () {
$('#pMid ~ p').css('display', 'block'); //显示ID为pMid元素后的所有<p>
$('#pMid').nextAll().css('display', 'block');
})
$(function () {
$('#pMid').siblings('p').css('display','block'); //显示ID为pMid元素的所有相邻<p>
})
/* siblings()方法与选择器prev~siblings 区别在于,前者获取全部的相邻元素,不分前后,而后者仅获取标记后面全部相邻元素,不能获取前面部分*/
</script>
</head>
<body>
<p class="clsFraA">
Left</p>
<p class="clsFraA" id="pMid">
<span class="clsFraP" id="Span1">
<span class="clsFraC" id="Span2"> </span>
</span>
</p>
<p class="clsFraA">
Right_1</p>
<p class="clsFraA">
Right_2</p>
</body>
</html>

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

总结

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

js实例教程-jQuery层次选择器选择元素使用介绍

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

js实例教程-jQuery层次选择器选择元素使用介绍

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

80%的人都看过