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><scripttype="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><pid="gfg">Welcome to Geeks for Geeks !</p><pid="GFG">Computer Science Portal </p><br/><button>Hide</button><scripttype="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><pclass="gfg">Welcome to Geeks for Geeks !</p><pclass="GFG">Explore More about GfG </p><br/><button>Hide</button><scripttype="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
- 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
| 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:
- 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 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> <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:
