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.
Table of Content
jQuery selectors:
o Elements Selector :
o Id Selector :
o Class Selector :
jQuery Event methods:
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 :-
<!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:
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:-
<!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:
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 :-
<!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:
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
The click() method contains an function for event handling which
click() gets invoked when the user clicks on the particular HTML
element.
The dblclick() method contains an function for event handling
dblclick() which gets invoked when the user double clicks on the particular
HTML element.
The mouseenter() method contains an function for event handling
mouseenter() which gets invoked when mouse pointer enters the particular
HTML element.
The mouseleave() method contains an function for event handling
mouseleave() which gets invoked when mouse pointer is removed from the
particular HTML element which was selected earlier.
The mousedown() method contains an function for event handling
mousedown() which gets invoked when mouse left, right or middle button is
pressed while the mouse pointer is over the HTML element.
Method
Name Description
The mouseup() method contains an function for event handling
mouseup() which gets invoked when mouse left, right or middle button is
released while the mouse pointer is over the HTML element.
The hover() method contains an function for event handling which
gets invoked when mouse pointer enter and leaves the HTML
hover()
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.
<!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:
