JQuery的类选择VS id选择(JQuery class selector vs id sele

2019-07-21 13:54发布

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

以上将选择所有的ID开始以“包”。 这意味着,差别主要是语义。 你应该选择哪个是最有意义的应用程序,它的开发方式。

见jQuery的属性选择页面 ,了解jQuery的选择的灵活性。 此页面上保持一个书签将阻止你永远不必再写像你的第二个示例代码。

哪个更好?

如果你有你的结构设置,让你有一个类,逻辑和正确地定义了相应的元素的集合,那么这就是你应该用什么来选择的。

同样,如果你已经不是给予特别命名的标识元素,并且没有一个描述性的类名附加表示要选择什么,然后使用该ID的选择。 性能差异就没有关注到几乎任何应用程序,你包括在内。



Answer 2:

显然,使用类的第一个代码是更清洁,更简洁,更好。

ID选择器是最快的,这是事实。但在这个时间和年龄,这其实并不重要。

所以不要烦恼那么多,性能(除非它是一个问题),只是用一个干净和维护。

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

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


Answer 3:

大家都知道id选择是更快,更好的..但在你的情况下..因为你选择每个ID 8次..这比较类seletor比较慢,你可以看到在这里

你的情况类选择是更好,更快,更易读...

注意:如果你需要添加在不久的将来,20多个按钮(100将是太多了)......和你选择去与id选择... phewwww! 就是喜欢,20个事件处理程序......;);)



Answer 4:

由于大多数所指出的,你用选择可能会对性能产生影响,但它往往是可以忽略不计,而更多的是一种风格和可读性问题。 底线,jQuery将创建用于所选择的每一个元素的唯一处理机,单独地通过ID或使用诸如类或属性选择一个多选方法。 就个人而言,我喜欢你的第一个例子,因为它会覆盖未来增添你的看法,而不需要记住添加另一个处理程序。



Answer 5:

仅仅通过ID来选择比引擎盖下,一般按类选择,因为jQuery的更快使用的getElementById这是大多数浏览器速度更快。 请参阅本文章以了解更多信息,因为它显示了许多其他的方式来改善与jQuery的性能。 但是,请记住选择性能是不是你要关心的唯一的事情。 附加到许多不必要的事件也可能导致性能问题。 为了减轻解决此问题,您可以使用委托请参阅本jQuery的文档,了解有关委托的更多信息。



文章来源: JQuery class selector vs id selector