Question

我总是使用类名来选择相关元素集。 e.g。

<input type="checkbox" value="1" class="checkbox_set_1">
<input type="checkbox" value="2" class="checkbox_set_1">
<input type="checkbox" value="3" class="checkbox_set_1">

$('.checkbox_set_1').filter(':checked') ...

我之所以这样做，是因为我知道jQuery可以委托给document.getElementsByClassName，这应该非常快。但是，为我想要选择而不是 style 的所有元素添加类似乎有点脏。当浏览器必须针对其样式表检查checkbox_set_1以确定我的复选框是否需要样式时，是否存在一些开销？另外，如果我没有很好地命名我的课程，那么存在一些意外造型的风险。

是否有更好的方法来选择不依赖于样式属性的元素，而不放弃性能优势？或者更具体地说，是否存在除class（用于样式）和id（仅限于单个元素）以外的属性，浏览器将优化查询？

还有许多其他属性可供选择，包括data-*属性，但我认为浏览器不会优化除id和class以外的任何内容的查找，是吗？ / p>

Answer 1

浏览器必须检查checkbox_set_1时是否存在一些开销针对其样式表确定我的复选框是否需要样式化？

样式不是那样确定的。浏览器不会获取元素的每个属性并查找适用的规则，而是查看规则一次并确定哪些适用于元素。

如果您担心向很多元素添加类，可以使用更好地利用文档结构的选择器，例如在包含复选框的元素上设置类，并使用$('.CheckboxContainer :checked')之类的内容。

这可能不如在您想要定位的每个元素上设置类那样有效，但在大多数情况下，差异远非显着。在这是一个实际问题之前，你不应该过分关注有效的选择器。毕竟，你使用的是jQuery，因为它很方便，而不是为了获得最佳性能。

Answer 2

是的，它对java＆＃34; Marker-Interface中的＆＃34;标记行为有所帮助。你会找到anti-pattern-description of Tom Butler。

如果您有表格，可以使用elements（但必须过滤其他元素）这比调用＆＃34; getElementsByClassName＆＃34;等方法更快。

实施例

＆＃13;

var lst = jQuery(document.foo.elements);
document.write(lst.length);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="foo">
  <input type="checkbox" value="1" />
  <input type="checkbox" value="2" />
  <input type="checkbox" value="3" />
  <input type="checkbox" value="4" form="bar" />
</form>

＆＃13;

选择一组元素的最有效方法是什么？

2 个答案: