jQuery Methods

jQuery Methods and Description

animate(params,[duration,easing,callback])

A function for making custom animations.

 

fadein(speed,[callback])

Fade in all matched elements by adjusting their opacity and firing an optional call-back after completion.

 

fadeout(speed,[call-back])

Fade out all matched elements by adjusting their opacity to 0, then setting to “none” and firing an optional call-back after completion.

 

fadeTo(speed,opacity,callback)

Fade the opacity of all matched elements to a specified opacity and firing an optional call-back after completion.

 

hide()                  

Hides each of the set of matched elements if they are shown.

 

hide(speed.[call back])

Hide all matched elements using a graceful animation and firing an optional call-back after completion.

 

Show()

Displays each of the set of matched elements if they are hidden.

 

show(speed,[call back])

Show all matched elements using a graceful animation and firing an optional callback after completion.

 

slideDown(speed,[callback])

Reveal all matched elements by adjusting their height and firing an optional call back after completion.

 

slideToggle(speed,[call back])

Toggle the visibility of all matched elements by adjusting their height  and firing an optional call-back after completion.

 

slideUp(speed,[call-back])

Hide all matched elements by adjusting their height and firing an optional call back after completion.

 

stop([clearQueue,gotoEnd])

Stops all the currently running animations on all the specified elements.

 

toggle()

Toggle displaying each of the set of matched elements.

 

toggle(speed,[callback])

Toggle displaying each of the set of matched elements using a graceful animation and firing an optional call back after completion.

 

toggle(switch)

Toggle displaying each of the set of matched elements based upon the switch(true shows all elements , false hides all elements)

 

jQuery.fx.off

Globally disable all animations.

 

jQuery - Ajax

Ajax is an acronym standing for Asynchronous JavaScript and XML and this technology help us to load data from the server without a browser page refresh.

jQuery is a great tool which provides a rich set of AJAX methods to develop next generation web application.

 

Loading Simple Data

This is very easy to load any static or dynamic data using jQuery AJAX, jQuery provides load() method to do the job:

 

Syntax

Here is the simple syntax for load() method:

[selector].load( URL, [data], [callback] );

Here is the description of all the parameters:

URL: The URL of the server-side resource to which the request is sent. It could be a CGI,APS,JSP or PHP script which generates data dynamically or out of a database.

Data: This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request. If specified, the request is made using the POST method.Id omitted, the GET method is used.

Call-back: A call-back function invoked after the response datas has been loaded in to the elements of the matched set. The first parameter passed to this function is the response text received from the server and second parameter is the status code.

 

Example

Consider the following HTML file with a small jQuery coding:

<html>

<head>

<title>the title </title>

<script type=”text/javascript”

Src=”/jQuery/jQuery-1.3.2.min.js”></script>

<script type=”text/javascript” language =”javascript”>

${document}.ready{function}{}{

${“#driver”}.click{function{event}{

${“#stage’}.load{‘/jQuery/result.html’};

}};

</script>

</head>

<body>

<p> Click on the button to load result.html file:</p>

<div id=”stage” style=”background-color:blue;”>

STAGE

</div>

<input type=”button” id=”driver” value=”Load Data”/>

<body>

</html>

Here load( ) initiates an Ajax request to the specified URL/jQuery/result.html file. After loading this file all the content would be populated inside<div>tagged with ID stage. Assuming, our /jQuery/result.html file has just one HTML line:

 

<h1>THIS IS RESULT….</h1>

When you click the given button,then result.html file get loaded.