jQuery: A JavaScript Library

Contact Us or call 1-877-932-8228
jQuery: A JavaScript Library

jQuery: A JavaScript Library

About jQuery

The self-proclaimed "write less, do more" JavaScript library is arguably the preferred choice for front-end developers nowadays, offering simplified yet powerful syntax, a consistent experience across a wide range of browsers, and a set of tools which fill in the gaps lacking from core JavaScript. As the jQuery website states:

jQuery is a fast, small, and feature-rich JavaScript library. It 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.

As its name suggests, jQuery's core functionality is a query. We select (query) elements on a page - for example all <h2>s, or, the third list item in a specific unordered list - and gather information about the elements or modify the elements in some manner.

jQuery Basics

To use jQuery, we first load, via a <script> tag, the jQuery library. We can do this in one of two ways: either by downloading jQuery and hosting it locally, or by linking to a CDN-hosted version of the library. (A CDN, or content delivery network, is typically a large distributed network of servers that host a resource available for sharing. Both Google and jQuery host publicly-available copies of jQuery that you are welcome to link to from your pages.) In this course, we will use jQuery as a locally-hosted file; you'll find it among the demos and exercises in your class files, in the relevant directories.

After linking to the library, we can use jQuery code. jQuery is JavaScript, but offers a simplified - and more consistent, across various browsers - syntax. The key element of the syntax is the "$":

$('div.news').hide()

We specify a set of DOM (Document Object Model) elements - in the example above, all

s of class news - and hide them. Of course, this is a simple example; we might have added content to those
s, added a listener to them to check for user clicks, etc.

Usually, the starting point for our jQuery code is the ready method: we tell jQuery to execute our specified code only after the page's DOM has been loaded (so it's "ready"). The HTML elements on the page are fully loaded at this point, so we can manipulate any tag-based content. Because jQuery does not need to wait on external scripts, images, or other elements to load, this speeds up the page.

Let's look at a simple example:

Code Sample:

jQuery/Demos/jquerysimpleexample.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Simple jQuery Example</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').click(function() {
			var numListItems = $('li').length;
			$('#Content').html('<p>There are ' + numListItems + ' list item(s) on this page</p>');
			return false;
		});
	});
</script>
</head>
<body>
	<button id="btn">Go</button>
	<ul>
		<li>item 1</li>
		<li>item 2</li>
		<li>item 3</li>
		<li>item 4</li>
	</ul>
	<div id="Content"></div>
</body>
</html>

We use the jQuery ready method to run our code as soon as the DOM loads. We add a click handler for the button so that any time the button is clicked, the following occurs:

  1. Count the number of list items on the page (the length of the query $('li'), which returns all of the <li>s on the page) and assign this value to the variable numListItems.
  2. Set the contents of the initially-empty <div> with id Content to display the length.
Next