Open In App

jQuery | Selectors and Event Methods

Last Updated : 18 May, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

jQuery is a powerful JavaScript library. It is more powerful than the JavaScript. The codes of jQuery are more precise, shorter and simpler than the standard JavaScript codes. It can perform a variety of functions.
In this article, we will learn about jQuery selectors, jQuery Event methods and some useful methods.

    jQuery selectors:

    jQuery selectors are used to select the HTML element(s) and allows 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. All selectors in jQuery are selected using a special sign i.e. dollar sign and parentheses:

     $("selector-name")
    • Elements Selector :
      The elements selector selects the element on the basis of its name.
      Example :
      In this example, when the user clicks on button, the <h1> element gets hidden.
      Code :-




      <!DOCTYPE html>
      <html>
        
      <head>
      </script>
      </head>
        
      <body>
          <h1>Welcome to Geeks for Geeks !</h1>
          <h2>This is Web Technology section </h2>
          <br/>
          <button>Hide</button>
          <script type="text/javascript">
              $("button").click(function() {
                  $("h1").hide();
              });
          </script>
      </body>
        
      </html>

      
      

      Output:
      Before clicking on Hide button:

      After clicking on Hide button:

    • Id Selector :
      The id selector selects the element on the basis of its id.
      Example :
      In this example, when the user double clicks on button, the element with id = “gfg” gets hidden.
      Code:-




      <!DOCTYPE html>
      <html>
        
      <head>
      </script>
      </head>
        
      <body>
          <p id="gfg">Welcome to Geeks for Geeks !</p>
          <p id="GFG">Computer Science Portal </p>
          <br/>
          <button>Hide</button>
          <script type="text/javascript">
              $("button").dblclick(function() {
                  $("#gfg").hide();
              });
          </script>
      </body>
        
      </html>

      
      

      Output:
      Before double clicking on Hide button:

      After double clicking on Hide button:

    • Class Selector :
      The class selector selects the element on the basis of its class.
      Example :
      In this example, when the user clicks on button, the element with class = “GFG” gets hidden.
      Code :-




      <!DOCTYPE html>
      <html>
        
      <head>
      </script>
      </head>
        
      <body>
          <p class="gfg">Welcome to Geeks for Geeks !</p>
          <p class="GFG">Explore More about GfG </p>
          <br/>
          <button>Hide</button>
          <script type="text/javascript">
              $("button").click(function() {
                  $(".GFG").hide();
              });
          </script>
      </body>
        
      </html>

      
      

      Output:
      Before clicking on Hide button:

      After clicking on Hide button:

    jQuery Event methods:

    Event refers to the actions performed by the site visitor during their interactivity with the website (or webpage).There can be various types of events such as

    1. User clicks on the button.
    2. User moves mouse pointer over an image.
    3. User pressed any key from keyboard, etc.

    Some of the events methods are given

    Method Name Description
    click() The click() method contains an function for event handling which gets invoked when the user clicks on the particular HTML element.
    dblclick() The dblclick() method contains an function for event handling which gets invoked when the user double clicks on the particular HTML element.
    mouseenter() The mouseenter() method contains an function for event handling which gets invoked when mouse pointer enters the particular HTML element.
    mouseleave() The mouseleave() method contains an function for event handling which gets invoked when mouse pointer is removed from the particular HTML element which was selected earlier.
    mousedown() The mousedown() method contains an function for event handling which gets invoked when mouse left, right or middle button is pressed while the mouse pointer is over the HTML element.
    mouseup() The mouseup() method contains an function for event handling which gets invoked when mouse left, right or middle button is released while the mouse pointer is over the HTML element.
    hover() The hover() method contains an function for event handling which gets invoked when mouse pointer enter and leaves the HTML element. It is a combination of mouseenter() and mouseleave() methods.

    Get and Set Methods:

    jQuery has various methods to get the value of an attribute and set the attribute to specific value.There methods are powerful enough to the change the website content and its style. Some of them are:

    1. text() – This method is used get or set the text content of selected HTML element.
    2. html() – This method is used get or set the content of selected elements (including HTML elements).
    3. val() – This method is used get or set the value of various form fields in the webpage.
    4. attr() – This method is used get or set the value of various attributes in the webpage.
    5. css() – This method is used get or set the value of various CSS properties in the webpage.
      1. Example :
        Code :-




        <!DOCTYPE html>
        <html>
          
        <head>
        </script>
            <style type="text/css">
                #e5 {
                    width: 100px;
                    height: 100px;
                    border-radius: 0px;
                    background-color: aqua;
                }
            </style>
        </head>
          
        <body>
            <p id="e1">Welcome.</p>
            <p id="e2">Learn and Explore</p>
            <p>
                <input type="text" id="e3" value="jQuery is powerful!" />
            </p>
            <p id="e4" align="left">Geeks for Geeks</p>
            <p>
                <div id="e5"></div>
            </p>
            <button id="gfg1">Change Text</button>
            <button id="gfg2">Change HTML</button>
            <button id="gfg3">Change Value</button>
            <button id="gfg4">Change Alignment</button>
            <button id="gfg5">Change Shape</button>
            <script type="text/javascript">
                $("#gfg1").click(function() {
                    $("#e1").text("Geeks for Geeks");
                });
                $("#gfg2").click(function() {
                    $("#e2").html("<b>Enrich your Knowledge.</b>");
                });
                $("#gfg3").click(function() {
                    $("#e3").val("jQuery at Geeks for Geeks");
                });
                $("#gfg4").click(function() {
                    $("#e4").attr("align", "center");
                });
                $("#gfg5").click(function() {
                    $("#e5").css("border-radius", "50px");
                });
            </script>
        </body>
          
        </html>

        
        

        Output:
        Before clicking on buttons:

        After clicking on buttons:



Similar Reads

Define Selectors in jQuery and What are the types of selectors?
Selectors in jQuery: Selectors in jQuery are functions that primarily focus on selecting particular HTML elements and modifying them as per the action they need to perform. These selectors select particular HTML elements as per their name, element type, class, id, attributes or values of attributes, and much more. In other words, we can say that se
4 min read
Difference between the “nth-child()” and “nth-of-type()” selectors in jQuery
In this article, we will discuss all the differences between nth-child() and nth-of-type() selectors in jQuery. nth-child() Selector: This selector is used to match the elements based on their position in a group of siblings. It matches every element that is the nth-child, regardless of the type, of its parent. Syntax: :nth-child(number) { // CSS P
2 min read
JQuery Multiple ID selectors
Given an HTML document and the task is to select the elements with different ID's at the same time using JQuery. Approach: Select the ID's of different element and then use each() method to apply the CSS property on all selected ID's element.Then use css() method to set the background color to pink to all selected elements.Display the text which in
2 min read
Selectors in jQuery
The selector in jQuery is a function that selects nodes i.e. elements from the Document Object Model. In simple words, the selector is a function that is used to select/manipulate one or more HTML elements using jQuery. It plays a significant role in jQuery. With the help of a selector, we can select a particular HTML element and can perform variou
5 min read
How to use JavaScript variables in jQuery selectors ?
In this article, we will discuss how to use JavaScript variables in jQuery selectors. In the following examples, it can be seen that we have used the values stored in JavaScript Variables used inside the jQuery Selectors. Example 1: The concatenation technique can be applied in order to use the values stored in JavaScript variables. In the followin
2 min read
jQuery Selectors Complete Reference
jQuery selectors are used to select the HTML element(s) and allow you to manipulate the HTML element(s) in the way we want. It selects the HTML elements on a variable parameter such as their name, classes, id, types, attributes, attribute values, etc. Syntax: $("") Example: In this example, we will select a class by using jQuery .class Selector. C/
5 min read
What are the fastest/slowest selectors in jQuery ?
jQuery Selectors are used for selecting and manipulating HTML elements. In jQuery, there are mainly three selectors. ID selectorClass selectorElement selector Before moving forward, first, let's briefly see how these selectors are used. Element Selector: jQuery element selector selects the element on the basis of their name. Syntax: $(''element") E
4 min read
How jQuery Selectors are Executed ?
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.” be
2 min read
How to use OR Operation in jQuery Attribute Selectors ?
In this article, we will see how to use OR operation in jQuery Attribute Selectors. To use the OR operation in the attribute selector, we will use the comma operator (,) on attributes or attribute values. Syntax: $(".class1, .class2, ...") { // Code } Approach: First we will create some HTML div elements with their class names and then use the comm
2 min read
JQuery Selectors
What is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you enclose the selector inside parentheses (). We will ex
5 min read