Jquery Notes

JQUERY NOTES
jQuery
jQuery is a fast, small, cross-platform and feature-rich JavaScript library. It is
designed to simplify the client-side scripting of HTML. It makes things like HTML
document traversal and manipulation, animation, event handling, and AJAX very
simple with an easy-to-use API that works on a lot of different type of browsers.
The main purpose of jQuery is to provide an easy way to use JavaScript on your
website to make it more interactive and attractive. It is also used to add animation.
What is jQuery
jQuery is a small, light-weight and fast JavaScript library. It is cross-platform and
supports different types of browsers. It is also referred as ?write less do more?
because it takes a lot of common tasks that requires many lines of JavaScript code
to accomplish, and binds them into methods that can be called with a single line of
code whenever needed. It is also very useful to simplify a lot of the complicated
things from JavaScript, like AJAX calls and DOM manipulation.
jQuery Features
Following are the important features of jQuery.
o HTML manipulation
o DOM manipulation
o DOM element selection
o CSS manipulation
o Effects and Animations
o Utilities
o AJAX
o HTML event methods
o JSON Parsing
o Extensibility through plug-ins
Why jQuery is required

Sometimes, a question can arise that what is the need of jQuery or what difference
it makes on bringing jQuery instead of AJAX/ JavaScript? If jQuery is the
replacement of AJAX and JavaScript? For all these questions, you can state the
following answers.
o It is very fast and extensible.
o It facilitates the users to write UI related function codes in minimum possible

lines.
o It improves the performance of an application.
o Browser's compatible web applications can be developed.
o It uses mostly new features of new browsers.
So, you can say that out of the lot of JavaScript frameworks, jQuery is the most
popular and the most extendable. Many of the biggest companies on the web use
jQuery.
Some of these companies are:
o Microsoft
o Google
o IBM
o Netflix
jQuery History
jQuery was first released in January 2006 by John Resig at BarCamp NYC. It is
currently headed by Timmy Wilson and maintained by a team of developers.
Nowadays, jQuery is widely used technology. Most of the websites are using jQuery.
jQuery Example
jQuery is developed by Google. To create the first jQuery example, you need to use
JavaScript file for jQuery. You can download the jQuery file from jquery.com or use
the absolute URL of jQuery file.
In this jQuery example, we are using the absolute URL of jQuery file. The jQuery
example is written inside the script tag.
Let's see a simple example of jQuery.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>First jQuery Example</title>
5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq
uery/2.1.3/jquery.min.js">
6. </script>
7. <script type="text/javascript" language="javascript">
8. $(document).ready(function() {
9. $("p").css("background-color", "cyan");
10. });
11. </script>
12. </head>
13.<body>
14.<p>The first paragraph is selected.</p>
15.<p>The second paragraph is selected.</p>
16.<p>The third paragraph is selected.</p>
17.</body>
18.</html>
Output:
The first paragraph is selected.
The second paragraph is selected.
The third paragraph is selected.
$(document).ready() and $()

The code inserted between $(document).ready() is executed only once when page is
ready for JavaScript code to execute.
In place of $(document).ready(), you can use shorthand notation $() only.
2. $("p").css("color", "red");
3. });
The above code is equivalent to this code.
1. $(function() {
3. });
Let's see the full example of jQuery using shorthand notation $().
File: shortjquery.html
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Second jQuery Example</title>
5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq
uery/2.1.3/jquery.min.js">
6. </script>
8. $(function() {
10. });
11. </script>
12. </head>
13.<body>
14.<p>The first paragraph is selected.</p>
15.<p>The second paragraph is selected.</p>
16.<p>The third paragraph is selected.</p>
17.</body>
18.</html>
19.Output:
20.The first paragraph is selected.
21.The second paragraph is selected.
22.The third paragraph is selected.
23.
24. function() { $("p").css("background-

color", "cyan"); }
25.It changes the background-color of all <p> tag or paragraph to cyan.
jQuery Selectors
jQuery Selectors are used to select and manipulate HTML elements. They are very
important part of jQuery library.
With jQuery selectors, you can find or select HTML elements based on their id,
classes, attributes, types and much more from a DOM.
In simple words, you can say that selectors are used to select one or more HTML
elements using jQuery and once the element is selected then you can perform
various operation on that.
All jQuery selectors start with a dollor sign and parenthesis e.g. $(). It is known as
the factory function.
The $() factory function

Every jQuery selector start with thiis sign $(). This sign is known as the factory
function. It uses the three basic building blocks while selecting an element in a given
document.
S.No Selector Description

.
1) Tag It represents a tag name available in the DOM.

Name: For example: $('p') selects all paragraphs'p'in the document.
2) Tag ID: It represents a tag available with a specific ID in the DOM.

For example: $('#real-id') selects a specific element in the document th
an ID of real-id.
3) Tag It represents a tag available with a specific class in the DOM.

Class: For example: $('real-class') selects all elements in the document that h
class of real-class.
Let's take a simple example to see the use of Tag selector. This would select all the
elements with a tag name
and the background color is set to "pink".
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>First jQuery Example</title>
5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jque
ry/2.1.3/jquery.min.js">
6. </script>
9. $("p").css("background-color", "pink");
10. });
11. </script>
12. </head>
13.<body>
14.<p>This is first paragraph.</p>
15.<p>This is second paragraph.</p>
16.<p>This is third paragraph.</p>
17.</body>
18.</html>
Output:
This is first paragraph.
This is second paragraph.
This is third paragraph.
Note: 1. All of the above discussed selectors can be used alone or with the
combination of other selectors.
Note: 2. If you have any confliction with theuse of dollor sign $ in any JavaScript
library then you can use jQuery() function instead of factory function $(). The
factory function $() and the jQuery function is the same.
How to use Selectors

The jQuery selectors can be used single or with the combination of other selectors.
They are required at every steps while using jQuery. They are used to select the
exact element that you want from your HTML document.
S.No. Selector Description
1) Name: It selects all elements that match with the given elem
2) #ID: It selects a single element that matches with the giv

3) .Class: It selects all elements that matches with the given cl
4) Universal(*) It selects all elements available in a DOM.
5) Multiple Elements A,B,C It selects the combined results of all the specified se
Selector Example Description
* $("*") It is used to select all elements.
#id $("#firstname") It will select the element with id="firstn
.class $(".primary") It will select all elements with class="pr
class,.class $(".primary,.secondary") It will select all elements with the class
element $("p") It will select all p elements.
el1,el2,el3 $("h1,div,p") It will select all h1, div, and p elements
:first $("p:first") This will select the first p element
:last $("p:last") This will select he last p element
:even $("tr:even") This will select all even tr elements
:odd $("tr:odd") This will select all odd tr elements
:first-child $("p:first-child") It will select all p elements that are the
:first-of-type $("p:first-of-type") It will select all p elements that are the

parent
:last-child $("p:last-child") It will select all p elements that are the
:last-of-type $("p:last-of-type") It will select all p elements that are the

parent
:nth-child(n) $("p:nth-child(2)") This will select all p elements that are t
:nth-last-child(n) $("p:nth-last-child(2)") This will select all p elements that are t

parent, counting from the last child
:nth-of-type(n) $("p:nth-of-type(2)") It will select all p elements that are the

parent
:nth-last-of- $("p:nth-last-of- This will select all p elements that are t

type(n) type(2)") parent, counting from the last child
:only-child $("p:only-child") It will select all p elements that are the
:only-of-type $("p:only-of-type") It will select all p elements that are the

their parent
parent > child $("div > p") It will select all p elements that are a di
parent descendant $("div p") It will select all p elements that are des
element + next $("div + p") It selects the p element that are next to
element ~ siblings $("div ~ p") It selects all p elements that are sibling
:eq(index) $("ul li:eq(3)") It will select the fourth element in a list
:gt(no) $("ul li:gt(3)") Select the list elements with an index g
:lt(no) $("ul li:lt(3)") Select the list elements with an index le

:not(selector) $("input:not(:empty)") Select all input elements that are not em
:header $(":header") Select all header elements h1, h2 ...
:animated $(":animated") Select all animated elements
:focus $(":focus") Select the element that currently has fo
:contains(text) $(":contains('Hello')") Select all elements which contains the t
:has(selector) $("div:has(p)") Select all div elements that have a p ele
:empty $(":empty") Select all elements that are empty
:parent $(":parent") Select all elements that are a parent of
:hidden $("p:hidden") Select all hidden p elements
:visible $("table:visible") Select all visible tables
:root $(":root") It will select the document's root eleme
:lang(language) $("p:lang(de)") Select all p elements with a lang attribu
[attribute] $("[href]") Select all elements with a href attribute
[attribute=value] $("[href='default.htm']") Select all elements with a href attribute

"default.htm"
[attribute!=value] $("[href!='default.htm']") It will select all elements with a href att

"default.htm"
[attribute$=value] $("[href$='.jpg']") It will select all elements with a href att

".jpg"
[attribute|=value] $("[title|='Tomorrow']") Select all elements with a title attribute
'Tomorrow', or starting with 'Tomorrow
[attribute^=value] $("[title^='Tom']") Select all elements with a title attribute
[attribute~=value] $("[title~='hello']") Select all elements with a title attribute

specific word "hello"
[attribute*=value] $("[title*='hello']") Select all elements with a title attribute

"hello"
:input $(":input") It will select all input elements
:text $(":text") It will select all input elements with typ
:password $(":password") It will select all input elements with typ
:radio $(":radio") It will select all input elements with typ
:checkbox $(":checkbox") Itwill select all input elements with type
:submit $(":submit") It will select all input elements with typ
:reset $(":reset") It will select all input elements with typ
:button $(":button") It will select all input elements with typ
:image $(":image") It will select all input elements with typ
:file $(":file") It will select all input elements with typ
:enabled $(":enabled") Select all enabled input elements
:disabled $(":disabled") It will select all disabled input elements

:selected $(":selected") It will select all selected input elements
:checked $(":checked") It will select all checked input elements
jQuery Effects
jQuery enables us to add effects on a web page. jQuery effects can be categorized
into fading, sliding, hiding/showing and animation effects.
jQuery provides many methods for effects on a web page. A complete list of jQuery
effect methods are given below:
No. Method Description
1) animate() performs animation.
2 clearQueue( It is used to remove all remaining queued functions from the selecte
)
3) delay() sets delay execution for all the queued functions on the selected elem
4 dequeue() It is used to remove the next function from the queue, and then exe
5) fadein() shows the matched elements by fading it to opaque. In other words,

selected elements.
6) fadeout() shows the matched elements by fading it to transparent. In other wo
selected elements.
7) fadeto() adjusts opacity for the matched element. In other words, it fades in/
elements.
8) fadetoggle() shows or hides the matched element. In other words, toggles betwee
fadeOut() methods.
9) finish() It stops, removes and complete all queued animation for the selecte
10) hide() hides the matched or selected elements.
11) queue() shows or manipulates the queue of methods i.e. to be executed on t
12) show() displays or shows the selected elements.
13) slidedown() shows the matched elements with slide.
14) slidetoggle() shows or hides the matched elements with slide. In other words, it is
between the slideUp() and slideDown() methods.
15) slideup() hides the matched elements with slide.
16) stop() stops the animation which is running on the matched elements.
17) toggle() shows or hides the matched elements. In other words, it toggles bet
show() methods.
jQuery hide()
The jQuery hide() method is used to hide the selected elements.
Syntax:
1. $(selector).hide();
2. $(selector).hide(speed, callback);
3. $(selector).hide(speed, easing, callback);
speed: It is an optional parameter. It specifies the speed of the delay. Its possible
vales are slow, fast and milliseconds.
Pause
Unmute
Loaded: 17.74%
Fullscreen
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after

completion of hide() effect.
Let's take an example to see the jQuery hide effect.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.
js"></script>
5. <script>
6. $(document).ready(function(){
7. $("#hide").click(function(){
8. $("p").hide();
9. });
10.});
11.</script>
12.</head>
13.<body>
14.<p>
15.<b>This is a little poem: </b><br/>
16.Twinkle, twinkle, little star<br/>
17.How I wonder what you are<br/>
18.Up above the world so high<br/>
19.Like a diamond in the sky<br/>
20.Twinkle, twinkle little star<br/>
21.How I wonder what you are
22.</p>
23.<button id="hide">Hide</button>
24.</body>
25.</html>
jQuery show()
The jQuery show() method is used to show the selected elements.
Syntax:
1. $(selector).show();
2. $(selector).show(speed, callback);
3. $(selector).show(speed, easing, callback);

completion of show() effect.
Let's take an example to see the jQuery show effect.
1. <!DOCTYPE html>
2. <html>
3. <head>
js"></script>
5. <script>
8. $("p").hide();
9. });
10. $("#show").click(function(){
11. $("p").show();
12. });
13.});
14.</script>
15.</head>
16.<body>
17.<p>
18.<b>This is a little poem: </b><br/>
24.How I wonder what you are
25.</p>
26.<button id="hide">Hide</button>
27.<button id="show">Show</button>
28.</body>
29.</html>
Test it Now
Output:
This is a little poem:

Twinkle, twinkle, little star
How I wonder what you are
Up above the world so high
Like a diamond in the sky
Twinkle, twinkle little star
Hide Show
jQuery show() effect with speed parameter

Let's see the example of jQuery show effect with 1500 milliseconds speed.
3. $("p").hide(1000);
4. });
5. $("#show").click(function(){
6. $("p").show(1500);
7. });
8. });
jQuery toggle()
The jQuery toggle() is a special type of method which is used to toggle between the
hide() and show() method. It shows the hidden elements and hides the shown
element.
Syntax:
1. $(selector).toggle();
2. $(selector).toggle(speed, callback);
3. $(selector).toggle(speed, easing, callback);
4. $(selector).toggle(display);

completion of toggle() effect.
display: If true, it displays element. If false, it hides the element.
Let's take an example to see the jQuery toggle effect.
1. <!DOCTYPE html>
2. <html>
3. <head>
js"></script>
5. <script>
7. $("button").click(function(){
8. $("div.d1").toggle();
9. });
10.});
11.</script>
12.</head>
13.<body>
14.<button>Toggle</button>
15.<div class="d1" style="border:1px solid black;padding:10px;width:250px">

16.<p><b>This is a little poem: </b><br/>
22.How I wonder what you are</p>
23.</div>
24.</body>
25.</html>
Test it Now
Output:
Toggle
This is a little poem:

Twinkle, twinkle, little star
Up above the world so high
Like a diamond in the sky
Twinkle, twinkle little star
jQuery toggle() effect with speed parameter

Let's see the example of jQuery toggle effect with 1500 milliseconds speed.
3. $("div.d1").toggle(1500);
4. });
5. });
jQuery fadeIn()
jQuery fadeIn() method is used to fade in the element.
Syntax:
1. $(selector).fadein();
2. $(selector).fadeIn(speed,callback);
3. $(selector).fadeIn(speed, easing, callback);
Pause
Unmute
Loaded: 23.27%
Fullscreen

completion of fadein() effect.
Let's take an example to demonstrate jQuery fadeIn() effect.
1. <!DOCTYPE html>
2. <html>
3. <head>
js"></script>
5. <script>
8. $("#div1").fadeIn();
9. $("#div2").fadeIn("slow");
10. $("#div3").fadeIn(3000);
11. });
12.});
13.</script>
14.</head>
15.<body>
16.<p>See the fadeIn() method example with different parameters.</p>
17.<button>Click to fade in boxes</button><br><br>
18.<div id="div1" style="width:80px;height:80px;display:none;background-
color:red;"></div><br>
color:green;"></div><br>
color:blue;"></div>
21.</body>
22.</html>
jQuery fadeOut()
The jQuery fadeOut() method is used to fade out the element.
Syntax:
1. $(selector).fadeOut();
2. $(selector).fadeOut(speed,callback);
3. $(selector).fadeOut(speed, easing, callback);
Pause
Unmute
Loaded: 15.64%
Fullscreen

completion of fadeOut() effect.
Let's take an example to demonstrate jQuery fadeOut() effect.
1. <!DOCTYPE html>
2. <html>
3. <head>
js"></script>
5. <script>
8. $("#div1").fadeOut();
9. $("#div2").fadeOut("slow");
10. $("#div3").fadeOut(3000);
11. });
12.});
13.</script>
14.</head>
15.<body>
16.<p>See the fadeOut() method example with different parameters.</p>
17.<button>Click to fade out boxes</button><br><br>
18.<div id="div1" style="width:80px;height:80px;background-
color:blue;"></div>
21.</body>
22.</html>
jQuery fadeToggle()
jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut()
methods. If the elements are faded in, it will make them faded out and if they are
faded out it will make them faded in.
Syntax:
1. $(selector).fadeToggle();
2. $(selector).fadeToggle(speed,callback);
3. $(selector).fadeToggle(speed, easing, callback);

completion of fadeToggle() effect.
Let's take an example to demonstrate jQuery fadeToggle() effect.
1. <!DOCTYPE html>
2. <html>
3. <head>
js"></script>
5. <script>
8. $("#div1").fadeToggle();
9. $("#div2").fadeToggle("slow");
10. $("#div3").fadeToggle(3000);
11. });
12.});
13.</script>
14.</head>
15.<body>
16.<p>See the fadeToggle() method example with different parameters.</p>
17.<button>Click to fade Toggle boxes</button><br><br>
color:blue;"></div>
21.</body>
22.</html>
jQuery fadeTo()
jQuery fadeTo() method is used to fading to a given opacity.
Syntax:
1. $(selector).fadeTo(speed, opacity);
2. $(selector).fadeTo(speed, opacity, callback);
3. $(selector).fadeTo(speed, opacity, easing, callback);
speed: It specifies the speed of the delay. Its possible vales are slow, fast and
milliseconds.
opacity:It specifies the opacity. The opacity value ranges between 0 and 1.

completion of fadeToggle() effect.
Let's take an example to demonstrate jQuery fadeTo() effect.
1. <!DOCTYPE html>
2. <html>
3. <head>
js"></script>
5. <script>
8. $("#div1").fadeTo("slow", 0.3);
9. $("#div2").fadeTo("slow", 0.4);
10. $("#div3").fadeTo("slow", 0.5);
11. });
12.});
13.</script>
14.</head>
15.<body>
16.<p>See the fadeTo() method example with different parameters.</p>
17.<button>Click to fade boxes</button><br><br>
color:blue;"></div>
21.</body>
22.</html>
jQuery slideDown()
jQuery slideDown() method is used to slide down an element.
Syntax:
1. $(selector).slideDown(speed);
2. $(selector).slideDown(speed, callback);
3. $(selector).slideDown(speed, easing, callback);
milliseconds.

completion of slideDown() effect.
Let's take an example to demonstrate jQuery slideDown() effect.
1. <!DOCTYPE html>
2. <html>
3. <head>
js"></script>
5. <script>
7. $("#flip").click(function(){
8. $("#panel").slideDown("slow");
9. });
10.});
11.</script>
12. <style>
13.#panel, #flip {
14. padding: 5px;
15. text-align: center;
16. background-color: #00FFFF;
17. border: solid 1px #c3c3c3;
18.}
19.#panel {
20. padding: 50px;
21. display: none;
22.}
23.</style>
24.</head>
25.<body>
26.<div id="flip">Click to slide down panel</div>
27.<div id="panel">Hello javatpoint.com!
28.It is the best tutorial website to learn jQuery and other languages.</div>
29.</body>
30.</html>
jQuery slideUp()
jQuery slideDown() method is used to slide up an element.
Syntax:
1. $(selector).slideUp(speed);
2. $(selector).slideUp(speed, callback);
3. $(selector).slideUp(speed, easing, callback);
milliseconds.

completion of slideUp() effect.
Let's take an example to demonstrate jQuery slideUp() effect.
1. <!DOCTYPE html>
2. <html>
3. <head>
js"></script>
5. <script>
8. $("#panel").slideUp("slow");
9. });
10.});
11.</script>
12. <style>
13.#panel, #flip {
14. padding: 5px;
18.}
19.#panel {
20. padding: 50px;
21.}
22.</style>
23.</head>
24.<body>
25.<div id="flip">Click to slide up panel</div>
28.</body>
29.</html>
jQuery slideToggle()
jQuery slideToggle () method is used to toggle between slideUp() and slideDown()
method. If the element is slide down, it will slide up the element and if it is slide up,
it will slide down.
Syntax:
1. $(selector).slideToggle(speed);
2. $(selector).slideToggle(speed, callback);
3. $(selector).slideToggle(speed, easing, callback);
milliseconds.

completion of slideToggle() effect.
Let's take an example to demonstrate jQuery slideToggle() effect.
1. <!DOCTYPE html>
2. <html>
3. <head>
js"></script>
5. <script>
8. $("#panel").slideToggle("slow");
9. });
10.});
11.</script>
12. <style>
13.#panel, #flip {
14. padding: 5px;
18.}
19.#panel {
20. padding: 50px;
21. display:none;
22.}
23.</style>
24.</head>
25.<body>
26.<div id="flip">Click to slide toggle panel</div>
29.</body>
30.</html>
jQuery animate()
The jQuery animate() method provides you a way to create custom animations.
Syntax:
1. $(selector).animate({params}, speed, callback);
Here, params parameter defines the CSS properties to be animated.
The speed parameter is optional and specifies the duration of the effect. It can be

set as "slow" , "fast" or milliseconds.
The callback parameter is also optional and it is a function which is executed after

the animation completes.
Let's take a simple example to see the animation effect.
1. <!DOCTYPE html>
2. <html>
3. <head>
js"></script>
5. <script>
8. $("div").animate({left: '450px'});
9. });
10.});
11.</script>
12.</head>
13.<body>
14.<button>Start Animation</button>
15.<p>A simple animation example:</p>
16.<div style="background:#98bf21;height:100px;width:100px;position:absolu
te;"></div>
17.</body>
18.</html>
Note: The default position of all HTML elements is static. If you want to
manipulate their position, set the CSS position property to the element to relative,
fixed or absolute.
jQuery animate() method using multiple

properties
You can use multiple properties to animate at the same time.
1. <!DOCTYPE html>
2. <html>
3. <head>
js"></script>
5. <script>
8. $("div").animate({
9. left: '250px',
10. opacity: '0.5',
11. height: '150px',
12. width: '150px'
13. });
14. });
15.});
16.</script>
17.</head>
18.<body>
20.<div style="background:#125f21;height:100px;width:100px;position:absolu
te;"></div>
21.</body>
22.</html>
jQuery animate() method using relative values
You can also define relative values (it is relative to the element's current value) by
putting += or -= in front of the value.
1. <!DOCTYPE html>
2. <html>
3. <head>
js"></script>
5. <script>
9. left: '250px',
10. height: '+=150px',
11. width: '+=150px'
12. });
13. });
14.});
15.</script>
16.</head>
17.<body>
te;"></div>
20.</body>
21.</html>
Test it Now
Output:
Start Animation
jQuery animate() method using predefined value

You can also specify a property's animation value as "show" , "hide" , or "toggle".
In this example, we are using "toggle" value for height, it means it will show/hide
the selected element.
1. <!DOCTYPE html>
2. <html>
3. <head>
js"></script>
5. <script>
9. height: 'toggle'
10. });
11. });
12.});
13.</script>
14.</head>
15.<body>
te;"></div>
18.</body>
19.</html>
Test it Now
Output:
Start Animation
jQuery Color animation

You can also animate the properties of elements between colors.
1. <!doctype html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8">
5. <title>jQuery UI Effects - Animate demo</title>
6. <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smo
othness/jquery-ui.css">
7. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
8. <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
9. <style>
10. .toggler { width: 500px; height: 200px; position: relative; }
11. #button { padding: .5em 1em; text-decoration: none; }
12. #effect { width: 240px; height: 135px; padding: 0.4em; position: relative;
background: #fff; }
13. #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
14. </style>
15. <script>
16. $(function() {
17. var state = true;
18. $( "#button" ).click(function() {
19. if ( state ) {
20. $( "#effect" ).animate({
21. backgroundColor: "#aa0000",
22. color: "#fff",
23. width: 500
24. }, 1000 );
25. } else {
26. $( "#effect" ).animate({
27. backgroundColor: "#fff",
28. color: "#000",
29. width: 240
30. }, 1000 );
31. }
32. state = !state;
33. });
34. });
35. </script>
36.</head>
37.<body>
38.<div class="toggler">
39. <div id="effect" class="ui-widget-content ui-corner-all">
40. <h3 class="ui-widget-header ui-corner-all">Animate</h3>
41. <p>Javatpoint.com is the best tutorial website to learn Java and other pro
gramming languages.</p>
42. </div>
43.</div>
44. <button id="button" class="ui-state-default ui-corner-all">Toggle Effec
t</button>
45.</body>
46.</html>
jQuery delay()
The jQuery delay() method is used to delay the execution of functions in the queue.
It is a best method to make a delay between the queued jQuery effects. The jQUery
delay () method sets a timer to delay the execution of the next item in the queue.
Syntax:
1. $(selector).delay (speed, queueName)
Pause
Unmute
Loaded: 23.27%
Fullscreen
queueName: It is also an optional parameter. It specifies the name of the queue.

Its default value is "fx" the standard queue effect.
Let's take an example to see the delay effect:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min
.js"></script>
5. <script>
8. $("#div1").delay("slow").fadeIn();
9. });
10.});
11.</script>
12.</head>
13.<body>
14.<button>Click me</button><br>
color:black;"></div><br>
16.</body>
17.</html>
Test it Now
Output:
Click me
jQuery delay() example with different values

Let's see a jQuery delay() effect example where we are using fast, slow and
milliseconds values.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min
.js"></script>
5. <script>
8. $("#div1").delay("fast").fadeIn();
9. $("#div2").delay("slow").fadeIn();
10. $("#div3").delay(1000).fadeIn();
11. $("#div4").delay(2000).fadeIn();
12. $("#div5").delay(4000).fadeIn();
13.});
14.});
15.</script>
16.</head>
17.<body>
18.<p>This example sets different speed values for the delay() method.</p>
19.<button>Click to fade in boxes with a different delay time</button>
20.<br><br>
color:black;"></div><br>
color:blue;"></div><br>
color:purple;"></div><br>
26.</body>
27.</html>

Jquery Notes

Uploaded by

Copyright:

Available Formats

Jquery Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jquery Notes

Uploaded by

Copyright:

Available Formats

JQUERY NOTES

o DOM element selection

o Effects and Animations

o HTML event methods

o Extensibility through plug-ins

Why jQuery is required

o It facilitates the users to write UI related function codes in minimum possible

o Browser's compatible web applications can be developed.

o It uses mostly new features of new browsers.

Some of these companies are:

Let's see a simple example of jQuery.

The first paragraph is selected.

The second paragraph is selected.

The third paragraph is selected.

$(document).ready() and $()

In place of $(document).ready(), you can use shorthand notation $() only.

The above code is equivalent to this code.

20.The first paragraph is selected.

21.The second paragraph is selected.

22.The third paragraph is selected.

24. function() { $("p").css("background-

The $() factory function

S.No Selector Description

1) Tag It represents a tag name available in the DOM.

2) Tag ID: It represents a tag available with a specific ID in the DOM.

3) Tag It represents a tag available with a specific class in the DOM.

and the background color is set to "pink".

This is first paragraph.

This is second paragraph.

This is third paragraph.

How to use Selectors

S.No. Selector Description

2) #ID: It selects a single element that matches with the giv

4) Universal(*) It selects all elements available in a DOM.

Selector Example Description

* $("*") It is used to select all elements.

#id $("#firstname") It will select the element with id="firstn

.class $(".primary") It will select all elements with class="pr

class,.class $(".primary,.secondary") It will select all elements with the class

element $("p") It will select all p elements.

el1,el2,el3 $("h1,div,p") It will select all h1, div, and p elements

:first $("p:first") This will select the first p element

:last $("p:last") This will select he last p element

:even $("tr:even") This will select all even tr elements

:odd $("tr:odd") This will select all odd tr elements

:first-child $("p:first-child") It will select all p elements that are the

:first-of-type $("p:first-of-type") It will select all p elements that are the

:last-of-type $("p:last-of-type") It will select all p elements that are the

:nth-child(n) $("p:nth-child(2)") This will select all p elements that are t

:nth-last-child(n) $("p:nth-last-child(2)") This will select all p elements that are t

:nth-of-type(n) $("p:nth-of-type(2)") It will select all p elements that are the

:nth-last-of- $("p:nth-last-of- This will select all p elements that are t

:only-child $("p:only-child") It will select all p elements that are the

:only-of-type $("p:only-of-type") It will select all p elements that are the

:eq(index) $("ul li:eq(3)") It will select the fourth element in a list

:gt(no) $("ul li:gt(3)") Select the list elements with an index g

:lt(no) $("ul li:lt(3)") Select the list elements with an index le

:header $(":header") Select all header elements h1, h2 ...

:animated $(":animated") Select all animated elements

[attribute=value] $("[title='hello']") Select all elements with a title attribute