Book Image

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Book Image

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Overview of this book

Table of Contents (18 chapters)
Learning jQuery
About the Authors
About the Reviewers

Chapter 1. Getting Started


Up on the buzzer

Quick on the start

Let’s go! Let’s go! Let’s go!

 -- Devo, “Let’s Go”

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.

Because jQuery does perform so many different functions, it can seem challenging to know where to begin. 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). Because many web developers have more experience with these technologies than with JavaScript, the library’s design lends itself to a quick start for designers with little programming experience. 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.

But before we illustrate the operation of the library with an example, we should discuss why we might need it in the first place.

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 plug-ins are constantly being developed to add new abilities. The core features, though, address the following needs:

  • Access parts of a page.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. jQuery offers a robust and efficient selector mechanism for retrieving exactly the piece of the document that is to be inspected or manipulated.

  • Modify the appearance of a 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. jQuery can bridge this gap, providing 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 page.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 API.

  • Respond to a user’s interaction with a page.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.

  • Add animation to a page.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.