Home / AJAX

How Do I Use jQuery in a Page?

RSS
Modified on 2010/07/15 16:21 by Ralph Whitbeck Categorized as Uncategorized

Problem

Now that I have obtained jQuery, how do I include it on the page? Additionally, how can I use jQuery on the page?

Solution

jQuery is a JavaScript Library that makes it easier to write cross-browser code easily and effectively. To be able to use the API that jQuery offers we need to include a copy of the library onto the HTML page that we are working with.

jQuery Download

To include jQuery onto the page we just declare a script tag and specify the src to the external JavaScript file. Here is how you would declare it if you downloaded the file from jQuery.com:

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

Here is how you would declare it from a CDN, in this example we’ll use the Microsoft Ajax Content Delivery Network:

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

Traditionally, you will place this declaration inside the head tag of your HTML document. Due to the way HTML loads, top down, you’ll want to load in your JavaScript files after all of your CSS file declarations. Why? We want to make sure that all CSS rules are loaded before we may start changing them with jQuery.

Additionally, you’ll want to make sure that any JavaScript files that are dependant on another JavaScript file come after. There is an order you need to load the files in correctly. For example if you have a jQuery plugin that you would like to include on your page, that plugin will be dependent on the jQuery library already being loaded onto the page already. To ensure that your files are in the right order and understanding that your HTML document loads from the top down all we need to do is declare our jQuery library before our jQuery plugin. See the example below (we will load the jQuery dependent jQuery Validate plugin from Microsoft’s CDN after the jQuery library):

<head>
	<title>How Do I Use jQuery in a Page?</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
	<script src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> 
	<script src=”http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js” type="text/javascript"></script> 
</head>


Execute jQuery When the DOM is Ready

One of the events that comes with jQuery is the $(document).ready() event. This event is fired as soon as the DOM has loaded. Unlike the traditional onload event, which waits until every resource of the page is downloaded and loaded onto the page. $(document).ready() fires as soon as the DOM has loaded but before all the external resources are loaded allowing you the earliest possible moment that jQuery can bind events and manipulate the DOM.

All of your code should be contained within a $(document).ready() event as any code that is outside the ready event will be executed as soon as it loads which may before the elements the code is trying to manipulate has loaded completely making it so that nothing happens.

Here is what a $(document).ready() event looks like:

	$(document).ready(function() {
		//My jQuery code/events
	});

You can have as many $(document).ready() events on your page as you need. You are not limited to just one event. So if you break up your jQuery code into many external files you can have a $(document).ready() event in each file. The order that each will run is based on load order of each file as described above. It is good practice to organize your jQuery/JavaScript code into separate external files as this provides a good separation from the markup (HTML), presentation(CSS) and behavior(JavaScript).

Additionally, you can have a block of code within a script tag on the page and have a $(document).ready() event as well.

As you get more advanced you may see the $(document).ready() event shorthand version. If you pass a function to the jQuery Objection that function is bound to documents ready event.

$(function() {
	//Your jQuery code/events here
});

Here is a complete HTML file so you can see an example:

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>Documents Ready Event Example</title>
  <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
  <script type="text/javascript">
  
    $(document).ready(function() {
      
      //hide the Message div on first load of the page.
      $("#message").hide();
      
      //bind an event to the a tag to toggle the visibility of the Message div 
      $("a").bind("click", function() {
         $("#message").toggle();
      });
      
    });
    
  </script>
</head>
<body>
  <a href="#">Show Message</a>
  <div id="message">
    jQuery will hide this div tag on the documents ready event. Then jQuery will bind an event to the a tag which allows you to toggle the visibility of this div on and off.
  </div>
</body>
</html>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Performance Tip

Remember as a page loads it loads from the top down. When an external JavaScript file or a block of JavaScript code is encountered it blocks the loading of the rest of the DOM until the JavaScript is load and executed.

So, one way to improve performance is to move your JavaScript to as far as you can to the bottom of the page. That way most, if not all, of the DOM is loaded before the page starts to load your JavaScript.

Here is an example.

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>Performance example</title>
</head>
<body>
  <a href="#">Show Message</a>
  <div id="message">
    jQuery will hide this div tag on the documents ready event. Then jQuery will bind an event to the a tag which allows you to toggle the visibility of this div on and off.
  </div>
  
  <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
  <script type="text/javascript">
  
    $(document).ready(function() {
      
      //hide the Message div on first load of the page.
      $("#message").hide();
      
      //bind an event to the a tag to toggle 
      //the visibility of the Message div 
      $("a").bind("click", function() {
         $("#message").toggle();
      });
      
    });
    
  </script>
</body>
</html>


I, out of habit, have placed my jQuery code within a $(document).ready block even at the bottom of the page. When you are going to be selecting DOM elements with jQuery below the structure of the DOM tree you're selecting you do not need to use the $(document).ready code block. Depending on the document you may actually get a performance increase as the code may run earlier then without waiting for the document to be completely ready. But for me the piece of mind of not having to worry about the document being ready is enough for me to always use the $(document).ready code block. Feel free to experiment with your code to see what feels right to you.
  Name Size
- download_jquery.png 35.60 KB