Question

我在页面上有五个不同的输入控件，每个控件都有不同的id和名称，以及一个类。

<input id="txtName1" name="txtName1" class="jName" type="text" />
<br />
<input id="txtName2" name="txtName2" class="jName" type="text" />
<br />
<input id="txtName3" name="txtName3" class="jName" type="text" />
<br />
<input id="txtName4" name="txtName4" class="jName" type="text" />
<br />
<input id="txtName5" name="txtName5" class="jName" type="text" />

使用jquery通过注册模糊事件选择一组输入时，哪种方式更有效？我问的原因是因为我实际上在页面上有20个这样的输入控件，我希望jquery select尽可能快。

1）按标记ID选择：

$(document).on("blur", "input[id*='_txtName']", function ($e) {
  alert("blur event successful");
})

或

2）按班级选择：

$(document).on("blur", ".jName", function ($e) {
  alert("blur event successful");
})

修改我的目的是将blur事件挂钩到上面代码中的所有输入元素。抱歉，这里有困惑，伙计们。

Answer 1

尝试使用JSPerf对您的代码进行基准测试，您将获得答案。：）

http://jsperf.com/

但是，严肃地说，效率并不是唯一需要担心的问题，性能会受到许多其他因素的影响，包括页面上的元素和结构。

Answer 2

夫妻俩：

您在所有这些元素上使用相同的id值。不要这样做，它们应该是独一无二的。
在这种情况下，按类查找要快得多，因为类选择器比属性选择器快。

性能测试：http://jsperf.com/id-regex-vs-class

在该测试的HTML中，我确实将您的ID值更改为唯一。我也使用属性开头选择器而不是结尾。

Answer 3

你的子选择器性能并没有太大差别，因为它一次只能看一个单独的元素（触发事件的元素）。如果您真的想提高性能，请选择比文档更好的上下文元素。

Answer 4

如果你看一下这个小提琴：jsFiddle Demo

你会看到带有ID的 * 选择器肯定会让它慢一点。（另请注意，我选择了50,000次元素，这可能永远不会发生）。在这种情况下，类选择器肯定更快，但差别是微不足道的。

来自jQuery网站：http://api.jquery.com/attribute-contains-selector/

这是匹配的最慷慨的jQuery属性选择器反对价值。如果选择器的字符串，它将选择一个元素出现在元素的属性值中的任何位置。比较一下带属性的选择器包含单词选择器（例如 [attr~ =“word”]），在许多情况下更合适。

jquery按id还是按类选择？

4 个答案: