Wednesday, July 11, 2012

jQuery Hello World Tutorial

If you are into programming, then you must have known 'Hello World'. It is common that tutorial on any programming starts with 'Hello World'. This post is also one of them.  In this article you will learn to include jQuery in the page and alert some text.

First you need to include jQuery on the pages where you want to take advantage of it. You can download jQuery library from its official website. [Download Page]. You can either download Production version or Development version. Production version is compressed and minified and suitable for live website. For testing and development, you can use Development version.
After downloading the library file, you can now include it using script tag in <head> section.
<script type="text/javascript" src="jquery-1.7.2.js"></script>

If you dont want to download jQuery file locally then there is another alternative also. You can directly use it from the CDN. In this the source in the script tag would be the link of CDN.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Now lets plunge in to jQuery. Wrapping javascript code in the ready event function is best practice for working with jQuery. It will wait for the document to be fully loaded and ready, before working with it.
jQuery(document).ready(function(){  
 alert('Hello World');
});

Put the above code inside script tag and run the page. If everything all right then you will see the alert box with text 'Hello World'.

You can also use $ instead of jQuery in the code. '$' is the shorthand of 'jQuery'.

After completing this, you are now ready to dive into the awesome world of jQuery.

Cheers !!!

0 comments:

 
back to top