快取選擇器

每次在 jQuery 中使用選擇器時，都會搜尋 DOM 以查詢與查詢匹配的元素。過於頻繁或反覆這樣做會降低效能。如果你多次引用特定選擇器，則應將其新增到快取中，方法是將其分配給變數：

var nav = $('#navigation');
nav.show();

這將取代：

$('#navigation').show();

如果你的網站需要經常顯示/隱藏此元素，則快取此選擇器可能會有所幫助。如果有多個元素具有相同的選擇器，則變數將成為這些元素的陣列：

<div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
</div>

<script>
    var children = $('.child');
    var firstChildText = children[0].text();
    console.log(firstChildText); 
    
    // output: "Child 1"
</script>

注意： 元素在分配給變數時必須存在於 DOM 中。如果 DOM 中沒有帶有名為 child 的類的元素，那麼你將在該變數中儲存一個空陣列。

<div class="parent"></div>

<script>
    var parent   = $('.parent');
    var children = $('.child');
    console.log(children);

    // output: []

    parent.append('<div class="child">Child 1</div>');
    children = $('.child');
    console.log(children[0].text());

    // output: "Child 1"
</script>

在使用該選擇器新增/刪除 DOM 中的元素後，請記住將選擇器重新分配給變數。

注意 ：當快取選擇器時，許多開發人員將使用 $ 啟動變數名稱，以表示該變數是一個 jQuery 物件，如下所示：

var $nav = $('#navigation');
$nav.show();