jQuery | Selectors and Event Methods

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



      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      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>

      chevron_right

      
      

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

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      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>

      chevron_right

      
      

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

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      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>

      chevron_right

      
      

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

        filter_none

        edit
        close

        play_arrow

        link
        brightness_4
        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>

        chevron_right

        
        

        Output:
        Before clicking on buttons:

        After clicking on buttons:



      My Personal Notes arrow_drop_up

      Check out this Author's contributed articles.

      If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

      Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




      Article Tags :

      1


      Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.