Selectors are the way we tell jQuery which elements we want to work on. You can view the full list of jQuery selectors on their official documentation pages.


Syntax:

$("selector")

$ is jQuery symbol 


Some of the most commonly used selectors.

  • $("*") - Wildcard: selects every element on the page.
  • $(this) - Current: selects the current element being operated on within a function.
  • $("p") - Tag: selects every instance of the <p> tag.
  • $(".example") - Class: selects every element that has the example class applied to it.
  • $("#example") - Id: selects a single instance of the unique example id.
  • $("[type='text']") - Attribute: selects any element with text applied to the type attribute.
  • $("p:first-of-type") - Pseudo Element: selects the first <p>.


#example.html

<!doctype html>
<html lang="en">
    <head>
        <title>jQuery Tutorial</title>
    </head>

    <body>
        
        <button id="click-me"></button>
        <div id="i-am-div"></div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script>

            //write your query code  here
            $(document).ready(function() {
                $("#click-me").click(function() {
                    $("#i-am-div").html("Hello, World!");
                });
            });

        </script>
    </body>

</html>

here I am using ID selector and click event