缓存选择器

每次在 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();