jQuery | Selectors and Event Methods
Last Updated :
27 May, 2024
jQuery selectors allow targeting HTML elements using CSS-like syntax, enabling manipulation or interaction. Event methods facilitate handling user actions, like clicks or input changes, by attaching functions to selected elements, enhancing interactivity and dynamic behavior in web development.
jQuery selectors:
jQuery selectors are methods that allow you to target HTML elements using CSS-like syntax. They enable you to efficiently select and manipulate elements on a web page, simplifying DOM traversal and manipulation tasks.
Syntax:
$("selector-name")
Elements Selector :
The Elements Selector in jQuery allows targeting HTML elements based on their tag names. It selects all elements of a specified type on a web page, enabling bulk manipulation or interaction with elements sharing the same tag.
Example : In this example, when the user clicks on button, the <h1> element gets hidden. Code :-
html
<!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>
Id Selector :
The jQuery ID Selector targets an element on a web page by its unique identifier (ID). It uses the `#` symbol followed by the ID value to select and manipulate the specific element, offering efficient and precise DOM manipulation.
Example : In this example, when the user double clicks on button, the element with id = “gfg” gets hidden. Code:-
html
<!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>
Class Selector :
The jQuery Class Selector selects elements based on their class attribute. It uses the `.` symbol followed by the class name to target and manipulate multiple elements sharing the same class.
Example : In this example, when the user clicks on button, the element with class = “GFG” gets hidden. Code :-
html
<!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>
jQuery Event methods:
jQuery event methods allow binding functions to HTML elements to respond to user interactions like clicks, hovers, or form submissions. They streamline event handling, providing cross-browser compatibility and simplifying the implementation of interactive web functionality.
Some of the events methods are given below
| 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:
| Method | Description |
|---|
| text() | Get or set the text content of selected HTML element. |
| html() | Get or set the content of selected elements, including HTML. |
| val() | Get or set the value of various form fields on the webpage. |
| attr() | Get or set the value of various attributes on the webpage. |
| css() | Get or set the value of various CSS properties on the webpage. |
Example : In this example HTML document with jQuery library included. Buttons trigger jQuery events to change text, HTML content, input value, alignment, and CSS property of elements dynamically.
html
<!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:
jQuery Event Methods
Similar Reads
jQuery select() Method
The jQuery select() method is an inbuilt method that is used when some letters or words are selected (or marked) in a text area or a text field. Syntax: $(selector).select(function);Parameter: This method accepts a single parameter function which is optional. The function parameter will run after th
2 min read
jQuery element + next Selector
The ("element + next") selector selects in jQuery used to select the just "next" element of the specified "element". This selector only works when the "next" element is placed just after the specified element. For Example: If the statement is $("div + p") then this will only select the first "p" ele
2 min read
jQuery UI Menu select Event
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. It is great for building UI interfaces for the webpages. The jQuery UI Menu widget creates a menu list that is used for mouse and keyboard interactions. The jQuery UI menu select event is used trig
2 min read
jQuery element Selector
jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax i
1 min read
jQuery click() Method vs onClick Event
jQuery is the JavaScript library known for its lightweight, fast, and cross-platform features. It is an open-source library that goes by the motto "Write less, do more". The main objective of jQuery is to make Java script so easy that one can create more attractive and interactive websites. jQuery h
5 min read
jQuery UI Selectable instance() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using the jQuery, JavaScript Library. jQuery UI is great for building UI interfaces for the webpages. It can be used to build highly interactive web applications or can be used to add widgets easily. The JQuery UI selectable()
2 min read
jQuery multiple elements Selector
The jQuery multiple elements Selector is used to select multiple elements of an HTML document. Syntax: $("element1, element2, element3, ...")Parameter: element: This parameter is required to specify the elements to be selected.Example 1: In this example, we will select the multiple elements by using
1 min read
jQuery Event Methods Complete Reference
An 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 The user clicks on the button.The user moves the mouse pointer over an image.The user pressed any key from the keyboard, etc.Syntax: $(s
6 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 selec
5 min read
jQuery | Misc get() Method
The get() Method in jQuery is used to get the DOM element specified by the selectors. Syntax $(selector).get(index) Parameters: This method accepts single parameter index which is optional. It is used to specify which of the matching elements to get by its index number. Example 1: This example uses
1 min read