jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

JQuery is a new technology? Definitely not, i rather said JQuery is a new approaches to simplify client side web development like the HTML traversing with DOM and Ajax manipulation. JQuery was created by John Resig, he is a young kid, please visit his website to figure it out how this JQuery guy look like ~

Ok, let get start to create a JQuery Hello World~

1) Visit JQuery Website http://jquery.com/

2) Click “Download JQuery library” to start download the JQuery library file.
P.S It is just a small size javascript file , “jquery-1.2.6.min.js”

3) Create a simple html file (test.html) as following and put it into same folder with jquery-1.2.6.min.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<html>
<head>
<title>JQuery Hello World</title>
 
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
 
</head>
 
<script type="text/javascript">
 
$(document).ready(function(){
 $("#msgid1").html("This is Hello World by JQuery 1");
});
 
</script>
<body>
 
This is Hello World by HTML
 
<div id="msgid1">
</div>
 
</body>
</html>

5) Save it and open with your with favourite web browser. JQurery Hello World, Done.

Explanation

1) It’s tell browser to include JQuery library.

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

2) $() is a JQuery syntax, you will encounter a lot of it~ This mean when page is ready or loaded, just execute following function. JQuery “#” means tag id.

$(document).ready(function(){
 $("#msgid1").html("This is Hello World by JQuery 1");
});