JQuery类选择器vs id选择器

我有7个不同的按钮,点击时都执行相同的JavaScriptfunction。 我应该使用类选择器或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); }); 

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

您可以使用没有多个选择器的IDfilter:

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

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

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

哪个更好?

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

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

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

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

因此,不要因为性能而受到太多困扰(除非是一个问题)并且只使用干净且可维护的那个。

哦顺便问一下,你甚至不需要匿名function。 见下文,

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

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

你的案例中的类选择器更好,更快,更可读……

注意:如果你不得不在不久的将来增加20个按钮(100会太多)…..你选择使用id选择器… phewwww !!! 就像,20多个事件处理程序……;);)

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

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