JQUERY
JQUERY:
jQuery is used to select any HTML element from an HTML document
and then perform any ac on on that selected element. To select an HTML
element, jQuery selectors are used.
JQuery features:
DOM manipula on: JQuery makes selec ng and manipula ng elements
in the Document Object Model (DOM) easy. This allows developers to
add, remove, and modify elements on a webpage simply and efficiently.
Event handling: JQuery makes a aching event handlers to elements on a
webpage easy, allowing developers to create interac ve and dynamic
websites.
Anima on: JQuery includes a powerful anima on engine that allows
developers to create smooth and visually appealing anima ons.
AJAX support: JQuery includes built-in support for Asynchronous
JavaScript and XML (AJAX), which allows developers to make requests to
the server without having to reload the page.
Document Ready Event:
Before we look into jQuery Syntax, let’s try to understand what is
Document Ready Event. Actually, before we execute any jQuery statement, we
would like to wait for the document to be fully loaded. This is because jQuery
works on DOM and if complete DOM is not available before execu ng jQuery
statements, then we will not get desired result.
Following is basic syntax of a Document Ready Event:
$(document).ready(func on(){
// jQuery code goes here...
});
Alterna vely you can also use the following syntax for document ready event:
1|Page
$(func on(){
// jQuery code goes here...
});
Jquery syntax:
The basic syntax for selec ng HTML elements and then performing some
ac on on the selected element(s):
$(document).ready(func on(){
$(selector).ac on()
});
Any jQuery statement starts with a dollar sign $ and then we put a selector
inside the braces (). This syntax $(selector) is enough to return the selected
HTML elements, but if you have to perform any ac on on the selected
element(s) then ac on() part is required.
The factory func on $() is a synonym of jQuery() func on. So in case you are
using any other JavaScript library where $ sign is conflic ng with some thing
else then you can replace $ sign by jQuery name and you can use func on
jQuery() instead of $().
A $ sign to define/access jQuery
A (selector) to “query (or find)” HTML elements
A jQuery ac on() to be performed on the element(s)
Examples:
$(this).hide() – hides the current element.
$(“p”).hide() – hides all <p> elements.
2|Page
$(“.test”).hide() – hides all elements with class=”test”.
$(“#test”).hide() – hides the element with id=”test”.
jQuery Selectors:
jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to “find” (or select) HTML elements based on their
name, id, classes, types, a ributes, values of a ributes and much more. It’s
based on the exis ng CSS Selectors, and in addi on, it has some own custom
selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
The element Selector
The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
$(“p”)
Example
When a user clicks on a bu on, all <p> elements will be hidden:
Example:
$(document).ready(func on(){
$(“bu on”).click(func on(){
$(“p”).hide();
});
});
The #id Selector
The jQuery #idselector uses the id attribute of an HTML tag to find the
specific element.
3|Page
An id should be unique within a page, so you should use the #id selector
when you want to find a single, unique element.
To find an element with a specific id, write a hash character, followed by the
id of the HTML element.
$(“#test”)
Example
When a user clicks on a button, the element with id=”test” will be hidden:
$(document).ready(function(){
$(“button”).click(function()
$(“#test”).hide();
});
});
JQuery examples:
Example 1:
<html>
<head>
<!—Embedding jQuery using jQuery CDN
<script src=
h ps://[Link]/[Link]
integrity= “sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=”
Crossorigin=”anonymous”>
</script>
</head>
<body>
<script>
// returns me in milliseconds
4|Page
Var start = new Date().getTime();
For (i = 0; i < 1000000; ++i) {
Var e = $(([Link](‘div’)));
}
Var end = new Date().getTime();
Alert(end – start);
</script>
</body>
</html>
Example 2:
<!DOCTYPE html>
<html>
<head>
<script
src=”[Link]
.[Link]”></script>
<script>
$(document).ready(function() {
$(‘button’).click(function() {
Var text = $(this).text();
$(‘#output’).text(text + ‘ was clicked’);
});
});
5|Page
</script>
</head>
<body>
<button>Click Me!</button>
<div id=”output”></div>
</body>
</html>
6|Page