0

我在一个页面上有五个不同的输入控件，每个控件都有不同的 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");
})

编辑： 我的意图是将模糊事件连接到上面代码中的所有输入元素。抱歉，这里的混乱，伙计们。

4

4 回答 4

1

尝试使用 JSPerf 对您的代码进行基准测试，您将得到答案。:)

http://jsperf.com/

不过说真的，效率并不是唯一需要担心的事情，性能还会受到许多其他考虑因素的影响，包括页面上的元素和结构。

于 2012-10-17T17:51:18.197 回答
0

几件事：

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

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

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

于 2012-10-17T17:54:39.187 回答
0

考虑到它一次只会查看一个元素（触发事件的元素），您的子选择器性能并没有太大区别。如果您真的想提高性能，请选择比文档更好的上下文元素。

于 2012-10-17T18:03:11.527 回答
0

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

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

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

这是匹配值的最慷慨的 jQuery 属性选择器。如果选择器的字符串出现在元素属性值中的任何位置，它将选择一个元素。将此选择器与 Attribute Contains Word 选择器（例如 [attr~="word"]）进行比较，后者在许多情况下更合适。

于 2012-10-17T18:05:48.090 回答