How jQuery Works?

This section we will see how jQuery works with the help of simple program. This tutorial will give you basic introduction to the jQuery and explain the concepts required to understand.

The jQuery library helps the developer to develop rich internet applications. This is one of the most used framework on the web. Its easy to learn and use language. Here is the highlights of jQuery:

jQuery is a JavaScript based Library that runs in browser. Its is client side ajax framework.
jQuery simplifies the development of ajax based application using JavaScript programming language.
jQuery is easy to learn and use language. Programmer's can learn it easily.
Lot's of support. There are many examples and tutorials available on internt.

The jQuery is designed to do more work in less coding. It's very easy to work with jQuery. It support all the serverside web application development technologies. You can use JSP,Servlets, Struts, Spring MVC, ASP, .NET, CGI, PHP, Perl etc. as server-side language and user jQuery to dynamically fetch data from the server.

So, jQuey is very useful tool. Let's see how it works and we can use it in programming.

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");
});

Adding jQuery to a page:

The jQuery is distributed as js file. It can be downloaded from http://docs.jquery.com/Downloading_jQuery. Download jquery-1.4.2.min.js and then place in your project folder. To include in the html file use the following code:

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:

Hello world alert box example(HelloAlert.html)

<html> <head> <title>jQuery Hello World Alert box</title> <script type="text/javascript" src="jquery-1.4.2.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>

The following line includes the jQuery library into webpage:

<script type="text/javascript" src="jquery-1.4.2.js"></script>

In the next sections we will be understanding more about jQuery with the help of many examples

Learn from experts! Attend jQuery Training classes.

How jQuery works?

How jQuery works?

How jQuery Works?

Tutorials