脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-系统学习jQuery.核心知识.局部.jQuery选择器.层次选择器，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

1.层次选择器介绍

前面基本选择器是直接通过DOM节点本身来进行选择的，这里的层次选择器则是基于DOM元素的层次关系获取特定的元素，例如相邻元素、同辈元素、子元素与后代元素，也就是迂回的方式来选择相应的元素。

2.详解每个层次选择器

<"https://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPGgxpjMu06BTw8q1wP08L2gxPgo8cHJlIGNsYXNzPQ=="brush:java;"> <script tyPE="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //$(".one .mini").css("background-color","#0F0");//①祖先后代选择器 //$(".one > .mini").css("background-color","#0F0");//②注意与前面的差别 //$("#two+p").css("background-color","#0F0");//③#two的下一个同辈元素 //$("#two~p").css("background-color","#0F0");//④#two所有的同辈元素，注意与前一个差别 //上述第3个方法，可用下列方法来代替 //$("#two").next("p").css("background-color","#0F0"); //上述第4个方法，可用下列方法来代替 //$("#two").nextAll("p").css("background-color","#0F0"); //nextAll方法相类似但有明显差别的是.siblings()，可以选择其所有的同辈元素 $("#two").siblings("p").css("background-color","#0F0"); }); </script>

id为one,class为one的p

class为mini的p

id为two，class为one，tITle为jason的p.

class为mini，title为Spanish的p

class为mini，title为Jason为p

Hello

class为mini的p

class为mini的p

class为mini的p

style的display为"none"的p.

class为hide的p

包含input的type为"hidden"的p

正在执行动画的span元素

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！&nbsp;js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-系统学习jQuery.核心知识.局部.jQuery选择器.层次选择器全部内容，希望文章能够帮你解决javascript代码实例教程-系统学习jQuery.核心知识.局部.jQuery选择器.层次选择器所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。