JQuery
What is JQuery?Explain JQuery syntax.
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.
1. JQuery is a lightweight,”Write less,do more” Javascript library.
2. JQuery simplifies HTML document traversing,event
handling,animating, and Ajax interactions for rapid web
development.
Core features supported by JQuery:
● DOM manipulation
● Event Handling
● AJAX Support
● Animations
● Lightweight
● Cross Browser support
● Latest Technology.
● jQuery is a lightweight, "write less, do more", JavaScript
library.
● The purpose of jQuery is to make it much easier to use
JavaScript on your website.
● jQuery takes a lot of common tasks that require many
lines of JavaScript code to accomplish, and wraps them
into methods that you can call with a single line of code.
● jQuery also simplifies a lot of the complicated things from
JavaScript, like AJAX calls and DOM manipulation.
The jQuery library contains the following features:
● HTML/DOM manipulation
● CSS manipulation
● HTML event methods
● Effects and animations
● AJAX
● Utilities
Adding jQuery to Your Web Pages
There are several ways to start using jQuery on your web site.
You can:
● Download the jQuery library from [Link]
● Include jQuery from a CDN, like Google
Downloading jQuery
There are two versions of jQuery available for downloading:
● Production version - this is for your live website because it
has been minified and compressed
● Development version - this is for testing and development
(uncompressed and readable code)
Both versions can be downloaded from [Link].
The jQuery library is a single JavaScript file, and you reference
it with the HTML <script> tag (notice that the <script> tag
should be inside the <head> section):
<head>
<script src="[Link]"></script>
</head>
jQuery CDN
If you don't want to download and host jQuery yourself, you can
include it from a CDN (Content Delivery Network).
Both Google and Microsoft host jQuery.
To use jQuery from Google or Microsoft, use one of the
following:
Google CDN:
<head>
<script
src="[Link]
1.3/[Link]"></script>
</head>
Microsoft CDN:
<head>
<script
src="[Link]
[Link]"></script>
</head>
jQuery Syntax
The jQuery syntax is tailor made for selecting HTML elements
and performing some action on the element(s).
Basic syntax is: $(selector).action()
● A $ sign to define/access jQuery
● A (selector) to "query (or find)" HTML elements
● A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
The Document Ready Event
All jQuery methods in our examples, are inside a document
ready event:
$(document).ready(function(){
// jQuery methods go here...
});
This is to prevent any jQuery code from running before the
document is finished loading (is ready).
jQuery Event Methods
jQuery is tailor-made to respond to events in an HTML
page.
What are Events?
All the different visitor's actions that a web page can respond to
are called events.
An event represents the precise moment when something
happens.
Examples:
● moving a mouse over an element
● selecting a radio button
● clicking on an element
The term "fires" is often used with events. Example: "The
keypress event fires the moment you press a key".
Here are some common DOM events:
Mouse Keyboard Form Document/
Events Events Events Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
jQuery Syntax For Event Methods
In jQuery, most DOM events have an equivalent jQuery method.
To assign a click event to all paragraphs on a page, you can do
this:
$("p").click();
The next step is to define what should happen when the event
fires. You must pass a function to the event:
$("p").click(function(){
// action goes here!!
});
Commonly Used jQuery Event Methods
$(document).ready()
The $(document).ready() method allows us to execute a
function when the document is fully loaded.
click()
The click() method attaches an event handler function to an
HTML element.
The function is executed when the user clicks on the HTML
element.
dblclick()
The dblclick() method attaches an event handler function to an
HTML element.
The function is executed when the user double-clicks on the
HTML element:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
hover()
The hover() method takes two functions and is a combination of
the mouseenter() and mouseleave() methods.
The first function is executed when the mouse enters the HTML
element, and the second function is executed when the mouse
leaves the HTML element:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
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 id, classes, types, attributes, values of attributes
and much more. It's based on the existing CSS Selectors, and in
addition, 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 button, all <p> elements will be
hidden:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
1.3/[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
The #id Selector
The jQuery #id selector uses the id attribute of an HTML tag to
find the specific element.
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:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
1.3/[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
The .class Selector
The jQuery class selector finds elements with a specific class.
To find elements with a specific class, write a period character,
followed by the name of the class:
$(".test")
Example
When a user clicks on a button, the elements with class="test"
will be hidden:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
1.3/[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Examples of jQuery Selectors
1.
$("*")
Selects all elements
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
1.3/[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("*").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
2.
$(this)
Selects the current HTML element
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
1.3/[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
3.
$("[Link]")
Selects all <p> elements with class="intro"
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
1.3/[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("[Link]").hide();
});
});
</script>
</head>
<body>
<h2 class="intro">This is a heading</h2>
<p class="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
4.
$("p:first")
Selects the first <p> element
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
1.3/[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p:first").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
5.
$("ul li:first-child")
Selects the first <li> element of every
<ul>
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
1.3/[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("ul li:first-child").hide();
});
});
</script>
</head>
<body>
<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<button>Click me</button>
</body>
</html>
6.
$("tr:even")
Selects all even <tr> elements
Effects supported by JQuery:
The various effects supported by JQuery are:
[Link], Show,Toggle.
[Link].
[Link].
[Link].
[Link], Show,Toggle.
jQuery hide() and show()
With jQuery, you can hide and show HTML elements with the
hide() and show() methods.
Syntax:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
The optional speed parameter specifies the speed of the
hiding/showing, and can take the following values: "slow",
"fast", or milliseconds.
The optional callback parameter is a function to be executed
after the hide() or show() method completes
Example:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
1.3/[Link]"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will
disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Example 2:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
1.3/[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
jQuery toggle()
With jQuery, you can toggle between the hide() and show()
methods with the toggle() method.
Syntax:
$(selector).toggle(speed,callback);
The optional speed parameter can take the following values:
"slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed
after toggle() completes.
Example:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
1.3/[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
[Link]:
jQuery Fading Methods
With jQuery you can fade an element in and out of visibility.
jQuery has the following fade methods:
● fadeIn()
● fadeOut()
● fadeToggle()
● fadeTo()
jQuery fadeIn() Method
The jQuery fadeIn() method is used to fade in a hidden
element.
Syntax:
$(selector).fadeIn(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.
Example:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
1.3/[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeIn() with different
parameters.</p>
<button>Click to fade in boxes</button><br><br>
<div id="div1"
style="width:80px;height:80px;display:none;background
-color:red;"></div><br>
<div id="div2"
style="width:80px;height:80px;display:none;background
-color:green;"></div><br>
<div id="div3"
style="width:80px;height:80px;display:none;background
-color:blue;"></div>
</body>
</html>
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.
Example:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
1.3/[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeOut() with different
parameters.</p>
<button>Click to fade out boxes</button><br><br>
<div id="div1"
style="width:80px;height:80px;background-
color:red;"></div><br>
<div id="div2"
style="width:80px;height:80px;background-
color:green;"></div><br>
<div id="div3"
style="width:80px;height:80px;background-
color:blue;"></div>
</body>
</html>
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.
Example:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
1.3/[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed
parameters.</p>
<button>Click to fade in/out boxes</button><br><br>
<div id="div1"
style="width:80px;height:80px;background-
color:red;"></div>
<br>
<div id="div2"
style="width:80px;height:80px;background-
color:green;"></div>
<br>
<div id="div3"
style="width:80px;height:80px;background-
color:blue;"></div>
</body>
</html>
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.
Example:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
1.3/[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeTo() with different
parameters.</p>
<button>Click to fade boxes</button><br><br>
<div id="div1"
style="width:80px;height:80px;background-
color:red;"></div><br>
<div id="div2"
style="width:80px;height:80px;background-
color:green;"></div><br>
<div id="div3"
style="width:80px;height:80px;background-
color:blue;"></div>
</body>
</html>
[Link]:
jQuery Sliding Methods
With jQuery you can create a sliding effect on elements.
jQuery has the following slide methods:
● slideDown()
● slideUp()
● slideToggle()
jQuery slideDown() Method
The jQuery slideDown() method is used to slide down an
element.
Syntax:
$(selector).slideDown(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.
Example:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
[Link]"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
#panel {
padding: 50px;
display: none;
</style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
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.
Example:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
[Link]"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
#panel {
padding: 50px;
</style>
</head>
<body>
<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
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.
Example:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
[Link]"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
[Link]:
jQuery Animations - The animate() Method
The jQuery animate() method is used to create custom
animations.
Syntax:
$(selector).animate({params},speed,callback);
The required params parameter defines the CSS properties to
be animated.
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 animation completes.
Example 1:
The following example demonstrates a simple use of the
animate() method; it moves a <div> element to the right, until
it has reached a left property of 250px:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and
cannot be moved. To manipulate the position, remember to
first set the CSS position property of the element to relative,
fixed, or absolute!</p>
<div
style="background:#98bf21;height:100px;width:100px;position
:absolute;"></div>
</body>
</html>
Example 2:
Multiple properties can be animated at the same time:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and
cannot be moved. To manipulate the position, remember to
first set the CSS position property of the element to relative,
fixed, or absolute!</p>
<div
style="background:#98bf21;height:100px;width:100px;position
:absolute;"></div>
</body>
</html>
Example 3:
jQuery animate() - Using Pre-defined Values
You can specify a property's animation value as "show", "hide",
or "toggle":
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and
cannot be moved. To manipulate the position, remember to
first set the CSS position property of the element to relative,
fixed, or absolute!</p>
<div
style="background:#98bf21;height:100px;width:100px;position
:absolute;"></div>
</body>
</html>
Example 4:
jQuery animate() - Uses Queue Functionality
By default, jQuery comes with queue functionality for
animations.
This means that if you write multiple animate() calls after each
other, jQuery creates an "internal" queue with these method
calls. Then it runs the animate calls ONE by ONE.
The example below first moves the <div> element to the right,
and then increases the font size of the text:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
[Link]({left: '100px'}, "slow");
[Link]({fontSize: '3em'}, "slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and
cannot be moved. To manipulate the position, remember to
first set the CSS position property of the element to relative,
fixed, or absolute!</p>
<div
style="background:#98bf21;height:100px;width:200px;position
:absolute;">HELLO</div>
</body>
</html>