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.

Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram