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.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</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.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</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.
