选择一组元素的最有效方法

Most efficient way to select a set of elements?

本文关键字：有效 方法 元素 一组 选择      更新时间：2023-09-26

我一直使用类名来选择相关元素的集合。例如

<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，这应该很快。然而，向所有元素添加类，我想选择而不是样式似乎有点脏。当浏览器必须根据其样式表检查checkbox_set_1以确定我的复选框是否需要样式化时，不是有一些开销吗?另外，如果我没有很好地命名我的类，还会有意外样式化的风险。

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

还有许多其他属性可供选择，包括data-*属性，但我不认为浏览器优化查找id和class以外的任何东西，是吗?

不是有一些开销当浏览器必须检查checkbox_set_1根据它的样式表确定我的复选框是否需要样式?

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

如果你想给很多元素添加类，你可以使用选择器来更好地利用文档结构，例如在包含复选框的元素上设置一个类，并使用$('.CheckboxContainer :checked')。

这可能不如在您想要定位的每个元素上设置类那么有效，但在大多数情况下，差异并不明显。在实际出现问题之前，您不应该过多地关注高效选择器。毕竟，使用jQuery只是为了方便，而不是为了获得最佳性能。

是的，它的行为类似于" java中的标记接口"，您将发现Tom Butler的反模式描述。

如果你周围有一个表单，你可以使用元素(但你必须过滤其他元素)，这比调用像"getElementsByClassName"这样的方法要快。

例子

var lst = jQuery(document.foo.elements);
document.write(lst.length);
<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>

相关文章：