Learning jQuery 1.3

By Jonathan Chaffer , Karl Swedberg
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Getting Started

About this book

To build interesting, interactive sites, developers are turning to JavaScript libraries such as jQuery to automate common tasks and simplify complicated ones. Because many web developers have more experience with HTML and CSS than with JavaScript, the library's design lends itself to a quick start for designers with little programming experience. Experienced programmers will also be aided by its conceptual consistency.

Revised and updated for version 1.3 of jQuery, this book teaches you the basics of jQuery for adding interactions and animations to your pages. Even if previous attempts at writing JavaScript have left you baffled, this book will guide you past the pitfalls associated with AJAX, events, effects, and advanced JavaScript language features.

In this book, the authors share their knowledge, experience, and enthusiasm about jQuery to help you get the most from the library and to make your web applications shine. The book introduces jQuery and shows how you can write a functioning jQuery program in just three lines of code. It then guides you through CSS selectors and shows how to enhance the basic event handling mechanisms to give them a more elegant syntax. You will then learn to add impact to your actions through a set of simple visual effects and also to create, copy, reassemble, and embellish content using jQuery's DOM modification methods. You will also learn to send and retrieve information with AJAX methods. The book will then step you through many detailed, real-world examples and even equip you to extend the jQuery library itself with your own plug-ins.

Publication date:
February 2009
Publisher
Packt
Pages
444
ISBN
9781847196705

 

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 the jQuery library is a popular choice 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; most 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 since many web developers 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, address the following needs:

  • Access elements in a document. Without a JavaScript library, many lines of code must be written to traverse the Document Object Model (DOM) tree, and locate specific portions of an HTML document's structure. A robust and efficient selector mechanism is offered in jQuery for retrieving the exact piece of the document that is to be inspected or manipulated.

  • 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.

  • 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).

  • 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.

  • 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 ones.

  • Retrieve information from a server without refreshing a page. This code pattern has become known as Asynchronous JavaScript And XML (AJAX), and assists web developers in crafting a responsive, feature-rich site. The jQuery library removes the browser-specific complexity from this process, allowing developers to focus on the server-end functionality.

  • 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.

 

Why jQuery works well


With the recent 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 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 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. Even 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 handling 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, and 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—under 20 KB compressed—while at the same time providing techniques for keeping our custom code that uses the library compact, as well.

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. Appendix A details many of the community resources available to jQuery developers.

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 GNU Public License (appropriate for inclusion in many other open-source projects) and the MIT License (to facilitate use of jQuery within proprietary software).

 

History of the jQuery project


This book covers the functionality and syntax of jQuery 1.3.x, the latest version at the time of writing. The premise behind the library—providing an easy way to find elements on a web page and manipulating them—has not changed over the course of its development, but some syntax details and features have. This brief overview of the project history describes the most significant changes from version to version.

  • Public Development Phase: John Resig first made mention of an improvement on Prototype's "Behaviour" library in August of 2005. This new framework was formally released as jQuery on January 14, 2006.

  • jQuery 1.0 (August 2006): This, the first stable release of the library, already had robust support for CSS selectors, event handling, and AJAX interaction.

  • jQuery 1.1 (January 2007): This release streamlined the API considerably. Many rarely-used methods were combined, reducing the number of methods to learn and document.

  • jQuery 1.1.3 (July 2007): This minor release contained massive speed improvements for jQuery's selector engine. From this version on, jQuery's performance would compare favorably to its fellow JavaScript libraries such as Prototype, Mootools, and Dojo.

  • jQuery 1.2 (September 2007): XPath syntax for selecting elements was removed in this release, as it had become redundant with the CSS syntax. Effect customization became much more flexible in this release, and plugin development became easier with the addition of namespaced events.

  • jQuery UI (September 2007): This new plugin suite was announced to replace the popular but aging Interface plugin. A rich collection of prefabricated widgets was included, as well as a set of tools for building sophisticated elements such as drag-and-drop interfaces.

  • jQuery 1.2.6 (May 2008): The functionality of Brandon Aaron's popular Dimensions plugin was brought into the main library.

  • jQuery 1.3 (January 2009): A major overhaul of the selector engine (Sizzle) provided a huge boost to the library’s performance. Event delegation became formally supported.

    Note

    Release notes for older jQuery versions can be found on the project's web site at http://docs.jquery.com/History_of_jQuery.

 

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.

Downloading jQuery

The official jQuery website (http://jquery.com/) is always the most up-to-date resource for code and news related to the library. To get started, we need a copy of jQuery, 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.

No installation is required. To use jQuery, we just need to place it on our site in a public location. Since 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 the HTML document.

Setting up the HTML document

There are three pieces to most examples of jQuery usage: the HTML document itself, 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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type"
      content="text/html; charset=utf-8"/>

    <title>Through the Looking-Glass</title>

    <link rel="stylesheet" href="alice.css"
      type="text/css" media="screen" />

    <script src="jquery.js" type="text/javascript"></script>
    <script src="alice.js" type="text/javascript"></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 she
        was still a little anxious about him, and had the
        ink all ready to throw over him, in case he fainted
        again), she turned over the leaves, to find some
        part 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 last
        a bright thought struck her. <span class="spoken">
        "Why, it's a Looking-glass book, of course! And if
        I hold it up to a glass, the words will all go the
        right 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>

Note

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 a spartan one.

body { 
  font: 62.5% Arial, Verdana, sans-serif; 
} 
h1 { 
  font-size: 2.5em; 
  margin-bottom: 0; 
} 
h2 { 
  font-size: 1.3em; 
  margin-bottom: .5em; 
} 
h3 { 
  font-size: 1.1em; 
  margin-bottom: 0; 
} 
.poem { 
  margin: 0 2em; 
} 
.highlight {
  font-style: italic;
  border: 1px solid #888;
  padding: 0.5em;
  margin: 0.5em 0;
  background-color: #ffc;
}

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 from the book's companion website http://book.learningjquery.com or from the publisher's website http://www.packtpub.com/support.

Now we have a page that looks like this:

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 jQuery

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

$(document).ready(function() {
  $('.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 $() construct. Typically, it takes a string as a parameter, which can contain any CSS selector expression. In this case, we wish to find all parts of 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 the different ways of locating parts of a document in Chapter 2.

The $() function is actually a factory for the jQuery object, which is the basic building block we will be working with from now on. The jQuery 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 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.

The traditional mechanism for controlling when JavaScript code is run is to call the code from within event handlers. Many handlers are available for user-initiated events, such as mouse clicks and key presses. If we did not have jQuery available for our use, we would need to rely on the onload handler, which fires after the page (along with all of its images) has been rendered. To trigger our code from the onload event, we would place the code inside a function:

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

Then we would attach the function to the event by modifying the HTML <body> tag to reference it:

<body onload="highlightPoemStanzas();">

This causes our code to run after the page is completely loaded.

There are drawbacks to this approach. We altered the HTML itself to effect this behavior change. This tight coupling of structure and function clutters the code, possibly requiring the same function calls to be repeated over many different pages, or in the case of other events such as mouse clicks, over every instance of an element on a page. Adding new behaviors would then require alterations in multiple places, increasing the opportunity for error and complicating parallel workflows for designers and programmers.

To avoid this pitfall, jQuery allows us to schedule function calls for firing once the DOM is loaded—without waiting for images—with the $(document).ready() construct. With our function defined as above, we can write:

$(document).ready(highlightPoemStanzas);

This technique does not require any HTML modifications. Instead, the behavior is attached entirely from within the JavaScript file. We will learn how to respond to other types of events, divorcing their effects from the HTML structure as well, in Chapter 3.

This incarnation is still slightly wasteful, though, because the function highlightPoemStanzas() is defined only to be used immediately, and exactly once. This means that we have used an identifier in the global namespace of functions that we have to remember not to use again, and for little gain. JavaScript, like some other programming languages, has a way around this inefficiency called anonymous functions (sometimes also called lambda functions). Using anonymous functions, we can write the code as it was originally presented:

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

By using the function keyword without a function name, we define a function exactly where it is needed, and not before. This removes clutter and brings us down to three lines of JavaScript. This idiom is extremely convenient in jQuery code, as many methods take a function as an argument and such functions are rarely reusable.

When this syntax is used to define an anonymous function within the body of another function, a closure can be created. This is an advanced and powerful concept, but should be understood when making extensive use of nested function definitions as it can have unintended consequences and ramifications on memory use. This topic is discussed fully in Appendix C.

The finished product

Now that our JavaScript is in place, the page looks like this:

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

 

Summary


We now have an idea of why a developer would choose to use a JavaScript framework rather than writing all code from scratch, even for the most basic tasks. We also have seen some of the ways in which jQuery excels as a framework, and why we might choose it over other options. We also know in general which tasks jQuery makes easier.

In this chapter, we have learned how to make jQuery available to JavaScript code on our web page, use the $() factory function to locate a part of the page that has a given class, call .addClass() to apply additional styling to this part of the page, and invoke $(document).ready() to cause this code to execute upon the loading of the page.

The simple example we have been using demonstrates how jQuery works, but is not very useful in real-world situations. In the next chapter, we will expand on the code here by exploring jQuery's sophisticated selector language, finding practical uses for this technique.

About the Authors

  • Jonathan Chaffer

    Author not interested to work on any books with us. Please do not contact!

    Browse publications by this author
  • Karl Swedberg

    Karl Swedberg is a web developer at Fusionary Media in Grand Rapids, Michigan, where he spends much of his time making cool things happen with JavaScript. As a member of the jQuery team, he is responsible for maintaining the jQuery API site at api.jquery.com. He is also a member of jQuery's Board of Advisors and a presenter at workshops and conferences. When he isn't coding, he likes to hang out with his family, roast coffee in his garage, and exercise at the local CrossFit gym.

    Browse publications by this author
Book Title
Access this book, plus 7,500 other titles for FREE
Access now