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

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

Answer 1

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

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

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

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

哪个更好？

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

同样，如果您已经给出了特别命名的ID元素，并且没有附加描述您要选择的内容的描述性类名，那么请使用ID选择。 几乎所有应用程序都不会影响性能差异，包括在内。

Answer 2

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

ID选择器是最快的，这是真的..但在这个时间和年龄，它并不重要。

所以不要因为性能而受到太多打扰（除非是关注点）并且只使用干净且可维护的那个。

哦，顺便说一下，你甚至不需要匿名功能。见下文，

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

Answer 3

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

你案例中的

类选择器更好，更快，更具可读性......

注意：如果你不得不在不久的将来再添加20个按钮（100会太多）.....你选择使用id选择器... phewwww！！就像，20多个事件处理程序......;）;）

Answer 4

正如大多数人所说，你使用的选择器会影响性能，但它通常可以忽略不计，更多的是风格和可读性问题。换句话说，jQuery将为所选的每个元素创建一个唯一的处理程序，可以单独通过id或使用多选方法（如类或属性选择器）。就个人而言，我喜欢你的第一个例子，因为它将涵盖你视图的未来添加，而不需要记住添加另一个处理程序。

Answer 5

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

JQuery类选择器vs id选择器

5 个答案: