jQuery is a great and cross-browser JavaScript library designed to simplify the HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. It is the most popular JavaScript library in use today. jQuery was released in January 2006 at BarCamp NYC by John Resig.
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 contains the following features:
DOM element selections functions.
jQuery Selectors allow you to select DOM elements so that you can apply functionality to them with jQuery’s operational methods.
Events.
Much of what is done in JavaScript code from DOM manipulation to AJAX calls are handled asynchronously and unfortunately the DOM implementations for event handling vary considerably between browsers. jQuery provides an easy mechanism for binding and unbinding events and providing a normalized event model for all supported browsers that makes it very easy to handle events and hook result handlers.
If you already know some javascript, taking of with jQuery will be really easy.
It is very simple. Let’s start developing the “Hello World” application in jQuery. For this example we are going to create our first jQuery application called “Hello World jQuery”. This example will simply display a message box “Hello World – jQuery”, when a user visit to the page.
We need to have a html page. So here, I am going to create a basic html page.
<html>
<head>
<title>jQuery Hello World Example</title>;
</head>
<body>
</body>
</html>
The next and most important thing is “Including the library”.
The jQuery library is a single JavaScript file, containing all of its common DOM, event, effects, and Ajax functions. It can be included within a web page by linking to a local copy, or to one of the many copies available from public servers. If you like to have local copy, You need to download it from http://docs.jquery.com/Downloading_jQuery.
I have downloaded the library. So I can link to the local copy. In this case, I am going to add the following line under the <head></head> section of the html document.
<script type="text/javascript" src=" jquery-1.6.1.js">
</script>
If you are using the above tag as it is , you need to save the ” jquery-1.6.1.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.
Display the message “Hello World – jQuery”
All your jQuery code should be inside this
$(document).ready(function() {
//insert your jQuery code here.
});
The jQuery document ready function tells your browser to execute the code within it after the document finished loading. It doesn’t take into account images. This is of great advantage because the code that is usually used is window.onload(), but this takes place only after all the images are loaded, so this make your page execution smoother.
For using jQuery script , we need to write it inside <script> tag. The below code checks whether the page loading is finished (DOM elements are ready or fully loaded) and if page loading is finished then it executes the code in the block and display the message “Hello World – jQuery”.
We can add the following lines of code in <head></head> section or <body></body> section of the html document.
<script type="text/javascript">
$(document).ready(function(){
alert("Hello World - jQuery");
});
</script>
The following is the complete code for this example.
<html>
<head>
<title>jQuery Hello World Example</title>
<script type="text/javascript" src=" jquery-1.6.1.js"></script>;
<script type="text/javascript">
$(document).ready(function(){
alert("Hello World - jQuery");
});
</script>
</head>
<body>
</body>
</html>
Here is the online demo – http://blog.iyngaran.info/examples/jQuery/hello-world-example.html
So as you can see, jQuery is a really powerful library that once you know how to use will take your developing to a higher level. You can learn jQuery in a day and master it within 2-3 days. There are so many features available with jQuery and you may spend months to explore these features.