我应该如何使用变量和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）时，它不会尝试在整个文档中查找元素，而只是尝试在任何范围内找到它们{ {1}}是。

不希望想要使用第二种模式的时间是您希望dom经常更改的时间。如果添加或删除更多按钮，则使用先前选择的项目虽然有效，但可能存在问题。当然，如果你只是简单地对一个项目进行一些操作，然后丢弃选择，这不是问题。

除此之外，谁真的想继续输入$（...）。这很尴尬。