jQuery: The Basics

Posted on July 26, 2011

0


This is a basic tutorial, designed to help you get started using jQuery. If you don’t have a test page setup yet, start by creating a new HTML page with the following contents:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
    <script src="jquery.js"></script>
    <script>

    </script>
  </body>
</html>

Edit the src attribute in the script tag to point to your copy of jquery.js. For example, if jquery.js is in the same directory as your HTML file, you can use:

 <script src="jquery.js"></script>

You can download your own copy of jQuery from the Downloading jQuery page

Launching Code on Document Ready

The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:

 window.onload = function(){ alert("welcome"); }

Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn’t run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is that the HTML ‘document’ isn’t finished loading yet, when you first try to run your code.

To circumvent both problems, jQuery has a simple statement that checks the document and waits until it’s ready to be manipulated, known as the ready event:

 $(document).ready(function(){
   // Your code here
 });

Inside the ready event, add a click handler to the link:

 $(document).ready(function(){
   $("a").click(function(event){ alert("Thanks for visiting!"); });
 });

Save your HTML file and reload the test page in your browser. Clicking the link on the page should make a browser’s alert pop-up, before leaving to go to the main jQuery page.

For click and most other events, you can prevent the default behaviour – here, following the link to jquery.com – by calling event.preventDefault() in the event handler:

 $(document).ready(function(){
   $("a").click(function(event){
     alert("As you can see, the link no longer took you to jquery.com");
     event.preventDefault();
   });
 });

Complete Example

The following is an example of what the complete HTML file might look like if you were to use the script in your own file. Note that it links to Google’s CDN to load the jQuery core file. Also, while the custom script is included in the <head>, it is generally preferable to place it in a separate file and refer that file with the script element’s src attribute

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>jQuery demo</title>
 </head>
 <body>
   <a href="http://jquery.com/">jQuery</a>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script>
     $(document).ready(function(){
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });
     });
   </script>
 </body>
 </html>

Adding and Removing an HTML Class

Important: The remaining jQuery examples will need to be placed inside the ready event so that they are executed when the document is ready to be worked on. See Launching Code on Document Ready above for details.

Another common task is adding (or removing) a class.

First, add some style information into the <head> of your document, like this:

 <style>
    a.test { font-weight: bold; }
 </style>

Next, add the addClass call to your script:

  $("a").addClass("test");

All your a elements will now be bold.

To remove the class, use removeClass

 $("a").removeClass("test");
  • (HTML allows multiple classes to be added to an element.)

Special Effects

In jQuery, a couple of handy effects are provided, to really make your web site stand out. To put this to the test, change the click that you added earlier to this:

 $("a").click(function(event){
   event.preventDefault();
   $(this).hide("slow");
 });

Now, if you click any link, it should make itself slowly disappear.

Advertisements
Posted in: JQuery