Home > SKIP > XML and AJAX > Jquery

Jquery

  • Jquery is library for developing Ajax based applications.
  • Jquery is library for the Java Script programmers, which simplifies the development of web 2.0 applications.
  • Jquery helps the programmers to keep code simple and concise.
  • The Jquery library is designed to keep the things very simple and reusable.
  • Jquery library simplifies the process of traversal of HTML DOM ( Document Object Model ) tree.
  • You can use Jquery to handle events, perform animation, and add the Ajax support.

Advantages

  1. JQuery can perform better task than traditional Javascript code.
  2. Various number of PlugIns are available and a large community support
  3. The jQuery library is providing many easy to use functions and methods to make rich applications.
  4. It simplifies the Ajax Development. Just have to write 5 or 6 lines to call the Ajax
  5. These functions are very easy to learn and implement
  6. We can use Jquery in all the web based applications.

Example

Jquery to Retrieve Server’s Current Time Steps to develop the Current Server Time program

Step 1:

Create php file to that prints the current server data. Here is the code of

PHP script (time.php).

<?php
$time_now=mktime(date('h')+5,date('i')+30,date('s')); print $time_now=date('l M dS, Y, h:i:s A',$time_now);
?>

Step 2:

Write HTML page to call the time.php. Create a new file currentservertime.html) and add the following code into it:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Current Date and Time</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript"> function timeExam() { $.ajax({ url : "time.php", success : function (data) { $("#contentArea").html(data); }}); setTimeout("timeExam()", 1000); }
</script>
</head>

<body onload="timeExam();">
<table width="100%">
<tr>
<td width="100%" align="center">
<div id="contentArea" style="color:blue;
font:bold 14px arial;padding-top:140px;">
</div>
</td>
</tr>
</table>
</body>
</html>

Downloading and Installing jQuery

jQuery comes as single js file. So, its very easy to download and install jQuery in any web application. You can even add it to your existing application and use jQuery functions. Due to this simplicity programmers are using jQuery for adding Ajax capabilities into their web applications.

You can use Jquery to handle events, perform animation, and add the Ajax support.

Jquery API References

  • Jquery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilites

jQuery (expression, [context])

This function accepts a string containing a CSS selector which is then used to match a set of elements.

The most basic use of this function is to pass in an expression (usually consisting of CSS), which then finds all matching elements. By default, if no context is specified, $() looks for DOM elements within the context of the current HTML document. If you do specify a context, such as a DOM element or jQuery object, the expression will be matched against the contents of that context.

Events

show( ) Returns: jQuery
Displays each of the set of matched elements if they are hidden.

show(speed, callback) Returns: jQuery
Show all matched elements using a graceful animation and firing an optional
callback after completion.

hide( ) Returns: jQuery
Hides each of the set of matched elements if they are shown.

hide(speed, callback) Returns: jQuery
Hide all matched elements using a graceful animation and firing an optional callback after completion.

toggle( ) Returns: jQuery
Toggle displaying each of the set of matched elements.

toggle(speed, callback) Returns: jQuery
Toggle displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion.

slideDown(speed, callback) Returns: jQuery
Reveal all matched elements by adjusting their height and firing an optional callback after completion.

slideUp(speed, callback) Returns: jQuery
Hide all matched elements by adjusting their height and firing an optional callback after completion.

slideToggle(speed, callback) Returns: jQuery
Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.

AJAX

Ajax Requests:

  • jQuery.ajax( options ) Returns: XMLHttpRequest
  • Load a remote page using an HTTP request.
  • load( url, data, callback ) Returns: jQuery
  • Load HTML from a remote file and inject it into the DOM.
  • jQuery.get( url, data, callback, type ) Returns: XMLHttpRequest
  • Load a remote page using an HTTP GET request.
  • jQuery.getJSON( url, data, callback ) Returns: XMLHttpRequest
  • Load JSON data using an HTTP GET request.
  • jQuery.getScript( url, callback ) Returns: XMLHttpRequest
  • Loads, and executes, a local JavaScript file using an HTTP GET request.
  • jQuery.post( url, data, callback, type ) Returns: XMLHttpRequest
  • Load a remote page using an HTTP POST request.

Ajax Events:

ajaxComplete( callback ) Returns: jQuery
Attach a function to be executed whenever an AJAX request completes.

ajaxError( callback ) Returns: jQuery
Attach a function to be executed whenever an AJAX request fails.

ajaxSend( callback ) Returns: jQuery
Attach a function to be executed before an AJAX request is sent.

ajaxStart( callback ) Returns: jQuery
Attach a function to be executed whenever an AJAX request begins and there is none already active.

ajaxStop( callback ) Returns: jQuery
Attach a function to be executed whenever all AJAX requests have ended.

ajaxSuccess( callback ) Returns: jQuery
Attach a function to be executed whenever an AJAX request completes successfully.

jQuery.ajaxSetup( options )
Setup global settings for AJAX requests.

Serialize( ) Returns: String
Serializes a set of input elements into a string of data.

SerializeArray( ) Returns: Array<Object>
Serializes all forms and form elements (like the .serialize() method) but returns a JSON data structure for you to work with.

Note: The JSON structure returned is not a string. You must use a plug in or third-party library to "stringify".