Crazy Config Techie: JQuery Introduction

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

Features Of JQuery:

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

How JQuery Works:

Traditionally developer's are using Window.onload() function to initiate some action on page load. There is one drawback with this function. It does not fires until all the images including the advertisement banner are loaded. So, window.onload() can be painfully slow. The jQuery provides the solution for this problem. The $(document).ready(function(){}) solves the issue.

It is fired once the Document Object Model is ready. So, you can use this to run any type of JavaScript to suite your business needs.
Here is the code that will display alert message once Document Object Model is ready:

$(document).ready(function(){
// Your code here...

alert("Hello");
});

This method will be called once Document tree is ready. Here you can add any JavaScript function.

Sample Example on JQuery:

 <html>

<head>

<title>jQuery Hello World Alert box</title>

 

<script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">



</script>

 

</head>

 <script type="text/javascript">

$(document).ready(function(){

$("#cl").click(function(){

alert("HELLO WORLD!");

});

});

</script>

<body>

<font color="red">CLICK BELOW BUTTON TO SEE ALERT BOX</font>

<br>

<br>

<button id="cl">Click Me</button>

</body>

</html>

Crazy Config Techie

Monday, 12 September 2011

JQuery Introduction

No comments:

Post a Comment