开发者学堂课程【jQuery 开发教程：jQuery_层级】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4282
jQuery_层级
1、Child selector
("parent > child")子元素选择器
描述∶选择所有指定“parent”元素中指定的"child"的直接子元素。
语法: jQuery( "parent > child" )
注∶
parent任何有效的选择器。
child:用来筛选子元素的选择器。
举例：
<body> <ul class="topnav"> <li>li1</li> <li>li2 <ul> <li>next l1</li> <li>next l2</li> <li>next l3</li> </ul> < / li> <li>li3</li> </ul> < / body>
此时实现为<ul class="topnav">标签所有的直接的子元素添加边框：
引入jQuery：<script src="jquery-2.2.1.min.js">< /script> 写入 js： <script> $ (function( ) i $ ( ".topnav>li" ).css ( "border" , "1px solid red" );) < /script>
注意：<ur>标签里的子元素不属于<ul class="topnav">标签所有的直接的子元素。
此时执行效果如下：
2、descendant selector
(后代选择器)
描述∶选择给定的祖先元素的所有后代元素。
语法:jQuery( "ancestor descendant" )
注:
ancestor:任何有效的选择器。
descendant:一个用来筛选后代元素的选择器。
比如：$ ( ".topnav>li" ).css ( "border" , "1px solid red" );)
这样写的话<ur>里的子元素就能被选择到：
$ ( ".topnav li").css ( "border" , "1px solid red" ) ;
此时执行结果如下：
3、next adjacent selector
("prev + next")相邻选择器
描述∶选择所有紧接在“prev”元素后的“next”元素
语法:jQuery( "prev + next" )
注∶
prev.任何有效的选择器。
next:用于筛选紧跟在"prev”后面的元素的选择器。
举例：
选择所有紧跟在<li>标签后的<li>标签：
将 $( ".topnav li").css ( "border" , "1px solid red" ); 修改为：
$ ( "li+li" ).css ( "border" , "1px solid red");
此时执行结果为：
4、Next Siblings Selector
("prev ~ siblings")
描述∶匹配“prev”元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器。
语法:jQuery( "prev ~ siblings" )
注︰
prev.任何有效的选择器
iblings:一个选择器来过滤第一选择器以后的兄弟元素。
举例：写入<span><div>标签： <span id="prev">span1< / span> <div>div1s/ div> <div>div2</div> <div>div3 <div>div4< /div> < / div> 查找 id=“prev”后所有<div>标签，要求必须时兄弟关系的： <script> $ ( function()i $ ("#prev~div").css ( "border" , "1px solid red" ); })
这里，div4 是不会被选择上的因为它的父级元素是 div3
此时执行结果如下：
(prev + next)和(prev ~ siblings)之间最值得注意的不同点是他们各自的可及之范围。前者只达到紧随的同级元素，后者扩展了该达到跟随其的所有同级元素。
