Question

我一直在阅读最佳实践，我遇到过这个：

不要这样做：

$("#element .child").hide()

这样做：

$("#element").find('.child').hide()

现在我的问题是，如果我想多次隐藏/显示.child元素，我应该这样声明：

var spinner = $("#element").find('.child');
spinner.hide();

或者我只是一直打电话给$("#element").find('.child').hide()

Answer 1

我应该这样声明：

var spinner = $("#element").find('.child');
spinner.hide();

是。你应该这样做，因为它将消除多个dom查询的需要。

一个常见的最佳实践，因此您可以轻松跟踪哪些变量是jQuery对象，哪些不是jQuery对象的前缀是$

var $spinner = $("#element").find('.child');
$spinner.hide();

Answer 2

是的，创建spinner变量。这样每次都不会执行jQuery构造函数/函数，可以重用一次创建的对象。内存开销可以忽略不计。

Answer 3

这完全取决于你的问题，如果你需要在不同的函数中使用相同的元素用于多个目的，最好的选择是将它保存到变量中，如果你只需要一次处理事件链接就可以了

Answer 4

是的，你应该总是尽量保持你的选择，这意味着你应该将每个元素选择保存在你需要多一次的变量中。

尽量避免单个DOM操作。让我举个例子：

jQuery('#test').addClass('hide');
jQuery('#check').addClass('hide');

这会将“hide”类添加到ID为“#test”或“#check”的元素中。您也可以在元素集合上应用许多jQuery函数，如.addClass，这将减少开销（而不是例如使用jQuery.each（）迭代数组/集合。）

// Select both ids within one query
jQuery('#test, #check').addClass('hide');

如果你真的使用DOM，这可以带来巨大的性能提升，比如在选择框中添加选项。我在jsfiddle上提出了一些基准：http://jsfiddle.net/rrgNZ/2/