Copyright © tutorialspoint.com

jQuery - Overview

previous next


Advertisements

What is jQuery ?

jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto: Write less, do more.

jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code. Here is the list of important core features supported by jQuery:

How to install jQuery ?

This is very simple to do require setup to use jQuery library. You have to carry two simple steps:

  1. Go to the download page to grab the latest version available.

  2. Now put downloaded jquery-1.3.2.min.js file in a directory of your website, e.g. /jquery.

The downloaded file name jquery-1.3.2.min.js may vary for your version. Your minified version would be kind of unreadable which would not have any new line or unnecessary words in it.

The jQuery does not require any special installation and very similar to JavaScript, we do not need any compilation or build phase to use jQuery.

How to use jQuery library?

Now you can include jquery library in your HTML file as follows:

<html>
<head>
<title>The jQuery Example</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript">
      // you can add our javascript code here 
   </script>   
</head>
<body>
........
</body>
</html>

How to call a jQuery library functions?

As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

To do this, we register a ready event for the document as follows:

$(document).ready(function() {
   // do stuff when DOM is ready
 });

To call upon any jQuery library function, use HTML script tags as shown below:

<html>
<head>
<title>The jQuery Example</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   
   <script type="text/javascript" language="javascript">
   // <![CDATA[
   $(document).ready(function() {
      $("div").click(function() {
        alert("Hello world!");
      });
   });
   // ]]>
   </script>

</head>
<body>
<div id="newdiv">
Click on this to see a dialogue box.
</div>
</body>
</html>

To understand it in better way you can Try it yourself.

How to use Custom Scripts?

It is better to write our custom code in the custom JavaScript file : custom.js, as follows:

/* Filename: custom.js */
$(document).ready(function() {
  $("div").click(function() {
	alert("Hello world!");
  });
});

Now we can include custom.js file in our HTML file as follows:

<html>
<head>
<title>The jQuery Example</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" 
   src="/jquery/custom.js"></script>
</head>
<body>
<div id="newdiv">
Click on this to see a dialogue box.
</div>
</body>
</html>

To understand it in better way you can Try it yourself.

Using Multiple Libraries:

You can use multiple libraries all together without conflicting each others. For example you can use jQuery and MooTool javascript libraries together.

You can check jQuery noConflict Method for more detail.

What is Next ?

Do not worry too much if you did not understand above examples. You are going to grasp them very soon in subsequent chapters.

Next chapter would try to cover few basic concepts which are coming from conventional JavaScript.


previous next

Copyright © tutorialspoint.com