What is jQuery
• jQuery is a fast, small, and feature-rich JavaScript library.
• It makes things like HTML document traversal and manipulation, event handling,
animation, and Ajax much simpler with an easy-to-use API that works across a
multitude of browsers.
• It provides many built-in functions using which you can accomplish various tasks easily
and quickly
jQuery Important Features
• DOM Selection: jQuery provides Selectors to retrieve DOM element based on
different criteria like tag name, id, css class name, attribute name, value, nth
child in hierarchy etc.
• DOM Manipulation: You can manipulate DOM elements using various built-in
jQuery functions. For example, adding or removing elements, modifying html
content, css class etc.
• Special Effects: You can apply special effects to DOM elements like show or
hide elements, fade-in or fade-out of visibility, sliding effect, animation etc.
• Events: jQuery library includes functions which are equivalent to DOM events
like click, dblclick, mouseenter, mouseleave, blur, keyup, keydown etc. These
functions automatically handle cross-browser issues.
• Ajax: jQuery also includes easy to use AJAX functions to load data from servers
without reloading whole page.
• Cross-browser support: jQuery library automatically handles cross-browser
issues, so the user does not have to worry about it. jQuery supports IE 6.0+, FF
2.0+, Safari 3.0+, Chrome and Opera 9.0+.
How to Install?
Editor
You can use any JavaScript editor to write jQuery code including following.
• Notepad
• Visual Studio
• Eclipse
• Aptana Studio
• Ultra edit
jQuery Library
• To download jQuery library, go to jquery.com
jQuery Syntax
Following is the basic syntax for selecting HTML elements and then performing
some action on the selected element(s):
$(document).ready(function(){
$(selector).action()
});
Any jQuery statement starts with a dollar sign $ and then we put a selector inside the
braces ().
The factory function $() is a synonym of jQuery() function. So in case you are using any
other JavaScript library where $ sign is conflicting with some thing else then you can
replace $ sign by jQuery name and you can use function jQuery() instead of $()
jQuery Syntax
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("p").hide()
});
</script>
</head>
<body>
<h1>jQuery Basic Syntax</h1>
<p>This is p tag</p>
<p>This is another p tag</p>
<span>This is span tag</span>
<div>This is div tag</div>
</body>
</html>
jQuery Syntax
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
jQuery("p").hide()
});
</script>
</head>
<body>
<h1>jQuery Basic Syntax</h1>
<p>This is p tag</p>
<p>This is another p tag</p>
<span>This is span tag</span>
<div>This is div tag</div>
</body>
</html>
jQuery Syntax
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("p").hide()
});
</script>
</head>
<body>
<h1>jQuery Basic Syntax</h1>
<p>This is p tag</p>
<p>This is another p tag</p>
<span>This is span tag</span>
<div>This is div tag</div>
</body>
</html>
jQuery Syntax
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$(".red").css("color", "red")
});
</script>
</head>
<body>
<h1>jQuery Basic Syntax</h1>
<p>This is p tag</p>
<span>This is span tag</span>
<div class="red">This is div tag</div>
</body>
</html>
jQuery
• The jQuery library adds a global function named jQuery after jQuery library
successfully loaded.
• $ is a short form of jQuery function. $() = jQuery() = window.$() =
window.jQuery()
• $()/jQuery() is a selector function that selects DOM elements. Most of the time
you will need to start with $() function.
• It is advisable to use jQuery after DOM is loaded fully. Use jQuery ready()
function to make sure that DOM is loaded fully.
jQuery selectors
• The jQuery selector enables you to find DOM elements in your web page. Most
of the times you will start with selector function $() in the jQuery.
• Syntax:
$(selector expression, context)
or
jQuery(selector expression, context)
• The selector expression parameter specifies a pattern to match the elements
• The context parameter is optional. It specifies elements in a DOM hierarchy from
where jQuery starts searching for matching elements.
jQuery selectors
Select Elements by Name
• The most common selector pattern is element name. Specifying an element
name as string e.g. $('p') will return an array of all the <p> elements in a
webpage.
• The following figure shows which DOM elements will be returned from $('p') &
$'(div').
jQuery selectors
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script> <body>
<script> <div>
$(document).ready(function () { <p></p>
$('p').append('This is paragraph.');
<p></p>
// appends text to all p elements
$('div').append('This is div.'); </div>
// appends text to all div elements <p></p>
}); <div></div>
</script> </body>
<style>
</html>
div{
border: 1px solid;
}
p{
border: 1px dashed;
}
</style>
</head>
jQuery selectors
Select Elements by Id
• You can get a particular element by using id selector pattern. Specify an id of an
element for which you want to get the reference, starting with # symbol.
• The following figure shows which DOM elements will be returned from $
('#myDiv1') & $'(#prg2').
jQuery selectors
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$('#impPrg').append('This element\'s id is "impPrg"');
$('#myDiv2').append('This element\'s id is "myDiv2"');
}); <body>
</script> <div id="myDiv1" >
<p> </p>
<style> </div>
div{ <p id="impPrg"></p>
border: 1px solid; <div id="myDiv2"></div>
} </body>
</html>
p{
border: 1px dashed;
}
</style>
</head>
jQuery Event Methods
• The jQuery library provides methods to handle DOM events. Most jQuery
• methods correspond to native DOM events.
• A jQuery Event is the result of an action that can be detected by jQuery
(JavaScript). When these events are triggered, you can then use a custom
function to do pretty much whatever you want with the event. These custom
functions are called Event Handlers.
Category jQuery Method DOM Event
Form events blur onblur
change onchange
focus onfocus
focusin onfocusin
select onselect
submit onsubmit
Keyboard events keydown onkeydown
keypress onkeypress
keyup onkeyup
focusout
jQuery Event Methods
Category jQuery Method DOM Event
Mouse events click onclick
dblclick ondblclick
focusout
hover
mousedown onmousedown
mouseenter onmouseenter
mouseleave onmouseleave
mousemove onmousemove
mouseout onmouseout
mouseover onmouseover
mouseup onmouseup
Toggle
Browser events Error onerror()
Resize onresize
Scroll onscroll
Document loading Load onload
Ready
Unload onunload
jQuery Event Methods
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("div").click(function(){
alert('Hi there!');
});
});
</script>
<style>
div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
<p>Click on any of the squares to see the result:</p>
<div>One</div>
<div>Two</div>
<div>Three</div>
</body>
</html>
<html>
jQuery Event Methods
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("div").dblclick(function(){
alert('Hi there!');
});
});
</script>
<style>
div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
<p>Click on any of the squares to see the result:</p>
<div>One</div>
<div>Two</div>
<div>Three</div>
</body>
</html>
jQuery Hide and Show effect
• The hide() method simply sets the inline style display: none for the selected
elements. Conversely, the show() method restores the display properties of the
matched set of elements to whatever they initially were—typically block, inline,
or inline-block—before the inline style display: none was applied to them
jQuery hide() and show()
jQuery hide() : Hides the Syntax or the element of html that you want to hide.
$(selector).hide(speed, callback);
jQuery show() : Shows the syntax or the element of html that you want the user to see.
$(selector).show(speed, callback);
Hide and Show effect
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Show Hide Effects</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</script>
<style> </head>
<body>
p{ <button type="button" class="hide-btn">Hide
padding: 15px; Paragraphs</button>
background: #F0E68C; <button type="button" class="show-btn">Show
} Paragraphs</button>
<p>This is a paragraph.</p>
</style> <p>This is another paragraph.</p>
<script> </body>
$(document).ready(function(){ </html>
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
jQuery Fading effect
jQuery has the following The jQuery fadeIn() method is used to fade in a hidden element.
Syntax:
fade methods:
$(selector).fadeIn(speed,callback);
• fadeIn()
• The optional speed parameter specifies the duration of the effect.
• fadeOut() It can take the following values: "slow", "fast", or milliseconds.
• fadeToggle() • The optional callback parameter is a function to be executed after
the fading completes.
• fadeTo()
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
jQuery Fading effect
jQuery fadeOut() Method
The jQuery fadeOut() method is used to fade out a visible element.
• Syntax:
$(selector).fadeOut(speed,callback);
• The optional speed parameter specifies the duration of the effect. It can take the following values: "slow",
"fast", or milliseconds.
• The optional callback parameter is a function to be executed after the fading completes.
• The following example demonstrates the fadeOut() method with different parameters:
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery Fading effect
jQuery fadeToggle() Method
– The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.
– If the elements are faded out, fadeToggle() will fade them in.
– If the elements are faded in, fadeToggle() will fade them out.
• Syntax:
$(selector).fadeToggle(speed,callback);
• The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
• The optional callback parameter is a function to be executed after the fading completes.
• The following example demonstrates the fadeToggle() method with different parameters:
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery Fading effect
jQuery fadeTo() Method
The jQuery fadeTo() method allows fading to a given opacity (value between
0 and 1).
• Syntax:
$(selector).fadeTo(speed,opacity,callback);
• The required speed parameter specifies the duration of the effect. It can take
the following values: "slow", "fast", or milliseconds.
• The required opacity parameter in the fadeTo() method specifies fading to a
given opacity (value between 0 and 1).
• The optional callback parameter is a function to be executed after the function
completes.
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
jQuery Fading effect-example
<html>
<p>Demonstrate fadeIn() with different parameters.</p>
<head> <button>Click to fade in boxes</button><br><br>
<script </body><div id="div1"
src="https://ajax.googleapis.com/ajax/libs/jque style="width:80px;height:80px;display:none;background-
ry/3.7.1/jquery.min.js"></script> color:red;"></div><br>
<script> <div id="div2"
style="width:80px;height:80px;display:none;background-
$(document).ready(function(){
color:green;"></div><br>
$("button").click(function(){
<div id="div3"
$("#div1").fadeIn();
style="width:80px;height:80px;display:none;background-
$("#div2").fadeIn("slow"); color:blue;"></div>
$("#div3").fadeIn(3000);
}); </html>
});
</script>
</head>
<body>
jQuery sliding effect
jQuery Sliding Methods
jQuery slideDown() Method
• With jQuery you can
create a sliding effect on • The jQuery slideDown() method is used to slide down an
elements. element.
Syntax:
jQuery has the following
• $(selector).slideDown(speed,callback);
slide methods:
• slideDown() • The optional speed parameter specifies the duration of the effect.
• slideUp() It can take the following values: "slow", "fast", or milliseconds.
• slideToggle() • The optional callback parameter is a function to be executed
after the sliding completes.
• The following example demonstrates the slideDown() method:
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
jQuery sliding effect
jQuery slideUp() Method
• The jQuery slideUp() method is used to slide up an element.
• Syntax:
• $(selector).slideUp(speed,callback);
• The optional speed parameter specifies the duration of the effect. It can take the
following values: "slow", "fast", or milliseconds.
• The optional callback parameter is a function to be executed after the sliding completes.
jQuery slideToggle() Method
• The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.
• If the elements have been slid down, slideToggle() will slide them up.
• If the elements have been slid up, slideToggle() will slide them down.
$(selector).slideToggle(speed,callback);
• The optional speed parameter can take the following values: "slow", "fast", milliseconds.
• The optional callback parameter is a function to be executed after the sliding completes.
jQuery sliding effect-example
<html> #panel {
padding: 50px;
<head>
display: none;
<script }
src="https://ajax.googleapis.com/ajax/libs/jque </style>
ry/3.7.1/jquery.min.js"></script>
</head>
<script> <body>
$(document).ready(function(){
$("#flip").click(function(){ <div id="flip">Click to slide the panel down or up</div>
$("#panel").slideToggle("slow"); <div id="panel">Hello world!</div>
});
}); </body>
</html>
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
jQuery Get Content and Attributes
• Get Content: In order to get the content of DOM object, there are three simple
methods.jQuery methods for DOM manipulation which are listed below:
• text(): It is used to set or return the text content of selected elements.
• html(): It is used to set or return the content of selected elements including HTML
markup.
• val(): It is used to set or return the value of form fields.
Get Attributes The jQuery attr() method is used to get attribute values of DOM objects.
• Example: This example uses attr() method to get the attribute value.
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
jQuery Get Content and Attributes
jQuery set Content and Attributes
Set Content: It is used to set the content using jQuery.
The following methods are used to set the content which are listed below:
• text(): It is used to set or return the text content of selected elements.
• html(): It is used to set or return the innerHTML content of the selected element.
• val(): This parameter is used to set or return the value of attribute for the selected
elements. This method apply on the HTML form elements.
Set Attributes: The jQuery attr() method in jQuery is used to set and change attribute
values.
• Example: This example uses attr() method to set and change attribute values.
$(document).ready(function() {
$("button").click(function() {
$("#GFG").attr("href",
"https://www.geeksforgeeks.org/jquery-introduction/");
});
});
jQuery set Content and Attributes
<html> <script>
$(document).ready(function() {
<head> $
("#btn1").click(function() {
<title>jQuery Set Content</title>
$("#GFG1").text(“New Content");
<script src= });
$("#btn2").click(function() {
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
$("#GFG2").html("<b>Set
</script> Content</b>");
});
</head> $("#btn3").click(function() {
<body style="text-align:center;">
$("#GFG3").val(“New Value");
});
<h1 id="GFG1" style = "color:green;">
});
GeeksForGeeks </script>
</body>
</h1>
</html>
<h2 id="GFG2">jQuery Set Content</h2>
<p>Full Form: <input type="text" id="GFG3"
value="GFG"></p>
<button id="btn1">Set 1 line</button>
<button id="btn2">Set 2 line</button>
<button id="btn3">Set 3 line</button>
<!-- Script to set the content -->
jQuery - Add Elements
jQuery methods that are used to add new content:
• append() - Inserts content at the end of the selected elements
• prepend() - Inserts content at the beginning of the selected elements
• after() - Inserts content after the selected elements
• before() - Inserts content before the selected elements
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
jQuery - Add Elements
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
</script></head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button></body></html>
jQuery - remove Elements
Remove Elements/Content
• To remove elements and content, there are mainly two jQuery methods:
• remove() - Removes the selected element (and its child elements)
• empty() - Removes the child elements from the selected element
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
jQuery - remove Elements
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br> After
<button>Remove div element</button>
</body>
</html>
jQuery css() method
• The css() method sets or returns one or more style properties for the selected elements.
• Return a CSS Property
• To return the value of a specified CSS property, use the following syntax:
• css("propertyname");
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("p").css("background-
color"));
});
});
• Example: Set CSS using jQuery
• Set Multiple CSS Properties
jQuery Traversing - Filtering
• jQuery first() Method
The first() method returns the first element of the specified
elements.
The following example selects the first <div> element
:
JQuery last() Method
The last() method returns the last element of the specified elements.
The following example selects the last <div> element:
jQuery eq() method
The eq() method returns an element with a specific index number of the selected elements.
The index numbers start at 0, so the first element will have the index number 0 and not 1. The following
example selects the second <p> element (index number 1):
jQuery filter() Method
The filter() method lets you specify a criteria. Elements that do not match the criteria are removed from the selection, and
those that match will be returned.
The following example returns all <p> elements with class name "intro":
jQuery not() Method
The not() method returns all elements that do not match the criteria.
The not() method is the opposite of filter().
The following example returns all <p> elements that do not have class name "intro":
jQuery - Plugins
• A plug-in is piece of code written in a standard JavaScript file. These files
provide useful jQuery methods which can be used along with jQuery
library methods.
How to use Plugins
• To make a plug-in's methods available to us, we include plug-in file very
similar to jQuery library file in the <head> of the document.
• Following example shows how to include jquery.plug-in.js plugin −
• This is very simple to write your own plug-in. Following is the syntax to
create a a method −
• jQuery.fn.methodName = methodDefinition;
• Example:
jQuery - Widgets
• a jQuery UI widget is a specialized jQuery plug-in.Using plug-in, we can
apply behaviours to the elements.
jQuery - remove Elements
<html lang="en"> <script>
<head> $( "p" ).bind( "click", function( event ) {
<meta charset="utf-8"> var str = "( " + event.pageX + ", " +
<title>bind demo</title> event.pageY + " )";
<style> $( "span" ).text( "Click happened! " + str );
p{ });
background: yellow; $( "p" ).bind( "dblclick", function() {
font-weight: bold; $( "span" ).text( "Double-click happened in "
cursor: pointer; + this.nodeName );
padding: 5px; });
} $( "p" ).bind( "mouseenter mouseleave",
p.over { function( event ) {
background: #ccc; $( this ).toggleClass( "over" );
} }); After
span {
</script>
color: red;
}
</body>
</style>
<script src="https://code.jquery.com/jquery- </html>
3.7.0.js"></script>
</head>
<body>
<p>Click or double click here.</p>
<span></span>
