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

我只是想知道哪个是正确的或最有效的方式浏览Dom使用变量。我应该如何使用变量和jQuery 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 
});

是否有不同的做法，是一个最好的，或者你可以在不同的使用它们次？

来源

2015-02-09 Adam Hughes

第二个显然更清洁。我会坚持下去。但请注意，它们并不等同。第二个应该是'.find（'。button'）'，如果你想让它产生与第一个相同的结果。或者如果你想要直接的孩子，那么第一个应该是'$ container +'> .button''。 – dfsq 2015-02-09 10:14:59

'$'前缀用于表示一个变量包含一个jQuery对象 - 因此在这方面，第二个示例更加标准，除了由于缓存的选择器而更易于阅读和更好的练习。 – 2015-02-09 10:22:11

$通常只在使用实际的jquery对象时才使用。你通常不应该用任何前缀，除非它真的来自jquery。

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

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

当你不会想要使用的第二种模式是当你期望经常改变dom。如果添加或删除更多按钮，则使用以前的项目选择虽然效率高，但可能会成为问题。当然，如果你只是简单地对一个物品进行一些操作，然后放弃选择，这不是问题。

除了所有这些，谁真的想连续键入$（...）。这很尴尬。

来源

2015-02-09 10:30:35 Stephen

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

回答

相关问题