Jquery-层次选择器

层次选择器

1. 后代选择器

   后代选择器的语法是使用空格隔开（ancestor  descendant） 选取ancestor元素里的所有descendant（后代）元素 ， 返回元素集合，如：$("#menu span").css("color","red")选取#menu下所有的<span>元素

   <div id="menu">
   	<span>这里是第一个span标签</span>
   	<div class="menu">
   	        <span>这里是第二个span标签</span>
   	</div>
   	<span>这里是第三个span标签</span>
   </div>
   
   
   
   

   
   

2. 子选择器

   parent>child  选取parent元素下的child（子）元素， 返回元素集合，如：$("#menu>span")选取#menu下的子元素<span>

   <div id="menu">
        <span>这里是第一个span标签</span>
        <div class="menu">
              <span>这里是第二个span标签</span>
        </div>
       <span>这里是第三个span标签</span>
   </div>
   
   
   

   
   

   

   
   

3. 相邻元素选择器

   
   prev+next  选取紧邻prev元素之后的next元素， 返回元素集合，$("h2+dl")选取紧邻<h2>元素之后的同辈元素<dl>

   <div id="menu">
        <h2>只是标题标签</h2>
        <dl>
                <dt>自定义列表标题</dt>
                <dd>描述标题的信息</dd>
        </dl>
        <dl>
                <dt>自定义列表标题2</dt>
                <dd>描述标题的信息2</dd>
        </dl>
   </div>
   
   
   
   
   
   
   

   

4. 同辈元素选择器

   prev~siblings  选取prev元素之后的所有sibings(同辈)元素， 返回元素集合，$("h2~dl")选取<h2>元素之后所有的同辈元素<dl>
   

   <div id="menu">
        <h2>只是标题标签</h2>
        <dl>
                <dt>自定义列表标题</dt>
                <dd>描述标题的信息</dd>
        </dl>
        <dl>
                <dt>自定义列表标题2</dt>
                <dd>描述标题的信息2</dd>
        </dl>
   </div>