Open In App

How jQuery Selectors are Executed ?

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    </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:

jQuery execution

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”.

$('p').html($("second.list").text());

To know more about jQuery selectors you can follow this jQuery Selectors Complete Reference



Last Updated : 05 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads