jQuery選擇器可以幫助我們快速地定位特定的HTML元素。下面我們來學習一下如何使用jQuery選擇器來定位特定的子元素。

//HTML代碼如下：
<div id="container">
<ul class="list">
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
</div>
//選擇器代碼如下：
//選擇所有的li元素
$("li")
//選擇ul元素下的所有li元素
$(".list li")
//選擇id為container元素下的所有li元素
$("#container li")

上述代碼演示了如何通過使用類選擇器和id選擇器來定位特定的子元素。我們也可以通過使用子選擇器來定位直接子元素。

//HTML代碼如下：
<div id="container">
<ul class="list">
<li>第一項</li>
<li>第二項</li>
<li>第三項
<ul class="sub-list">
<li>子項一</li>
<li>子項二</li>
</ul>
</li>
</ul>
</div>
//選擇器代碼如下：
//選擇id為container元素下的所有直接子元素ul
$("#container > ul")
//選擇id為container元素下的第三個li元素下的所有直接子元素ul
$("#container li:eq(2) > ul")

在上述代碼中，我們使用了子選擇器“>”來定位直接子元素。通過使用子選擇器和其他選擇器，我們可以更精確地定位特定的子元素。