JavaScript & jQuery Tutorials

JQ Home Right Arrow JQ Basics Right Arrow Getting Started

Getting Started

In this lesson we find out where to download jQuery from, how to use the library in our pages and then create the standard 'Hello World' program. This will get us started on our sojourn into the eventful world of jQuery usage.

Ok, the first thing we need to do is download the latest version of jQuery from the jQuery site. At the time of writing, the current release is version 1.10.1 and is the release used in the lessons for this website.

You have the choice of a minified version, which has a file size of just 92 kilobytes and should be used for your production code. Also available is an uncompressed version, which has a file size of 243 kilobytes and can be used in development and investigated to see how jQuery works. Right-click the link you require and select "Save Link As..." from the menu to save the file of your choice.

With jQuery downloaded place the file in a directory of your choosing for use in your programs. The following code snippet is an example of importing the minified version of jQuery into a HTML file and assumes the file exists in the current directory.


<script type="text/javascript" src="jquery-1.10.1.min.js"></script>

The links to the HTML Doctor website below give a full explanation of URLs and a discussion on importing files respectively. The lessons are helpful if you are unsure of where to place your files and how to access them from within your web pages.

HTML Doctor Website - Intermediate Lesson 5 - More About Links.

HTML Doctor Website - Advanced Lesson 1 - Importing CSS and JavaScript.

Running the 'Hello World' Program


With jQuery downloaded and ready for use lets look at a complete webpage that displays the 'Hello World' message. In future code examples we will skip the majority of the HTML and just show the jQuery, we are just showing it here so you can see code placement and how it fits into the overall page structure.

You could place the import and code for jQuery within the <body></body> HTML element but personally we think this interferes with markup flow so it is placed in the <head></head> HTML element here.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Getting started with jQuery</title>
	
  <!-- This is where we import the minified jQuery library -->
  <script type="text/javascript" src="jquery-1.10.1.min.js"></script>

  <!-- Our jQuery to action the button click -->
  <script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery("#btn").click(function(){
        alert("Hello World!");
      });
    });
  </script>
</head>
<body>
  <p>Press the button below to action the above code:</p>
  <form action="">
    <p><input id="btn" type="button" value="Run Hello World" /></p>
  </form>	
</body>
</html>

Press the button below to action the above code:


Reviewing the Code

When you click on the 'Run Hello World' button the sample Javascript code is run and the alert box appears with the code we entered for the alert.

If you look at the HTML markup for the button creation notice there is no onclick attribute and thus we are not contaminating the structure (HTML) with the behaviour (our jQuery script).

We will cover the .ready() and .click() functions in more depth in lessons JavaScript Advanced - Lesson 1: Loading & Browser Events and  JavaScript Advanced - Lesson 4: Event Handler Attachment Methods respectively. For now it's worth mentioning that the .ready() function is similar to window.onload handler, but whereas the latter waits until all resources are loaded including all external resources, the .ready() function is fired after the document is fully parsed and converted into the DOM tree. This can lead to significantly faster loading of our behaviour and therefore a richer experience for our users. The other advantage that the .ready() function has over the window.onload handler, is that it can be used multiple times within the same HTML document and the functions are executed in the order they are declared.

The jQuery(document) acts as a wrapper for the entire document and can be streamlined to select the elements within the DOM we require. In fact we are using formal syntax here and we can use the &() function as an alias for jQuery(document) and you can also use shorthand for the .ready() function as follows:




// Formal syntax
jQuery(document).ready(function(){
});

// Shorthand version (we will use this from now on)
$(function(){
});


Code Conventions

jQuery syntax rules are the same as JavaScript and are covered in: JavaScript Basics - Lesson 2: JavaScript Syntax so we won't go over syntax again here but we will mention a few code conventions we adhere to throughout the coding examples. Don't worry about what the code does, as it's purely for demonstration.




$(function(){
  $('#btna').on('click', function(){
    var $listitem = $('li .list1');
    $('li #list1a').find( $listitem )
                   .css('backgroundColor', 'orange'); // method lined up underneath
  });
});


  1. When we end a function call we wil always place the closing }); on its own line for readability.
  2. We will always indent code within a function.
  3. Whenever we are creating a variable from a jQuery call as with the $listitem variable, we will always prefix it with a $ so we can recognize that this is a jQuery object.
  4. When we chain jQuery methods within the same statement we will line up the methods underneath each other.

Code placement is shown in: JavaScript Basics - Lesson 4: Applying JavaScript and application is the same for jQuery, so for the various ways to enter jQuery into programs, read this lesson.


Lesson 1 Complete

In this lesson we created a simplistic HTML page which popped up an alert window, as a gentle introduction to the jQuery library.

Related Tutorials

jQuery Advanced - Lesson 1: Loading & Browser Events
jQuery Advanced - Lesson 4: Event Handler Attachment Methods

JavaScript Basics - Lesson 2 - JavaScript Syntax
JavaScript Basics - Lesson 4: Applying JavaScript

What's Next?

In the next lesson we look at the jQuery Core and Internals methods and properties.

Reference

Methods

Events - .on() event method
Events - .ready() event method




  

go to jQuery home page jQuery Home go to top of page Top