JQuery类选择器vs id选择器

我有 7个不同的按钮，所有按钮在点击时都执行相同的javascript功能。我应该使用类选择器还是id选择器。JQuery类选择器vs 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); 
    });

各有什么优势和劣势？哪一个更优选。

来源

2013-03-13 Chun ping Wang

看看代码并告诉我们，说实话，看起来更好看。没有正确或错误的答案，这只是一个个人问题，让你对此有自己的看法。 – BoltClock 2013-03-13 18:53:02

如果你愿意，你也可以做'$（“＃package1Pdf，＃package2Pdf，＃package3Pdf，＃package4Pdf”）。click（）' – Dom 2013-03-13 18:53:35

它更快的选择id的元素，但代码更简洁该功能一次按类。一般情况下，除非您真的需要（可能*轻微*）性能提升，否则将使用代码可读性。 – Jack 2013-03-13 18:53:39

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

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

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

查看jQuery attribute selectors page了解jQuery选择的灵活性。在此页面上保存书签将会阻止您再次编写类似第二个示例的代码。

哪个更好？

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

同样，如果您有给定的元素专门命名为ID并且没有附加描述性类名称代表您想要选择的内容，则使用ID选择。 性能差异几乎不涉及任何应用程序，包括您的。

来源

2013-03-13 18:54:00 BinaryTox1n

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

ID选择器是最快的，这是真的..但在这个时代，它并不重要。因此，不要为性能而烦恼（除非它是一个问题），而只是使用干净和可维护的。

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

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

来源

2013-03-13 19:03:45

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

来源

2013-03-13 19:04:39 iGanja

仅仅通过Id选择比通过类选择要快一些，因为引擎下的jQuery使用getElementById，这在大多数浏览器中都更快。有关更多信息，请参阅this文章，因为它显示了许多其他方法来提高与Jquery相关的性能。但是，请记住，选择器的性能不是唯一需要关注的事情。附加许多不必要的事件也可能导致性能问题。为了缓解这个问题，你可以使用委托，请参阅这个jQuery documentation关于委托的更多信息。

来源

2013-03-13 19:08:49 nicholasnet

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

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

注：如果你需要添加在不久的将来，20多个按钮（100将是太多了）.....你选择去与id选择器... phewwww！也就是说，20个事件处理程序......;）;）

来源

2013-03-13 19:09:16 bipen

JQuery类选择器vs id选择器

回答

相关问题