jQuery | Selectors and Event Methods - GeeksforGeeks

12 Feb, 2019
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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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 asUser clicks on the button.User moves mouse pointer over an image.User pressed any key from keyboard, etc.Some of the events methods are givenMethod NameDescriptionclick()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:text() – This method is used get or set the text content of selected HTML element.html() – This method is used get or set the content of selected elements (including HTML elements).val() – This method is used get or set the value of various form fields in the webpage.attr() – This method is used get or set the value of various various attributes in the webpage.css() – This method is used get or set the value of various CSS properties in the webpage.Example :Code :-<!DOCTYPE html><html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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:My Personal Notes
arrow_drop_upSave
 $("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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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:
<!DOCTYPE html><html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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:
<!DOCTYPE html><html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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:
<!DOCTYPE html><html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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:
User clicks on the button.User moves mouse pointer over an image.User pressed any key from keyboard, etc.
User clicks on the button.
User moves mouse pointer over an image.
User pressed any key from keyboard, etc.
Some of the events methods are given
text() – This method is used get or set the text content of selected HTML element.html() – This method is used get or set the content of selected elements (including HTML elements).val() – This method is used get or set the value of various form fields in the webpage.attr() – This method is used get or set the value of various various attributes in the webpage.css() – This method is used get or set the value of various CSS properties in the webpage.Example :Code :-<!DOCTYPE html><html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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:My Personal Notes
arrow_drop_upSave
text() – This method is used get or set the text content of selected HTML element.
html() – This method is used get or set the content of selected elements (including HTML elements).
val() – This method is used get or set the value of various form fields in the webpage.
attr() – This method is used get or set the value of various various attributes in the webpage.
css() – This method is used get or set the value of various CSS properties in the webpage.Example :Code :-<!DOCTYPE html><html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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:My Personal Notes
arrow_drop_upSave
Example :Code :-<!DOCTYPE html><html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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:
<!DOCTYPE html><html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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:
jQuery-Basics
JavaScript
JQuery
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
How to calculate the number of days between two dates in javascript?
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
JQuery | Set the value of an input text field
How to change selected value of a drop-down list using jQuery?
Form validation using jQuery
How to change the background color after clicking the button in JavaScript ?
How to Dynamically Add/Remove Table Rows using jQuery ?