jQuery Selectors

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 
$("p").hide();
Hides all HTML <p> tags.
$(".article") Class Selector 
$(".article").hide();
Hides all elements with class="article".
$("#menu") ID Selector 
$("#menu").hide();
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.