JQuery 类选择器与 id 选择器答案

【问题标题】：JQuery class selector vs id selectorJQuery 类选择器与 id 选择器
【发布时间】：2013-03-01 21:30:41
【问题描述】：

我有 7 个不同的按钮在点击时都执行相同的 javascript 功能。我应该使用类选择器还是 id 选择器。

$("input.printing").on("click", function(event) {
     printPdf(event);
});

或

   $("#package1Pdf").click(function(event) {
         printPdf(event);
   });
$("#package2Pdf").click(function(event) {
         printPdf(event);
   });
$("#package3Pdf").click(function(event) {
         printPdf(event);
   });
$("#package4Pdf").click(function(event) {
         printPdf(event);
   });

各自的优点和缺点是什么？哪个更优选。

【问题讨论】：

查看代码并告诉我们，老实说，这对您来说更好看。没有正确或错误的答案，这只是向您提出的个人问题，以便您对此发表自己的看法。
如果你愿意，你也可以$("#package1Pdf, #package2Pdf, #package3Pdf, #package4Pdf").click()
按id选择元素比较快，但是按类绑定一次，代码更简洁。一般来说，除非你真的需要（很可能轻微）性能提升，否则我会选择代码可读性。
回答你的问题真的取决于你关心的是什么。您是否关心性能、执行、可读性、可扩展性、可维护性？
最初，这是复制/粘贴的，但我觉得它值得一看：stackoverflow.com/questions/1230636/…

标签： jquery performance jquery-selectors code-maintainability

【解决方案1】：

您可以使用没有多个选择器的 ID 过滤器：

$('[id^="package"]').click(printPdf);

上面将选择所有以“package”开头的id。这意味着差异主要是语义上的。您应该选择对您的应用程序及其开发方式最有意义的选项。

请参阅jQuery attribute selectors page 以了解 jQuery 选择的灵活性。在此页面上保留一个书签可以防止您再次编写类似于第二个示例的代码。

哪个更好？

如果您设置了结构，以便您拥有一个逻辑正确地定义适当元素集的类，那么您应该使用它来选择。

同样，如果您给元素指定了特别命名的 ID，并且没有附加描述性类名称来表示您要选择的内容，则使用 ID 选择。 几乎所有应用程序都不会考虑性能差异，包括您的应用程序。

【讨论】：

【解决方案2】：

显然，您使用类的第一个代码更干净、更整洁、更好。

ID 选择器是最快的，这是真的.. 但在这个时代，这并不重要。

所以不要太在意性能（除非这是一个问题），只需使用干净且可维护的那个。

哦，顺便说一句，你甚至不需要那个匿名函数。见下文，

$("input.printing").on("click", printPdf);

【讨论】：

【解决方案3】：

我们都知道 id 选择器更快更好.. 但在你的情况下.. 因为你选择每个 id 8 次.. 与类选择器相比更慢，你可以看到 here

在您的情况下，类选择器更好、更快、更具可读性...

注意：如果您必须在不久的将来再添加 20 个按钮（100 个太多了）......并且您选择使用 id 选择器...... ！！也就是说，还有 20 个事件处理程序...... ;) ;)

【讨论】：

【解决方案4】：

正如大多数人所说，您使用的选择器会对性能产生影响，但它通常可以忽略不计，更多的是样式和可读性问题。最重要的是，jQuery 将为每个被选择的元素创建一个唯一的处理程序，可以通过 id 单独选择，也可以使用类或属性选择器等多选方法。就个人而言，我喜欢您的第一个示例，因为它将涵盖您视图的未来添加内容，而无需记住添加另一个处理程序。

【讨论】：

【解决方案5】：

一般来说，仅按 Id 选择比按类选择要快，因为 jQuery 在后台使用 getElementById，这在大多数浏览器中更快。有关更多信息，请参阅this 文章，因为它显示了许多其他提高与 Jquery 相关的性能的方法。但是，请记住选择器性能并不是您唯一需要关心的事情。附加到许多不必要的事件也可能会产生性能问题。为了缓解这个问题，您可以使用委托，请参阅此 jQuery documentation 以获取有关委托的更多信息。

【讨论】：