jQuery是一種用于簡化Javascript編程的流行庫，它提供了許多便捷的方法和選擇器，其中之一就是child選擇器。Child選擇器用于選取某個元素的直接子元素，這在處理DOM結構中非常有用。本文將通過實際應用案例詳細介紹jQuery中child選擇器的用法，并提供具體的代碼示例。

Child選擇器在jQuery中以“>”符號表示，是一種比較精準的選擇器，它只會選擇指定元素的直接子元素，而不會選擇孫子元素及更深層次的后代元素。這讓我們能夠更精確地定位目標元素，而不受其子孫元素的影響。

假設我們有以下HTML結構：

<div class="parent">
    <div class="child">子元素1</div>
    <div class="child">子元素2</div>
    <div class="grandchild">孫子元素1</div>
</div>

如果我們只想選擇class為parent的div元素下直接的class為child的div元素，我們可以使用Child選擇器：

$(".parent > .child").css("color", "red");

上述代碼將會選擇class為parent的div元素下的所有class為child的div元素，并將它們的文字顏色設為紅色。

假設我們有以下HTML結構：

<ul id="list">
    <li>第一項
        <ul>
            <li>子項1</li>
            <li>子項2</li>
        </ul>
    </li>
    <li>第二項</li>
</ul>

如果我們只想選擇id為list的ul元素的直接子li元素，我們可以這樣做：

$("#list > li").css("font-weight", "bold");

上述代碼將會選擇id為list的ul元素下的所有直接子li元素，并將它們的文字加粗顯示。

假設我們有以下HTML結構：

<table>
    <tr>
        <td>行1</td>
        <td>行1</td>
    </tr>
    <tr>
        <td>行2</td>
        <td>行2</td>
    </tr>
</table>

如果我們只想選擇表格的第一行的直接子元素td，我們可以這樣使用Child選擇器：

$("table > tr:first-child > td").css("background-color", "lightblue");

上述代碼將會選擇表格中第一行的所有直接子td元素，并將它們的背景色設為淺藍色。

通過上述實際應用案例和代碼示例，我們可以看到Child選擇器在處理DOM結構時的重要作用。它可以幫助我們更精確地選擇目標元素，避免選擇到不需要的子孫元素，提高代碼的效率和可讀性。在實際項目中，合理使用Child選擇器會讓我們的Javascript代碼更加簡潔和易于維護。