Scribd
Upload
1 views

J Query

j query in detail

Uploaded by

zamzamtradersshahdadkot
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
1 views

J Query

j query in detail

Uploaded by

zamzamtradersshahdadkot
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

What is

?
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. With a
combination of versatility and extensibility, jQuery has changed the way that millions
of people write JavaScript.
How to Use
?
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 jQuery.com

• 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)
Effect (Hide –
Show)
jQuery hide() and show()

With jQuery, you can hide and show HTML elements with the hide() and show() methods:

Example:

$("#hide").click(function(){
$("p").hide();
});

$("#show").click(function(){
$("p").show();
});
Effect (FadeIn)

jQuery fadeIn() Method


The jQuery fadeIn() method is used to fade in a hidden element.Click to fade in/

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.

The following example demonstrates the fadeIn() method with different parameters:
Effect (FadeOut)

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:
Effect
(FadeToggle)
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:
Effect (FadeTo)

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.

The following example demonstrates the fadeTo() method with different parameters:
Effects
- SlideDown
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.

The following example demonstrates the slideDown() method:


Effects - SlideUp

jQuery slideUp() Method


jQuery slideUp() Method

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.

The following example demonstrates the slideUp() method:


Effects
- SlideToggle
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.

The following example demonstrates the slideToggle() method:

You might also like