Introduction to jQuery 1.10S2C Home « Introduction to jQuery 1.10

This section of the website is all about the jQuery library and how to use it. Though knowing JavaScript isn't a prerequisite of learning jQuery it will certainly make the journey easier. If you are completely new to the JavaScript and jQuery disciplines I recommend looking at JavaScript section of the site first. You need to have an understanding of HTML and CSS to get the most benefit from these tutorials and so looking at the in-depth tutorials on the HTML and CSS disciplines in the relevant sections will certainly help.

What is jQuery?

Written by John Resig, jQuery is a fast and compact JavaScript library that allows simplified usage of DOM traversal and modification, event handling and AJAX as well as giving us more selectors to work with and some nice effects and animations. With jQuery we can write concise powerful code which would take many lines of JavaScript code to achieve the same results. jQuery also positively encourages separation of concerns so there is no adulteration of the mark-up when using this powerful library. In these tutorials we will be using jQuery major release version 1.9.

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 you 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 section of the site 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 Intermediate Lesson 5 - More About Links
HTML 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 and the imported JS files we use for this site are placed just before the closing </body> HTML tag. Where you place the code is a matter of preference. For learning purposes we are placing our code in the <head></head> HTML element, as we feel it is easier to see and read.


<!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 jQuery 1.10 Advanced - Lesson 1: Loading & Browser Events and  jQuery 1.10 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 1.5 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 1.5 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 1.10 Advanced - Lesson 1: Loading & Browser Events
jQuery 1.10 Advanced - Lesson 4: Event Handler Attachment Methods

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

What's Next?

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

jQuery 1.10 Reference Methods

Core - jQuery() method
Events - .ready() method

go to home page Homepage go to top of page Top