jQuery类选择器与ID选择器

Question

我有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);
   });

每种方法的优缺点是什么？哪种更受欢迎。

- Chun ping Wang

---

看一下代码，告诉我们，你觉得哪个更好看。这并没有对错之分，这只是一个针对你个人的问题，以获取你自己的意见。 - BoltClock

如果您想的话，您也可以执行$("#package1Pdf, #package2Pdf, #package3Pdf, #package4Pdf").click()。 - Dom

通过id选择元素更快，但是当你只绑定一次类时代码更整洁。总的来说，我会选择代码可读性，除非你真的需要（很可能是轻微的）性能提升。 - Jack

回答你的问题实际上取决于你关心什么。你是关心性能、执行、可读性、可扩展性还是可维护性？ - iGanja

最初，这是复制/粘贴的，但我觉得它绝对值得一看：https://dev59.com/GHM_5IYBdhLWcg3wyWWt - Dom

@Dom 那个答案是在 Aug 5 '09 发布的，显然需要根据当前的浏览器标准进行修订。 - Selvakumar Arumugam

Answer 1

您可以使用仅包含单个选择器的ID过滤器：

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

上述代码将选择所有以“package”开头的ID。这意味着差异主要是语义上的。您应该选择对于您的应用程序和其开发方式最有意义的方法。

请查看jQuery属性选择器页面，了解jQuery选择的灵活性。将此页面添加到书签中，将避免您再次编写类似第二个示例的代码。

哪种方法更好？

如果您的结构设置得当，具有逻辑并正确定义了相应的元素集合，则应使用它进行选择。同样地，如果您为元素指定了特殊命名的ID，并且没有附加表示所需选择内容的描述性类名，则应使用ID选择。几乎任何应用程序都不会关心性能差异，包括您的应用程序。

- BinaryTox1n

Answer 2

显然，使用类的第一个代码更加清洁、整洁和优秀。

ID选择器是最快的，这是真的。但在今天，这并不重要。

所以，如果不是特别需要关注性能问题，请使用干净且易于维护的方法，不要担心太多关于性能。

另外，你甚至不需要匿名函数。请参见下面。

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

- Selvakumar Arumugam

Answer 3

众所周知，id选择器更快、更好。但在您的情况下，由于您选择了每个id 8次，与类选择器相比较慢，可以在此处看到。

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

注意：如果您将来必须添加20个以上的按钮（100个太多了）...并且您选择使用id选择器...哎呀！那就像是再加上20个事件处理程序......;) ;)

- bipen

Answer 4

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

- iGanja

Answer 5

通常情况下，仅通过ID选择比通过类选择更快，因为jQuery在底层使用的是getElementById，这在大多数浏览器中更快。有关与Jquery相关的其他提高性能的方式，请参阅this文章。但是，请记住，选择器性能不是您唯一需要关注的问题。连接到许多不必要的事件也可能创建性能问题。为了解决这个问题，您可以使用委托，请参见此jQuery documentation以获取有关委托的更多信息。

- nicholasnet