Home Ajax Jquery How jQuery works?
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

How jQuery works?

Advertisement
This tutorial describes the working of jQuery.

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:

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

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)

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

Advertisement

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: September 2, 2010

Ask Questions?    Discuss: How jQuery works?  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
Om Prakash Godara
August 25, 2011
JQuery

$(document).ready(function() ? what is role of this line. plz send me
yogiraj
October 17, 2011
google map

how to get latitude and longitude using address1,postcode,city,state using php and javascript
pulipati udaykiran
December 15, 2011
Better example about Document object model.

I understood the use of $(document).ready(function(){}) in jQuery and use of jQuery library functions.
Abdulhaq khan
December 26, 2011
Hi

this is a very good website for beginners to learn JQuery thanks alot for guiding us.
sujeeth
January 9, 2012
using checkbox selection by jquery

i need that code and hw does it work send me mail plz
Atul Sabale
February 8, 2012
JQuery

Thanks for providing this notes.
Brindha
February 25, 2012
How jquery works

How jquery works
DMCA.com