Difference between ID and Class Selector in jQuery
jQuery ID Selector: The #id selector specifies the id for an HTML element to be selected. It should not begin with a number and the id attribute must be unique within a document which means it can be used only one at a time.
Syntax:
$("#id")
- id is the element’s specific id.
Example: The following code demonstrates the jQuery ID selector.
HTML
<!DOCTYPE html> <html> <head> <script src= </script> <script> $(document).ready(function() { $("#paraID").css("background-color","red"); }); </script> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <p id="paraID"> jQuery #id selector is used for this p element. </p> </body> </html> |
Output:
jQuery class Selector: The .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements.
Syntax:
$(".class")
- class is the name of the class given for the HTML elements.
Example: The following code demonstrates the jQuery class selector.
HTML
<!DOCTYPE html> <html> <head> <script src= </script> <script> $(document).ready(function() { $(".pClass").css("background-color", "blue"); }); </script> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <p class="pClass"> jQuery.class selector is used for p element </p> <span class="pClass"> jQuery.class selector is used for span element </span> </body> </html> |
Output:
Differentiate the concepts of ID selector and class selector: The only difference between them is that “id” is unique in a page and it is applied to one HTML element while “class” selector can apply to multiple HTML elements.
.png)
