Learning jQuery, Third Edition

Chapter 1. Getting Started

Today's World Wide Web is a dynamic environment, and its users set a high bar for both style and function of sites. To build interesting, interactive sites, developers are turning to JavaScript libraries such as jQuery to automate common tasks and simplify complicated ones. One reason for jQuery's popularity is its ability to assist in a wide range of tasks.

It can seem challenging to know where to begin because jQuery performs so many different functions. Yet, there is a coherence and symmetry to the design of the library; many of its concepts are borrowed from the structure of HTML and Cascading Style Sheets (CSS). The library's design lends itself to a quick start for designers with little programming experience as many of them have more experience with these technologies than they do with JavaScript. In fact, in this opening chapter, we'll write a functioning jQuery program in just three lines of code. On the other hand, experienced programmers will also be aided by this conceptual consistency, as we'll see in the later, more advanced chapters.

So let's look at what jQuery can do for us.

What jQuery does

The jQuery library provides a general-purpose abstraction layer for common web scripting, and is, therefore, useful in almost every scripting situation. Its extensible nature means that we could never cover all possible uses and functions in a single book, as plugins are constantly being developed to add new abilities. The core features, though, assist us in accomplishing the following tasks:

Access elements in a document: Without a JavaScript library, web developers often need to write many lines of code to traverse the Document Object Model (DOM) tree and locate specific portions of an HTML document's structure. With jQuery, developers have a robust and efficient selector mechanism at their disposal, making it easy to retrieve the exact piece of the document that needs to be inspected or manipulated.
```
$('div.content').find('p');
```
Modify the appearance of a web page: CSS offers a powerful method of influencing the way a document is rendered, but it falls short when web browsers do not all support the same standards. With jQuery, developers can bridge this gap, relying on the same standards support across all browsers. In addition, jQuery can change the classes or individual style properties applied to a portion of the document even after the page has been rendered.
```
$('ul > li:first').addClass('active');
```
Alter the content of a document: Not limited to mere cosmetic changes, jQuery can modify the content of a document itself with a few keystrokes. Text can be changed, images can be inserted or swapped, lists can be reordered, or the entire structure of the HTML can be rewritten and extended—all with a single easy-to-use Application Programming Interface (API).
```
$('#container').append('<a href="more.html">more</a>');
```
Respond to a user's interaction: Even the most elaborate and powerful behaviors are not useful if we can't control when they take place. The jQuery library offers an elegant way to intercept a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers. At the same time, its event-handling API removes browser inconsistencies that often plague web developers.
```
$('button.show-details').click(function() {
  $('div.details').show();
});
```
Animate changes being made to a document: To effectively implement such interactive behaviors, a designer must also provide visual feedback to the user. The jQuery library facilitates this by providing an array of effects such as fades and wipes, as well as a toolkit for crafting new graphic displays.
```
$('div.details').slideDown();
```
Retrieve information from a server without refreshing a page: This code pattern has become known as Ajax , which originally stood for asynchronous JavaScript and XML, but has since come to represent a much greater set of technologies for communicating between the client and the server. The jQuery library removes the browser-specific complexity from this responsive, feature-rich process, allowing developers to focus on the server-end functionality.
```
$('div.details').load('more.html #content');
```
Simplify common JavaScript tasks: In addition to all of the document-specific features of jQuery, the library provides enhancements to basic JavaScript constructs such as iteration and array manipulation.
```
$.each(obj, function(key, value) {
  total += value;
});
```
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Why jQuery works well

With the resurgence of interest in dynamic HTML comes a proliferation of JavaScript frameworks. Some are specialized, focusing on just one or two of the above tasks. Others attempt to catalog every possible behavior and animation, and serve these all up pre-packaged. To maintain the wide range of features outlined above while remaining relatively compact, jQuery employs several strategies:

Leverage knowledge of CSS: By basing the mechanism for locating page elements on CSS selectors , jQuery inherits a terse, yet legible, way of expressing a document's structure. The jQuery library becomes an entry point for designers who want to add behaviors to their pages because a prerequisite for doing professional web development is to have knowledge of CSS syntax.
Support extensions: In order to avoid feature creep, jQuery relegates special-case uses to plugins . The method for creating new plugins is simple and well-documented, which has spurred the development of a wide variety of inventive and useful modules. Most of the features in the basic jQuery download are internally realized through the plugin architecture, and can be removed if desired, yielding an even smaller library.
Abstract away browser quirks: An unfortunate reality of web development is that each browser has its own set of deviations from published standards. A significant portion of any web application can be relegated to handle features differently on each platform. While the ever-evolving browser landscape makes a perfectly browser-neutral code base impossible for some advanced features, jQuery adds an abstraction layer that normalizes the common tasks, reducing the size of code while tremendously simplifying it.
Always work with sets: When we instruct jQuery, "Find all elements with the class collapsible and hide them," there is no need to loop through each returned element. Instead, methods such as .hide() are designed to automatically work on sets of objects instead of individual ones. This technique, called implicit iteration , means that many looping constructs become unnecessary, shortening code considerably.
Allow multiple actions in one line: To avoid overuse of temporary variables or wasteful repetition, jQuery employs a programming pattern called chaining for the majority of its methods. This means that the result of most operations on an object is the object itself, ready for the next action to be applied to it.

These strategies have kept the jQuery package slim—roughly 30 KB, compressed—while at the same time providing techniques to keep our custom code that uses the library compact.

The elegance of the library comes about partly by design, and partly due to the evolutionary process spurred by the vibrant community that has sprung up around the project. Users of jQuery gather to discuss not only the development of plugins, but also enhancements to the core library. The users and developers also assist in continually improving the official project documentation, which can be found at http://api.jquery.com.

Despite all of the efforts required to engineer such a flexible and robust system, the end product is free for all to use. This open source project is dually licensed under the MIT License (to permit free use of jQuery on any site and facilitate its use within proprietary software) and the GNU Public License (appropriate for inclusion in other GNU-licensed open-source projects).

Our first jQuery-powered web page

Now that we have covered the range of features available to us with jQuery, we can examine how to put the library into action. To get started, we need a copy of jQuery.

Downloading jQuery

No installation is required. To use jQuery, we just need a publicly available copy of the file, whether that copy is on an external site or our own. As JavaScript is an interpreted language, there is no compilation or build phase to worry about. Whenever we need a page to have jQuery available, we will simply refer to the file's location from a <script> element in the HTML document.

The official jQuery website (http://jquery.com/) always has the most up-to-date, stable version of the library, which can be downloaded right from the home page of the site. Several versions of jQuery may be available at any given moment; the most appropriate for us as site developers will be the latest uncompressed version of the library. This can be replaced with a compressed version in production environments.

As jQuery's popularity has grown, companies have made the file freely available through their Content Delivery Networks (CDNs). Most notably, Google (http://code.google.com/apis/ajaxlibs/documentation/), and Microsoft (http://www.asp.net/ajax/cdn) offer the file on powerful, low-latency servers distributed around the world for fast download regardless of the user's location. While a CDN-hosted copy of jQuery has speed advantages due to server distribution and caching, using a local copy can be convenient during development. Throughout this book we'll use a copy of the file stored on our own system, which will allow us to run our code whether we're connected to the Internet or not.

Setting up jQuery in an HTML document

There are three pieces to most examples of jQuery usage: the HTML document, CSS files to style it, and JavaScript files to act on it. For our first example, we'll use a page with a book excerpt that has a number of classes applied to portions of it. This page includes a reference to the latest version of the jQuery library, which we have downloaded, renamed jquery.js, and placed in our local project directory, as follows:

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Through the Looking-Glass</title>

    <link rel="stylesheet" href="01.css">

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

  <body>
    <h1>Through the Looking-Glass</h1>
    <div class="author">by Lewis Carroll</div>

    <div class="chapter" id="chapter-1">
      <h2 class="chapter-title">1. Looking-Glass House</h2>
      <p>There was a book lying near Alice on the table,and while she sat watching the White King (for shewas still a little anxious about him, and had theink all ready to throw over him, in case he faintedagain), she turned over the leaves, to find somepart that she could read, 
        <span class="spoken">
          "—for it's all in some language I don't know,"
        </span>
        she said to herself.
      </p>
      <p>It was like this.</p>
      <div class="poem">
        <h3 class="poem-title">YKCOWREBBAJ</h3>
        <div class="poem-stanza">
          <div>sevot yhtils eht dna ,gillirb sawT'</div>
          <div>;ebaw eht ni elbmig dna eryg diD</div>
          <div>,sevogorob eht erew ysmim llA</div>
          <div>.ebargtuo shtar emom eht dnA</div>

        </div>
      </div>
      <p>She puzzled over this for some time, but at lasta bright thought struck her.
        <span class="spoken">
          "Why, it's a Looking-glass book, of course! And ifI hold it up to a glass, the words will all go theright way again."
        </span>
      </p>
      <p>This was the poem that Alice read.</p>
      <div class="poem">
        <h3 class="poem-title">JABBERWOCKY</h3>
        <div class="poem-stanza">
          <div>'Twas brillig, and the slithy toves</div>
          <div>Did gyre and gimble in the wabe;</div>
          <div>All mimsy were the borogoves,</div>
          <div>And the mome raths outgrabe.</div>
        </div>
      </div>
    </div>
  </body>
</html>

Tip

File Paths

The actual layout of files on the server does not matter. References from one file to another just need to be adjusted to match the organization we choose. In most examples in this book, we will use relative paths to reference files (../images/foo.png) rather than absolute paths (/images/foo.png). This will allow the code to run locally without the need for a web server.

Immediately following the normal HTML preamble, the stylesheet is loaded. For this example, we'll use the following:

body {
  background-color: #fff;
  color: #000;
  font-family: Helvetica, Arial, sans-serif;
}
h1, h2, h3 {
  margin-bottom: .2em;
}
.poem {
  margin: 0 2em;
}
.highlight {
  background-color: #ccc;
  border: 1px solid #888;
  font-style: italic;
  margin: 0.5em 0;
  padding: 0.5em;
}

After the stylesheet is referenced, the JavaScript files are included. It is important that the script tag for the jQuery library be placed before the tag for our custom scripts; otherwise, the jQuery framework will not be available when our code attempts to reference it.

Note

Throughout the rest of this book, only the relevant portions of HTML and CSS files will be printed. The files in their entirety are available at the book's companion website http://book.learningjquery.com.

Now we have a page that looks similar to the following screenshot:

We will use jQuery to apply a new style to the poem text.

Note

This example is to demonstrate a simple use of jQuery. In real-world situations, this type of styling could be performed purely with CSS.

Adding our jQuery code

Our custom code will go in the second, currently empty, JavaScript file which we included from the HTML using <script src="01.js"></script>. For this example, we only need three lines of code, as follows:

$(document).ready(function() {
  $('div.poem-stanza').addClass('highlight');
});

Finding the poem text

The fundamental operation in jQuery is selecting a part of the document. This is done with the $() function. Typically, it takes a string as a parameter, which can contain any CSS selector expression. In this case, we wish to find all of the <div> elements in the document that have the poem-stanza class applied to them, so the selector is very simple. However, we will cover much more sophisticated options through the course of the book. We will step through many ways of locating parts of a document in Chapter 2, Selecting Elements.

When called, the $() function returns a new jQuery object instance , which is the basic building block we will be working with from now on. This object encapsulates zero or more DOM elements, and allows us to interact with them in many different ways. In this case, we wish to modify the appearance of these parts of the page, and we will accomplish this by changing the classes applied to the poem text.

Injecting the new class

The .addClass() method, like most jQuery methods, is named self-descriptively; it applies a CSS class to the part of the page that we have selected. Its only parameter is the name of the class to add. This method, and its counterpart, .removeClass() , will allow us to easily observe jQuery in action as we explore the different selector expressions available to us. For now, our example simply adds the highlight class, which our stylesheet has defined as italicized text with a gray background and a border.

Note that no iteration is necessary to add the class to all the poem stanzas. As we discussed, jQuery uses implicit iteration within methods such as .addClass(), so a single function call is all it takes to alter all of the selected parts of the document.

Executing the code

Taken together, $() and .addClass() are enough for us to accomplish our goal of changing the appearance of the poem text. However, if this line of code is inserted alone in the document header, it will have no effect. JavaScript code is generally run as soon as it is encountered in the browser, and at the time the header is being processed, no HTML is yet present to style. We need to delay the execution of the code until after the DOM is available for our use.

With the $(document).ready() construct, jQuery allows us to schedule function calls for firing once the DOM is loaded—without necessarily waiting for images to fully render. While this event scheduling is possible without the aid of jQuery, $(document).ready() provides an especially elegant cross-browser solution that:

Uses the browser's native DOM ready implementations when available and adds a window.onload event handler as a safety net
Allows for multiple calls to $(document).ready() and executes them in the order in which they are called
Executes functions passed to $(document).ready() even if they are added after the browser event has already occurred
Handles the event scheduling asynchronously to allow scripts to delay it if necessary
Simulates a DOM ready event in some older browsers by repeatedly checking for the existence of a DOM method that typically becomes available at the same time as the DOM

The .ready() method's parameter can accept a reference to an already defined function, as shown in the following code snippet:

function addHighlightClass()  {
  $('div.poem-stanza').addClass('highlight');
}

$(document).ready(addHighlightClass);

Listing 1.1

However, as demonstrated in the original version of the script, and repeated in Listing 1.2, as follows, the method can also accept an anonymous function (sometimes also called a lambda function ), as follows:

$(document).ready(function() { 
  $('div.poem-stanza').addClass('highlight'); 
});

Listing 1.2

This anonymous function idiom is convenient in jQuery code for methods that take a function as an argument when that function isn't reusable. Moreover, the closure it creates can be an advanced and powerful tool. However, it may also have unintended consequences and ramifications on memory use, if not dealt with carefully. The topic of closures is discussed fully in Appendix A, JavaScript Closures.

The finished product

Now that our JavaScript is in place, the page looks similar to the following screenshot:

The poem stanzas are now italicized and enclosed in boxes, as specified by the 01.css stylesheet, due to the insertion of the highlight class by the JavaScript code.

Development tools

As this code comparison has shown, jQuery code is typically shorter and clearer than its basic JavaScript equivalent. However, this doesn't mean we will always write code that is free from bugs, or that we will intuitively understand what is happening on our pages at all times. Our jQuery coding experience will be much smoother with the assistance of standard development tools.

High-quality development tools are available in all modern browsers. We can feel free to use the environment that is most comfortable to us. Options include:

The Internet Explorer Developer Tools:http://msdn.microsoft.com/en-us/library/dd565628.aspx
The Safari Web Inspector :http://developer.apple.com/technologies/safari/developer-tools.html
The Chrome Developer Tools :http://code.google.com/chrome/devtools/
Firebug for Firefox: http://getfirebug.com/

Each of these toolkits offers similar development features, including:

The ability to explore and modify aspects of the DOM
Investigating the relationship between CSS and its effect on page presentation
Convenient tracing of script execution through special methods
Pausing execution of running scripts and inspecting variable values

While the details of these features vary from one browser to the next, the general concepts remain constant. In this book, some examples will require the use of one of these toolkits; we will use Firebug for these demonstrations, but development tools for other browsers are fine alternatives.

Firebug

Up-to-date instructions for installing and using Firebug can be found on the project's home page at http://getfirebug.com/. The tool is too involved to explore in great detail here, but a survey of some of the most relevant features will be useful to us.

Tip

Understanding these screenshots

Firebug is a quickly-evolving project, so the following screenshots may not exactly match your environment. Some of the labels and buttons are provided by the optional FireQuery add-on: http://firequery.binaryage.com/.

When Firebug is activated, a new panel appears offering information about the current page.

In the default HTML tab of this panel, we can see a representation of the page structure on the left side, and details of the selected element (such as the CSS rules that apply to it) on the right side. This tab is especially useful for investigating the structure of the page and debugging CSS issues, as shown in the following screenshot:

The Script tab allows us to view the contents of all loaded scripts on the page, as shown in the preceding screenshot. By clicking on a line number, we can set a breakpoint; when the script reaches a line with a breakpoint, it will pause until we resume execution with a button click. On the right side of the page, we can enter a list of variables and expressions we wish to know the value of at any time.

The Console tab will be of most frequent use to us while learning jQuery, as shown in the following screenshot. A field at the bottom of the panel allows us to enter any JavaScript statement, and the result of the statement is then presented in the panel:

In this example, we have performed the same jQuery selector as in Listing 1.2, but have not performed any action on the selected elements. Even so, the statement gives us interesting information. We see that the result of the selector is a jQuery object pointing to two .poem-stanza elements on the page. We can use this console feature to quickly try out jQuery code at any time, right from within the browser.

In addition, we can interact with this console directly from our code, using the console.log() method, as follows:

$(document).ready(function() {
  console.log('hello');
  console.log(52);
  console.log($('div.poem-stanza'));
});

Listing 1.4

This code illustrates that we can pass any kind of expression into the console.log() method. Simple values such as strings and numbers are printed directly, and more complicated values such as jQuery objects are nicely formatted for our inspection, as shown in the following screenshot:

This console.log() function (which works in each of the browser developer tools we mentioned) is a convenient alternative to the JavaScript alert() function, and will be very useful as we test our jQuery code.

Filter reviews by

All

Amazon verified reviews

Thomas Bennett Jun 02, 2017

Great book! A must have in the collection of any web developer

Amazon Verified review

Bethany Raymond Feb 04, 2013

Great overview of jQuery. Presents the material clearly with good examples. Would recommend as a great intro book to jQuery.

Dick Dowdell Nov 23, 2012

This is the best JQuery tutorial I've read. It is clearly and concisely written and well organized. The book introduces each topic with appropriate descriptions, examples, and exercises. Later in the book these same topics are revisited in advanced mode, with clear descriptions of what else one can do with the technology or technique being described.Though I am not a JQuery beginner, I found the book to be an excellent refresher as well as a rich source of tools and techniques I had not yet used.I was particularly impressed with the author's ability to understand what my issues and questions might be. The book was obviously written by someone who's "been there, done that". I wish it had existed when I first began using JQuery.

milo Mar 04, 2012

I have purchased and read three or four jQuery books and this is hands down the most complete.Other books step through simple examples of jQuery selectors, method syntax and usage. The authors of "Learning jQuery" take a different approach by building example pages up from bare html and adding and refining jQuery functionality as they go. For the most part this approach works for me. I can always look up specific jQuery methods elsewhere if I need another viewpoint or additional information.I changed my mind and rated the book at five stars vs four. Originally I was going to ding it a star for not being as comprehensive as the website. But you can't pack it all into a finite set of pages, and that in my mind is the one weakness (minor) of the approach the authors took. The jQuery website is the go to resource for a complete listing of jQuery functions. The book is an excellent companion to the website.

Hiking Hacker Feb 02, 2013

This book is a good primer and go to reference for those who are both jQuery beginners to jQuery intermediates.

Learning jQuery, Third Edition: Create better interaction, design, and web development with simple JavaScript techniques

What do you get with eBook?