jQuery学习——入门jQuery选择器之层次选择器

古城微笑少年丶 2021-09-25 16:22 397阅读 0赞

今天说的是层次选择器，那层次选择器有哪几个？

$("ancestor descendant")：选取parent元素后所有的child元素
    $("parent > child")：选取parent元素后所有的直属child元素，何谓“直属”，也就是第一级的意思了
    $("prev + next")：prev和next是两个同级别的元素. 选中在prev元素后面的next元素
    $("prev ~ siblings"):选择prev后面的根据siblings过滤的元素。注:siblings是过滤器

这里要说下，由于最后2个用的比较少，一般会用其他选择器替代，请看下面：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>$("prev + next")等价于next()</code> 
     </div> 
     <div> 
      <code>$("prev ~ siblings")等价于nextAll()</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

具体用法会在后面说到。

===========================================================================

下面我们来仔细说说这4个层次选择器

【1】**$("ancestor descendant")：选取parent元素后所有的child元素**

ancestor的中文意思是“祖先”，descendant的中文意思是“后代”，就像css定义层级元素方式一样,只需要不同的元素之间有空格表示，前者父级，后者子级，以此类推，同时我们把它写成这样的形式，**$("Element1 Element2 Element3 Element...")**。

下面是实例：

<table> 
 <tbody> 
  <tr> 
   <td>$("body div")</td> 
   <td>选取body元素下所有的div元素。</td> 
  </tr> 
  <tr> 
   <td>$("ul li")</td> 
   <td>选取ul元素下所有的li元素。</td> 
  </tr> 
  <tr> 
   <td>$("#test div")</td> 
   <td>选取id为“test”的元素所包含的所有的div子元素</td> 
  </tr> 
  <tr> 
   <td>$("div#test div")</td> 
   <td>选取id为“test”的div所包含的所有的div子元素</td> 
  </tr> 
  <tr> 
   <td>$(".test div")</td> 
   <td>选取class为“test”的元素所包含的所有的div子元素</td> 
  </tr> 
  <tr> 
   <td>$("div.test span")</td> 
   <td>选取class为“test”的div所包含的所有的span子元素</td> 
  </tr> 
  <tr> 
   <td>$("span.test .demo")</td> 
   <td>选取class为“test”的span所包含的所有的class为demo的元素</td> 
  </tr> 
  <tr> 
   <td>$(".test .demo")</td> 
   <td>选取class为“test”的元素所包含的所有的class为demo的元素</td> 
  </tr> 
 </tbody> 
</table>

**【2】$("parent > child")：选取parent元素后所有的直属child元素，何谓“直属”，也就是第一级的意思了**

<table> 
 <tbody> 
  <tr> 
   <td>$("body &gt; div")</td> 
   <td>选取body元素下所有的第一级div元素。</td> 
  </tr> 
  <tr> 
   <td>$("ul &gt; li")</td> 
   <td>选取ul元素下所有的第一级li元素。</td> 
  </tr> 
  <tr> 
   <td>$("#test &gt; div")</td> 
   <td>选取id为“test”的元素所包含的所有的第一级div子元素</td> 
  </tr> 
  <tr> 
   <td>$("div#test &gt; div")</td> 
   <td>选取id为“test”的div所包含的所有的第一级div子元素</td> 
  </tr> 
  <tr> 
   <td>$(".test &gt; div")</td> 
   <td>选取class为“test”的元素所包含的所有的第一级div子元素</td> 
  </tr> 
  <tr> 
   <td>$("div.test &gt; span")</td> 
   <td>选取class为“test”的div所包含的所有的第一级span子元素</td> 
  </tr> 
  <tr> 
   <td>$("span.test &gt; .demo")</td> 
   <td>选取class为“test”的span所包含的所有的第一级class为demo的元素</td> 
  </tr> 
  <tr> 
   <td>$(".test &gt; .demo")</td> 
   <td>选取class为“test”的元素所包含的所有的第一级class为demo的元素</td> 
  </tr> 
 </tbody> 
</table>

【3】**$("prev + next")：prev和next是两个同级别的元素. 选中在prev元素后面的next元素.**

（1）$("div + p")表示选择紧跟在 div 元素后的 p 一个元素

（2）$("\#demo+img")选择id为demo元素后面的img对象.如果id为demo元素后面没有同级的img对象，那么这个$("\#demo+img").length=0

【4】**$("prev ~ siblings"):选择prev后面的根据siblings过滤的元素。注:siblings是过滤器。**

（1）$("div ~ p")表示匹配跟在 div 元素后的所有 p 元素

（2）$("\#demo~\[title\]")选择id为demo的元素后面所有带有title属性的元素，同样如果id为demo的元素后面没有一个带有title属性的元素，那么$("\#demo~\[title\]").length = 0

===========================================================================

这里说的是最后2个选择器的等价关系

$(".one + div")等价于$(".one").next("div")

$("\#prev ~ div")等价于$(".prev").nextAll("div")

===========================================================================

这里是实例，参考w3cfuns网站的

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> 
    <div>
      34 
    </div> 
    <div>
      35 
    </div> 
    <div>
      36 
    </div> 
    <div>
      37 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;!DOCTYPE html PUBLIC</code> 
      <code>"-//W3C//DTD XHTML 1.0 Transitional//EN"</code> 
      <code>"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;html xmlns=</code> 
      <code>"<a href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;head&gt;</code> 
     </div> 
     <div> 
      <code>&lt;meta http-equiv=</code> 
      <code>"Content-Type"</code> 
      <code>content=</code> 
      <code>"text/html; charset=utf-8"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&lt;title&gt;实例&lt;/title&gt;</code> 
     </div> 
     <div> 
      <code>&lt;script language=</code> 
      <code>"javascript"</code> 
      <code>src=</code> 
      <code>"<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" rel="nofollow">http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js</a>"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;&nbsp;</code> 
     </div> 
     <div> 
      <code>$(</code> 
      <code>function</code> 
      <code>(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>"#bt1"</code> 
      <code>).click(</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>"div &gt; p"</code> 
      <code>).text(</code> 
      <code>"我们都是div中的儿子，我们的名字叫做p还记得教程中的$(\"父亲 &gt; 儿子 &gt; ...\")这种关系吗？就是以这种方式选择的我$(\"div &gt; p\")"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>})</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>"#bt2"</code> 
      <code>).click(</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>"div + p"</code> 
      <code>).text(</code> 
      <code>"我是紧跟着div的p既然紧跟着，当然就得使用“+”紧密的连在一起嘛。以这种方式选择的我$(\"div + p\")"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>})</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>"#bt3"</code> 
      <code>).click(</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>"div ~ p"</code> 
      <code>).text(</code> 
      <code>"我们是div的跟随者，我们的名字叫做p要以这种方式选择的我$(\"div ~ p\")"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>})</code> 
     </div> 
     <div> 
      <code>})</code> 
     </div> 
     <div> 
      <code>&lt;/script&gt; </code> 
     </div> 
     <div> 
      <code>&lt;/head&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&lt;body&gt;</code> 
     </div> 
     <div> 
      <code>&lt;input id=</code> 
      <code>"bt1"</code> 
      <code>type=</code> 
      <code>"button"</code> 
      <code>value=</code> 
      <code>"获取div下所有的p标签"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&lt;input id=</code> 
      <code>"bt2"</code> 
      <code>type=</code> 
      <code>"button"</code> 
      <code>value=</code> 
      <code>"匹配紧跟在 div 元素后的 p 一个元素"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&lt;input id=</code> 
      <code>"bt3"</code> 
      <code>type=</code> 
      <code>"button"</code> 
      <code>value=</code> 
      <code>"匹配跟在 div 元素后的所有 p 元素"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&lt;div&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;p&gt;1&lt;/p&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;p&gt;2&lt;/p&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;p&gt;3&lt;/p&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;p&gt;4&lt;/p&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/div&gt;</code> 
     </div> 
     <div> 
      <code>&lt;p&gt;5&lt;/p&gt;</code> 
     </div> 
     <div> 
      <code>&lt;p&gt;6&lt;/p&gt;</code> 
     </div> 
     <div> 
      <code>&lt;p&gt;7&lt;/p&gt;</code> 
     </div> 
     <div> 
      <code>&lt;p&gt;8&lt;/p&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/body&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/html&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>