jQuery selectors' functions select a matching element from HTML DOM.
In simple words, jQuery selectors are used for selecting HTML elements, and after selecting the elements, you can perform various operations on them.
- JQuery selectors always start with a dollar sign called the factory function
$(). - jQuery Selector is a function used to select and manipulate HTML DOM elements.
- jQuery Selectors works with HTML DOM elements like name, id, classes, types, attributes, values of attributes, and many more.
Mainly Used jQuery Selectors
| Selector | Type | Example | Description |
|---|---|---|---|
$("p")
| Element Selector |
| Hides all HTML <p> tags.
|
$(".article")
| Class Selector |
| Hides all elements with class="article".
|
$("#menu")
| ID Selector |
| Hides the element with id="menu".
|
jQuery Selector Example
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery with HTML Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$("body").css("background", "pink");
});
</script>
<p>This is sample text.</p>
</body>
</html>In the above example, the body color of the web page will become pink when the document is ready.