Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How jQuery Selectors are Executed ?

  • Last Updated : 10 Aug, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

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

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



 

Example:

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 the jQuery selectors you can follow this jQuery Selectors Complete Reference




My Personal Notes arrow_drop_up
Recommended Articles
Page :