javascript - 我应该如何使用变量和 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 频繁更改的时候。使用先前选择的项目虽然高效，但如果添加或删除更多按钮，则可能会出现问题。诚然，如果您只是简单地在一个项目上链接几个操作，然后无论如何都放弃选择，这不是问题。

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