JQueryCompleteRefence

Introduction

jQuery is nice piece of code that provides very good support for ajax. jQuery can be used to develop highly interactive web applications. In this jQuery tutorials series we will show you how to use jQuery to develop nice ajax based applications.
The jQuery is cross-browser JavaScript library and it helps the programmer's to develop cross-browser application easily. There are many available for the jQuery for different functionality. You can write your own plugin and then use it with jQuery.


What is jQuery?
jQuery is great library for developing ajax based application. jQuery is great library for the JavaScript programmers, which simplifies the development of web 2.0 applications. You can use jQuery to develop cool 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 tree. You can use jQuery to handle events, perform animation, and add the ajax support into your web applications with ease.

Why jQuery?

You can use simple JavaScript to perform all the functions that jQuery provides. Then why jQuery? The jQuery library is providing many easy to use functions and methods to make rich applications. These functions are very easy to learn and even a designer can learn it fast. Due to these features jQuery is very popular and in high demand among the developers. You can use jQuery in all the web based applications irrespective of the technology.
jQuery is java script and can be used with JSP, Servlets, ASP, PHP, CGI and almost all the web programming languages.
The jQuery code is very simple and easy to learn.
Here are the features of jQuery
• DOM element selections functions
• DOM traversal and modification
• Events
• CSS manipulation
• Effects and animations
• Ajax
• Extensibility
• Utilities - such as browser version and the each function.
• JavaScript Plugins

jQuery Features

jQuery have lot of functionalities but some of the key features are given below :
Selection of DOM elements :
The jQuery selector provide us capability to select DOM elements so that we can add functionality to them using methods of jQuery. It is using CSS 3.0 syntax which provide us freedom to select one or more elements. Using CSS , you can select element by id, class and collaborate with events to increase it's functionality.
The wrapped set
The selected elements reside inside a object known as wrapped set. It contain all the selected DOM elements, it has array like structure. You can traverse through this like an array and can select elements using index.
Events
jQuery provide simplified event handling, You can easily bind and unbind events and for supported browsers it also provide a normalized event model due to this it is very easy to handle events.When any event occurs , it is called under the context of the event that triggered it.
Extensibility through plug-ins
The jQuery architecture provide us freedom to extend functionality using plug-ins . The plug-ins are easy to use and easy to clip with your page. You just need to set parameters to use these jQuery plug-ins and also need to include plug-in file. Some the main jQuery plug-ins are :
1.XML and XSLT tools
2.cookie handling
3.datagrids
4.drag and drop events.
5.modal windows
6.dynamic lists
7.webservices
8.Ajax helpers
9.even a jQuery-based Commodore 64 emulator.
Cross-browser support
In JavaScript, the DOM implementations for event handling vary considerably between browsers. Where as jQuery providing a normalized event model for all supported browsers that makes it very easy to handle events.
Ajax support
AJAX stands for Asynchronous JavaScript and XML . Using AJAX we can connect to database and also can fetch the data from the server's database without refreshing the page. JQuery have very effective AJAX methods library to extend the functionality of AJAX.
Compatibility with languages
The jQuery script can be used with nearly all the web languages. Some of Frequently used languages with jQuery are given below:
1.PHP
2.JSP
3.ASP
4.Servlet
5.CGI

Downloading and Installing jQuery
In this section we will download and install jQuery for developing our demo application. 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.
[official site http://jquery.com/ ]


Download jquery-1.2.6.min.js and add into js directory of your application. Now all set and ready to add the jQuery support into your web application.


jQuery Hello World example
This section we are going to create our first jQuery application called "Hello World jQuery". This application will simply display
"Hello World !! (display due to jQuery)" message in browser.
After completing the example you will be able include the jQuery library in your application and use it to do simple functions.
Let's start developing the Hello World application in jQuery.
Setting up jQuery
For start , we require the jQuery library. You can get it using the following link :
http://code.jquery.com/jquery-1.4.2.js
When you click on the following link it will open a page containing jQuery library script. This file is around 70kb.You need to save this as "jquery-1.4.2.js". Now we are ready to use jQuery inside your html page.
Hello World Example(HelloWorld.html)











Hello World !! (display due to HTML)

Description of the program
The first and most important thing is to include jQuery library as:

If you are using the above tag as it is , you need to save the "jquery-1.4.2.js" in the same folder in which you saved your html page. You can also save it in another folder but in that case you need to provide the relative path.
Look precisely the below code :

For using jQuery script ,we write it inside




CLICK BELOW BUTTON TO SEE ALERT BOX







Description of the program
For using jQuery script ,we write it inside
This will include the jQuery library into your webpage. Then add the following code into JavaScript block of the html page:
$(document).ready(function(){
// Your code here
});
This method will be called once Document tree is ready. Here you can add any JavaScript function. Following example shows the hello world alert message:
I
Hello world alert box example(HelloAlert.html)









CLICK BELOW BUTTON TO SEE ALERT BOX







The following line includes the jQuery library into webpage:



jQuery jquery with other Libraries
There are many JavaScript libraries to help the developer to develop web applications. These libraries are designed to solve a particular problem efficiently. There may be some requirement of using these different libraries with jQuery. So, you may find incompatibility using these libraries with jQuery. In this section we are discussing the ways to use jQuery with other libraries. This issue comes as other libraries also uses $ to access the function of variable name. In this example you will see how to use $ to access both jQuery and other libraries functions and variables.
Using jQuery with other Libraries:
In your application if there is requirement of including other libraries such as prototype.js, YUI or mootools with jQuery, you can use the .noConflict() method of jQuery.
In jQuery $ is an alias for jQuery, so you can use jQuery() for accessing the jQuery methods. The following code example shows how you can use other libraries with jQuery:

jQuery Utility Functions
Understanding these functions are important as you will have to use these funtions very frequently while writing your jQuery application.
Here is the list of jQuery Utility Functions:
.clearQueue()
This function is used to remove all the functions from the queue that have not been executed.

jQuery.contains()
The jQuery.contains() function is used to check if a DOM node is within another DOM node.
jQuery.data()
The jQuery.data() function is used to add data of any type to a DOM element..
.dequeue()
The .dequeue() function is used to remove the next function on the queue.
jQuery.dequeue()
The jQuery.dequeue() is used to execute the next function on the queue for the matched element.
jQuery.each()
The jQuery.each() function is not same as .each(), which is used to iterate over the jQuery objects. The jQuery.each() iterates through the array displaying each number as both a word and numeral.

jQuery.extend()
The jQuery.extend() function merge the contents of two or more objects together into the first object.

jQuery.globalEval()
Execute some JavaScript code globally.

jQuery.grep()
The jQuery.grep() function is used to find the elements of an array which satisfy a filter function. The original array is not affected.

jQuery.inArray()
The jQuery.inArray() function searches for a specified value within an array and return its index (or -1 if not found).

jQuery.isArray()
The jQuery.isArray() function is used to determine whether the argument is an array.

jQuery.isEmptyObject()
The jQuery.isEmptyObject() function is used to check to see if an object is empty (in order words contains no properties).

jQuery.isFunction()
The jQuery.isFunction() is used to determine if the argument passed is a Javascript function object.

jQuery.isPlainObject()
The function jQuery.isPlainObject() is used to find if an object is a plain object (created using "{}" or "new Object").

jQuery.isXMLDoc()
The jQuery.isXMLDoc() function is used to find if a DOM node is within an XML document (or is an XML document).

jQuery.makeArray()
The function jQuery.makeArray() is used to convert an array-like object into a true JavaScript array.

jQuery.map()
The function jQuery.map() translates all items in an array or array-like object to another array of items.

jQuery.merge()
The function jQuery.merge() merge the contents of two arrays together into the first array.

jQuery.noop()
The jQuery.noop() is an empty function.

jQuery.parseJSON
The jQuery.parseJSON function takes a well-formed JSON string as parameter and then returns the resulting JavaScript object.

jQuery.proxy()
The jQuery.proxy() function Takes a function and returns a new one that will always have a particular context.

.queue()
It shows the queue of functions to be executed on the matched elements.

jQuery.queue()
It shows the queue of functions to be executed on the matched element.

jQuery.removeData()
This function is used to remove a previously-stored piece of data.

jQuery.support
Properties of the Global jQuery Object.

jQuery.trim()
It is used to remove the whitespace from the beginning and end of a string.

jQuery.unique()
The jQuery.unique() function sorts an array of DOM elements, in place, with the duplicates removed.

Hello Friends!

Hello,
this is my first blog.
it is to experience blog tool.