引用使用jQuery的DOM元素的提示

Question

需要一些关于如何使用jQuery（DOM / Traversing / Selectors）引用元素的建议。 有时它足以在所需元素上设置id并执行此操作：

$('#elementID').hide();

但有时它只是无法使用，例如当处理n个元素的列表时，我看到有些人将一个类附加到列表的每个元素，如：

<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>

然后使用jQuery执行此操作：

$('.selectMe').hide();

其他一些做同样但有rel属性等等。

如果是这样的情景，其他一些人这样做是如此通用，这是可怕的：

<div id="MyID">
<span>Some Text Here</span><a href="http://jquery.com/">jQuery1</a>
</div>

如果我想将一个事件附加到锚点：

$('#MyID a').show();

就像假设DIV中只有一个链接一样。

你们认为这完全取决于场景，或者有一些好的做法可以做到这一点。

Answer 1

寻找最快的构造。 ID最快。 快速获取最小的上下文 - 您甚至可以在DIV上使用ID，然后从那里选择 - 尽可能避免完整的DOM搜索。

例如，搜索具有类而不仅仅是类的元素会更快。

其中一些不直观。查看StackOverflow中的一些示例，以了解哪些有效。

例如：

<div id='mydiv'>
<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
</div>

然后选择:(每个音符编辑）

$('#mydiv').children('a.selectMe').hide();

然后只在该上下文中搜索链接。

每个音符编辑：

选择语法有一些偏好，例如：

 $('#mydiv').children('a.selectMe').hide();
 $('#mydiv > a.selectMe').hide();

我需要进行一些研究，因为jQuery的文档在这里有点模棱两可： ＆QUOT; 父母＆gt; child返回：数组 匹配由“child”指定的所有子元素。 “父母”指定的元素的数量。 ＆QUOT; 和 ＆QUOT; children（expr）返回：jQuery 获取一组元素，其中包含每个匹配元素集的所有唯一直接子元素。 ＆QUOT;

在我的脑海中需要澄清的问题是，第一种形式是返回所有的孩子/孙子，还是只是直接的孩子，因为第二种形式表明是真的。 其中之一是“选择器”。形式和另一个在“遍历”下，对我来说是类似的功能任务，但不是完全相同的事情。

Answer 2

我想说这取决于具体情况，但像Mark Schultheiss所说，这有助于理解jQuery如何执行你的选择器来获取元素。

通过className选择而不给出任何上下文在IE中会变慢，因为它不支持 getElementsByClassName 。请参阅此文章 http://ejohn.org/blog/getelementsbyclassname-speed-comparison/。它有助于在元素名称前添加（例如 div.className ）或将搜索限制在较小的范围内，如下所示 - $（'。class'，'＃myDiv'）

属性选择器也是如此。 rel 属性滥用比 class 属性滥用更糟糕，因为在任何浏览器中都没有本机按属性搜索功能。