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

我只是想知道使用变量在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
});

---

是否有不同的方法，是最好的方法，还是可以在不同的时间使用

通常只在处理实际的jquery对象时使用$。通常不应该在任何东西前面加上这个前缀，除非它确实来自jquery

但是，从性能角度来看，除了这一点之外，您的第二位代码将会更快。我在这里举了一个jsperf示例：

第二位代码速度更快的原因是（如果我没记错的话）jquery缓存了选择，然后对该选择执行的任何操作都有作用域。当您使用

.find

（这是您在代码中真正的意思，而不是

.children

）时，它不会尝试在整个文档中查找元素，而是尝试在

我的容器

的范围内查找它们

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

---

除此之外，谁真的想连续输入$（…）。很尴尬。

第二个显然更干净。我会坚持下去。但请注意，它们并不等同。第二个应该是

.find（'.button'）

，如果希望它产生与第一个相同的结果。或者，如果您想要直接子对象，那么第一个应该是

$container+'>.button'

。

$

前缀用于表示变量包含jQuery对象-因此，在这方面，您的第二个示例更标准，而且由于缓存的选择器更易于阅读和更好地实践。