jQuery: An Introduction

Contact Us or call 1-877-932-8228
jQuery: An Introduction

jQuery: An Introduction

jQuery is a library that simplifies and extends the use of JavaScript. As the documentation states, "[i]t makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript."

Since it is thoroughly tested - and in wide use - on a variety of browsers, because it is well documented, and because of the extensive collection of plugins that exist for it, jQuery makes the process of front-end web coding much simpler than using plain-old JavaScript. By using jQuery, we avoid having to worry about browser inconsistencies; can write shorter, easier-to-main code; and have access to useful, powerful widgets from other developers to make our work easier.

How jQuery Works

jQuery is a JavaScript library, written in JavaScript. Including the library on a web page offers you the ability to use all of jQuery's functionality. You might use it to manipulate a page's DOM (Document Object Model) elements, adding a background color to all divs of a given class, or inserting a new element at the top of a form based on a user's actions. You might use jQuery's Ajax (Asynchronous JavaScript and XML) capabilities to pull content from another page on your site or from an external feed like Twitter or Google.

We almost always include jQuery as a separate library. The custom jQuery code we write might also live in a separate JavaScript file, or might be on the web page itself; you will see examples of both throughout the course.

When including jQuery, you have the option of downloading it from the jQuery website and hosting it on your own site or you can link to it from a CDN (Content Delivery Network) where it is hosted for you. Consider these two examples:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

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

Both are examples of how we might include the jQuery library on a given web page. (Note that we would choose one or the other, but not both, of these options.) In the first case, we include jQuery from Google's CDN. The benefit here is performance - caching (your users' browser may already have cached that version jQuery from Google), increased parallelism (that is, avoiding the limits some browsers make on number of simultaneous downloads from one hostname), and decreased latency (given that Google's hosting is certain to be fast and, with many distributed servers, likely as not to be physically closer to your users than your hosting server), and the price (free) is pretty good to say the least. Using a CDN is generally the way to go.

The second case shows how you might link to the jQuery library that you download from the jQuery website and host on your own web server, in a directory named "js". The advantages here are that you have the code - it's on your site. You are not relying on an external provider - which could (though, in Google's case, that seems unlikely) go down - to serve a key part of your page.

Whichever strategy you choose, it is a good idea to use the minified version of jQuery; note the "min" in the file names in the examples above. Minification is the process of stripping whites pace and using shorter identifiers for variable and function names, significantly cutting down the size (and thus the download time) of the file. The minified version works exactly the same as the un-minified version; it's best to use the minified version for production sites.

Running Code on Document Ready

Often we will wrap our jQuery code in the ready handler. This ensures that the jQuery code we write does not execute until the DOM has loaded but (usefully) does not wait until all images have downloaded.

Here's a quick example:

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

We attach a click handler to any a tag (i.e., a link) of class thanks; users who click on any such link will see a JavaScript alert (a popup) with the text "Thanks!". Wrapping the code in the ready handler ensures that the handler is active as soon as the page's DOM has loaded, but not after all images have loaded. We will cover this concept in more detail later in the course.

Next