Scribd
Upload
62 views

J Query

This jQuery tutorial provides an introduction to the jQuery library and JavaScript framework. It explains that jQuery is a small, lightweight JavaScript library that simplifies HTML document manipulation, event handling, animations, and Ajax interactions. It also provides examples of how to select HTML elements and modify their properties using jQuery selectors and methods.

Uploaded by

Priyanka Kaliyaperumal
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
62 views

J Query

This jQuery tutorial provides an introduction to the jQuery library and JavaScript framework. It explains that jQuery is a small, lightweight JavaScript library that simplifies HTML document manipulation, event handling, animations, and Ajax interactions. It also provides examples of how to select HTML elements and modify their properties using jQuery selectors and methods.

Uploaded by

Priyanka Kaliyaperumal
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 24

jQuery Tutorial

jQuery tutorial for beginners and professionals provides deep knowledge of jQuery
technology. Our jQuery tutorial will help you to learn jQuery fundamentals, example,
selectors, events, effects, traversing, CSS and attributes.

What is jQuery
o jQuery is a small and lightweight JavaScript library.
o jQuery is cross-platform.
o jQuery means "write less do more".
o jQuery simplifies AJAX call and DOM manipulation.

jQuery Example
In this tutorial, you will get a lot of jQuery examples to understand the topic well.
Let's see a simple jQuery example.

File: firstjquery.html
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/
jquery/2.1.3/jquery.min.js">  
6.  </script>  
7.  <script type="text/javascript" language="javascript">  
8.  $(document).ready(function() {  
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>  
Test it Now

Output:

This is first paragraph.

Play Video

This is second paragraph.

This is third paragraph.

Prerequisite
Before learning jQuery, you must have the basic knowledge of JavaScript.

Audience
Our jQuery tutorial is designed to help beginners and professionals.

Problem
We assure that you will not find any problem in this jQuery tutorial. But if there is any
mistake, please post the problem in contact form.

Next Topic What is jQuery

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.

o jQuery is a small, fast and lightweight JavaScript library.


o jQuery is platform-independent.
o jQuery means "write less do more".
o jQuery simplifies AJAX call and DOM manipulation.

jQuery Features
Following are the important features of jQuery.

Pause
Unmute

Current Time 0:01

Duration 18:10
Loaded: 2.94%
 
Fullscreen

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

What should you know before starting to learn


jQuery?
It is always advised to a fresher to learn the basics of web designing before starting
to learn jQuery. He should learn HTML, CSS and JavaScript first. But, if you belong to
a technical background, it is up to you.

If you are a fresher and want to study these subjects first.

Next Topic jQuery History


← PrevNext →

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 Release History


Let's see the release dates of jQuery versions.

Version No. Release Date

1.0 26,August,2006

1.1 14,January,2007

1.2 10, September, 2007

1.3 14, January, 2009

1.4 14, January, 2010

1.5 31, January, 2011

1.6 3, May, 2011

1.7 3, November, 2011

1.8 9, August, 2012

1.9 15, January, 2013

1.10 24,May, 2013

1.11 24, January, 2014


2.0 18, April, 2013

2.1 24, January, 2014

Next Topic jQuery Example

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.

File: firstjquery.html
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/
jquery/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>  
Test it Now
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.

1. $(document).ready(function() {  
2. $("p").css("color", "red");  
3. });  

The above code is equivalent to this code.

1. $(function() {  
2. $("p").css("color", "red");  
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/
jquery/2.1.3/jquery.min.js">  
6.  </script>  
7.  <script type="text/javascript" language="javascript">  
8.  $(function() {  
9.  $("p").css("color", "red");  
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>  
Test it Now

Output:

The first paragraph is selected.

The second paragraph is selected.

The third paragraph is selected.

function() { $("p").css("background-color", "cyan"); }


It changes the background-color of all <p> tag or paragraph to cyan.

Next Topic jQuery Selectors

← Prev

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.
Pause

Unmute

Current Time 0:01

Duration 18:10

Loaded: 3.30%

 

Fullscreen

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 Name: It represents a tag name available in th


For example: $('p') selects all paragraphs'p'in the document.

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


For example: $('#real-id') selects a specific element in the document that has an ID o

3) Tag Class: It represents a tag available with a specific class in


For example: $('real-class') selects all elements in the document that have a class of

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".

File: firstjquery.html

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/
jquery/2.1.3/jquery.min.js">  
6.  </script>  
7.  <script type="text/javascript" language="javascript">  
8.  $(document).ready(function() {  
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>  
Test it Now

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 element nam

2) #ID: It selects a single element that matches with the given id.

3) .Class: It selects all elements that matches with the given class.

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 selectors A

Different jQuery Selectors

Selector Example Description

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

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

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

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

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 child o

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

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

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

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

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

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

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

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

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

parent > child $("div > p") It will select all p elements that are a direct c
element

parent $("div p") It will select all p elements that are descenda
descendant element

element + next $("div + p") It selects the p element that are next to each div el

element ~ siblings $("div ~ p") It selects all p elements that are siblings of a div el

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

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

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

:not(selector) $("input:not(:empty)") Select all input elements that are not empty

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

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

:focus $(":focus") Select the element that currently has focus

:contains(text) $(":contains('Hello')") Select all elements which contains the text "Hello"

:has(selector) $("div:has(p)") Select all div elements that have a p element

:empty $(":empty") Select all elements that are empty


:parent $(":parent") Select all elements that are a parent of another ele

:hidden $("p:hidden") Select all hidden p elements

:visible $("table:visible") Select all visible tables

:root $(":root") It will select the document's root element

:lang(language) $("p:lang(de)") Select all p elements with a lang attribute value


"de"

[attribute] $("[href]") Select all elements with a href attribute

[attribute=value] $("[href='default.htm']") Select all elements with a href attribute val


"default.htm"

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

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

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


'Tomorrow', or starting with 'Tomorrow' followed b

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


"Tom"

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


specific word "hello"

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


word "hello"

:input $(":input") It will select all input elements

:text $(":text") It will select all input elements with type="text"

:password $(":password") It will select all input elements with type="passwor

:radio $(":radio") It will select all input elements with type="radio"

:checkbox $(":checkbox") Itwill select all input elements with type="checkbo

:submit $(":submit") It will select all input elements with type="submit"


:reset $(":reset") It will select all input elements with type="reset"

:button $(":button") It will select all input elements with type="button"

:image $(":image") It will select all input elements with type="image"

:file $(":file") It will select all input elements with type="file"

: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

Next Topic jQuery Effects

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 selected eleme

3) delay() sets delay execution for all the queued functions on the selected elements.

4 dequeue() It is used to remove the next function from the queue, and then execute the

5) fadein() shows the matched elements by fading it to opaque. In other words, it


selected elements.

6) fadeout() shows the matched elements by fading it to transparent. In other words, it


selected elements.

7) fadeto() adjusts opacity for the matched element. In other words, it fades in/out
elements.

8) fadetoggle() shows or hides the matched element. In other words, toggles between the
fadeOut() methods.

9) finish() It stops, removes and complete all queued animation for the selected eleme

10) hide() hides the matched or selected elements.

11) queue() shows or manipulates the queue of methods i.e. to be executed on the selec

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 us
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 between t
show() methods.

Next Topic jQuery hide()


← Pre

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.

easing: It specifies the easing function to be used for transition.

Pause
Unmute

Current Time 2:02

Duration 18:10
Loaded: 16.88%
 
Fullscreen

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>  
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
How I wonder what you are

Hide

Next Topic jQuery show()

← Prev

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);  

speed: It is an optional parameter. It specifies the speed of the delay. Its possible
vales are slow, fast and milliseconds.

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 show() effect.

Let's take an example to see the jQuery show 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.     $("#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/>  
19. Twinkle, twinkle, little star<br/>  
20. How I wonder what you are<br/>  
21. Up above the world so high<br/>  
22. Like a diamond in the sky<br/>  
23. Twinkle, twinkle little star<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
How I wonder what you are

Hide Show

jQuery show() effect with speed parameter


Let's see the example of jQuery show effect with 1500 milliseconds speed.

1. $(document).ready(function(){  
2.         $("#hide").click(function(){  
3.         $("p").hide(1000);  
4.     });  
5.     $("#show").click(function(){  
6.         $("p").show(1500);  
7.     });  
8. });  
Test it Now

Next Topic jQuery toggle()

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);  

speed: It is an optional parameter. It specifies the speed of the delay. Its possible
vales are slow, fast and milliseconds.

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 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>    
4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/
jquery.min.js"></script>    
5. <script>    
6. $(document).ready(function(){    
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/>      
17. Twinkle, twinkle, little star<br/>      
18. How I wonder what you are<br/>      
19. Up above the world so high<br/>      
20. Like a diamond in the sky<br/>      
21. Twinkle, twinkle little star<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
How I wonder what you are
Up above the world so high
Like a diamond in the sky
Twinkle, twinkle little star
How I wonder what you are

jQuery toggle() effect with speed parameter


Let's see the example of jQuery toggle effect with 1500 milliseconds speed.

1. $(document).ready(function(){  
2.      $("button").click(function(){  
3.         $("div.d1").toggle(1500);  
4.     });  
5. });  
Test it Now

Next Topic jQuery fadein()

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);  

speed: It is an optional parameter. It specifies the speed of the delay. Its possible
vales are slow, fast and milliseconds.

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 fadein() effect.

Let's take an example to demonstrate jQuery fadeIn() 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.     $("button").click(function(){  
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>  
19. <div id="div2" style="width:80px;height:80px;display:none;background-
color:green;"></div><br>  
20. <div id="div3" style="width:80px;height:80px;display:none;background-
color:blue;"></div>  
21. </body>  
22. </html>   
Test it Now
Output:

See the fadeIn() method example with different parameters.

Click to fade in boxes

Next Topic jQuery fadeOut()

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);  

speed: It is an optional parameter. It specifies the speed of the delay. Its possible
vales are slow, fast and milliseconds.

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 fadein() effect.

Let's take an example to demonstrate jQuery fadeIn() 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.     $("button").click(function(){  
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>  
19. <div id="div2" style="width:80px;height:80px;display:none;background-
color:green;"></div><br>  
20. <div id="div3" style="width:80px;height:80px;display:none;background-
color:blue;"></div>  
21. </body>  
22. </html>   
Test it Now

Output:

See the fadeIn() method example with different parameters.

Click to fade in boxes

Next Topic jQuery fadeOut()

You might also like