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 approach to simplify client side web development like the HTML traversing with DOM and Ajax manipulation. iQuery was created by John Resig, a young kid, please visit his website to figure it out how this jQuery guy look like ~

Let go through a jQuery Hello World example to understand how it works.

1. Download jQuery Library

jQuery is just a small 20+kb JavaScript file (e.g jquery-1.2.6.min.js), you can download it from the jQuery official website. .

2. HTML + jQuery

Create a simple HTML file (test.html), and include the downloaded jQuery library as normal JavaScript file (.js).


<html>
<head>
<title>jQuery Hello World</title>

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

</head>

<body>

<script type="text/javascript">

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

</script>

This is Hello World by HTML

<div id="msgid">
</div>

</body>
</html>

3. Demo

The $() indicate a a jQuery syntax, and the following script means when DOM elements are ready or fully loaded, execute the jQuery script to dynamic create a message and append it to html tag id “msgid”.


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