使用jQuery引用DOM元素的提示

我想说这取决于具体情况,但正如Mark Schultheis所说,这有助于理解jQuery如何执行选择器来获取元素。

getElementsByClassName http://ejohn.org/blog/getelementsbyclassname-speed-comparison/ . 它有助于在元素名称前面加上前缀(例如 div.className )或者将搜索范围限制在更小的范围内- $('.class', '#myDiv')

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

寻找最快的构造。 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的文档在这里有点模棱两可: " 匹配由“父”指定的元素的“子”指定的所有子元素。 " 获取一组元素,其中包含每个匹配元素集的所有唯一直接子元素。 "

其中一个是“选择器”窗体,另一个是“遍历”窗体,对我来说,这是类似的功能任务,但并不完全相同。