jQuery Introduction

jQuery is a JavaScript Library. Its fairly new and has completely revolutionized the way we write JavaScript and has made JavaScript programming easier & more powerful.

What jQuery does?

  • Access parts of your webpage
  • Modify the appearance of your webpage (CSS)
  • Change the content of the webpage
  • Handle user's interaction with webpage
  • Add animations and effects
  • Retrieve information from server without refreshing webpage
  • Simplify common JavaScript tasks 

To be able to use jQuery in your webpage you will first need to download jQuery library source file. This source file comes in two formats - uncompressed and minified. The uncompressed version is generally used for debugging and development while the minified version is used in production stage. You can download the jQuery source file from here -

To download the file Right-Click on the link and choose Save option.

To add the jQuery library to your webpage you will use the following HTML code -

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

Here jquery.js is the file which you have downloaded from the above given resource.

 

Also instead of keeping the jQuery source file on your server you can serve them from Google or Microsoft.

To use the jQuery file available on Google server use the following code -

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

To use the jQuery file available on Microsoft server use the following code -

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
</head>

 

To demonstrate how easy it is write a jQuery code and how powerful it can be check out the example given below -

 

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

<body>
<h1>jQuery Example</h1>
<p>A sample paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Let's Toggle :-)</button>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
</script>
</body>
</html> 

 

Try out this jQuery example in our Online HTML Online compiler and see what output you get.

Read the next tutorial. It covers the basics of jQuery programming - jQuery Basics