我应该如何使用变量和 jQuery Dom 导航？

Question

我只是想知道哪种是使用变量浏览 Dom 的正确或最有效的方法。

例如，我可以连接选择器

var $container = '.my-container';
$($container).addClass('hidden');
$($container + ' .button').on('click', function(){
    //something here
});

或者我应该使用 jQuery 遍历函数

var $container = $('.my-container');
$container.addClass('hidden');
$container.children('.button').on('click', function(){
    //something here
});

是否有不同的方法（最好的方法之一），或者您可以在不同的时间使用它们吗？

Answer 1

$ 通常仅在处理实际 jquery 对象时使用。你通常不应该在任何东西前加前缀，除非它真的来自 jquery。

但除此之外，就性能而言，您的第二段代码会更快。我在这里做了一个jsperf的例子：http://jsperf.com/test-jquery-select

第二段代码速度更快的原因是（如果我没记错的话）jquery 缓存选择，然后在该选择上执行的任何操作都在范围内。当您使用 .find（这确实是您在代码中的意思，而不是 .children）时，它不会尝试在整个文档中查找元素，它只会尝试在任何 my-container是。

您不想使用第二个模式的时候是您希望 dom 经常更改的时候。使用先前选择的项目虽然高效，但如果添加或删除更多按钮，则可能会出现问题。当然，如果您只是简单地在一个项目上链接一些操作，然后无论如何都放弃选择，这不是问题。

除此之外，谁真的想连续输入 $(...)。尴尬了。

How should I use Variables and jQuery Dom navigation?