首页 > 程序开发 > web前端 > JavaScript >

系统学习jQuery.核心知识.局部.jQuery选择器.层次选择器

2013-12-28

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

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+div").css("background-color","#0F0");//③#two的下一个同辈元素 //$("#two~div").css("background-color","#0F0");//④#two所有的同辈元素,注意与前一个差别 //上述第3个方法,可用下列方法来代替 //$("#two").next("div").css("background-color","#0F0"); //上述第4个方法,可用下列方法来代替 //$("#two").nextAll("div").css("background-color","#0F0"); //nextAll方法相类似但有明显差别的是.siblings(),可以选择其所有的同辈元素 $("#two").siblings("div").css("background-color","#0F0"); }); </script>

id为one,class为one的div
class为mini的div
id为two,class为one,title为jason的div.
class为mini,title为Spanish的div
class为mini,title为Jason为div
Hello
class为mini的div
class为mini的div
class为mini的div
class为hide的div
包含input的type为"hidden"的div
正在执行动画的span元素

相关文章
最新文章
热点推荐