JQuery class selector vs id selector

问题

I have 7 different buttons that all perform the same javascript function on click. should i use class selector or id selector.

$("input.printing").on("click", function(event) {
     printPdf(event);
});

or

   $("#package1Pdf").click(function(event) {
         printPdf(event);
   });
$("#package2Pdf").click(function(event) {
         printPdf(event);
   });
$("#package3Pdf").click(function(event) {
         printPdf(event);
   });
$("#package4Pdf").click(function(event) {
         printPdf(event);
   });

What are the advantage and disadvantage of each? Which is more preferred.

回答1:

You can use an ID filter without multiple selectors:

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

The above will select all id's starting with "package". This means the difference is mostly semantic. You should choose that which is most meaningful to your application and the way it was developed.

See the jQuery attribute selectors page to learn about the flexibility of jQuery selection. Keeping a bookmark on this page will prevent you from ever having to write code like your second example again.

Which is better?

If you have your structure set up so that you have a class that logically and correctly defines the appropriate set of elements, then that is what you should use to select on.

Likewise, if you have instead given elements specially named IDs and do not have a descriptive class name attached that represents what you want to select, then use the ID selection. The performance difference will be of no concern to almost any application, yours included.

回答2:

Obviously your first code using class is much cleaner, neater and better.

ID selector are the fastest, which is true.. but at this time and age, it doesn't really matter.

So don't get bothered so much with performance(unless it is a concern) and just use the one that is clean and maintainable.

oh btw, you don't even need that anonymous function. See below,

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

回答3:

as we all know id selector is faster and better .. but in you case.. since you are selecting each id 8 times.. which compare to the class seletor is slower as you can see here

class selector in your case is better, faster, and more readable...

note: what if you have to add 20 more buttons in the near future (100 would be too much).....and you choose to go with id selector... phewwww!!! that is like, 20 more event handler...... ;) ;)

回答4:

As most have stated, the selector you use can have an effect on performance, but it is often negligible, and more a matter of style and readability. Bottom line, jQuery will create a unique handler for every element that is selected, either individually by id or using a multi-select method like a class or attribute selector. Personally, I like your first example, as it will cover future additions to your view without need to remember to add another handler.

回答5:

Selecting just by Id is faster than selecting by class in general since jQuery under the hood uses getElementById which is faster in most browsers. Please refer to this article for more information as it shows many other ways to improve performance related to Jquery. However, please remember selector performance is not the only thing that you have to be concerned about. Attaching to many unnecessary event could also create performance issue. To mitigate around this problem you could use delegate please see this jQuery documentation for more information regarding delegate.

来源：https://stackoverflow.com/questions/15393928/jquery-class-selector-vs-id-selector