How jQuery Selectors are Executed ?

Last Updated : 05 Jun, 2023

jQuery is a fast, lightweight JavaScript library designed to simplify HTML DOM tree traversal, manipulation, event handling, CSS animation, and Ajax. The main objective of jQuery is to provide an easy way to use JavaScript on your website to make it more interactive and attractive.

It is widely famous for its philosophy of “Write less, do more.” because it was developed for performing more tasks with few lines of code.jQuery is faster than JavaScript because it has less code as compared to JavaScript.

Syntax:

 $(selector).action()

$ - It is to define jQuery.
selector - It is to find HTML elements in an HTML page.
action() - It is the action to be performed on the selected elements.

jQuery selector: jQuery selectors are used to select the HTML element(s) and allow you to manipulate the HTML element(s) in the way you want. It selects the HTML elements on a variable parameter such as their name, classes, id, types, attributes, attribute values, etc.

Example: In this example, we will select an HTML element and manipulate the element using jQuery.

HTML

<!DOCTYPE html>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <style>
        body {
            color: green;
            text-align: center;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").hide();
            });
        });
    </script>
</head>
<body>
    <h1>GeeksForGeeks</h1>
    <p>paragraph one.</p>
    <p>paragraph two.</p>
    <button>Click me to hide paragraphs</button>
</body>
</html>

Output:

If dealing with more than two selectors in a row then your last selectors are always executed first.

For example, jQuery will first find all the elements with class “.list” and then it will select all the elements with the id “second”.