Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 2: Working with jQuery CHAPTER 6 285

Lesson 2: Working with jQuery

This lesson introduces jQuery, which is very well documented at http://jquery.com. Subsequent

chapters take advantage of jQuery whenever possible to minimize typing and benefit from

jQuery’s cross browser–compatible helper functions.

After this lesson, you will be able to:

■■Explain the benefits of using jQuery.

■■Use jQuery to select DOM elements.

■■Use jQuery to modify the DOM.

■■Use jQuery to set styles.

Estimated lesson time: 30 minutes

Introducing jQuery

jQuery is a library of helper functions that are cross browser–compatible. If you feel comfort-

able working with JavaScript, you might think that you don’t need jQuery, but you do. You

can minimize the amount of browser-specific code you must write by using jQuery, an open-

source add-in that provides an easy, browser-agnostic means for writing JavaScript.

jQuery is written in JavaScript, so it is JavaScript. You can read the jQuery source code to

understand how jQuery works. Probably millions of developers use jQuery. It’s easy to use, it’s

stable, it’s fully documented, and it works well with other frameworks. The following is a list of

the categories of functionality jQuery provides.

■■Ajax Methods that provide synchronous and asynchronous calls to the server

■■Attributes Methods that get and set attributes of document object model (DOM)

elements

■■Callbacks object An object that provides many methods for managing callbacks

■■Core Methods that provide core jQuery functionality

■■CSS Methods that get and set CSS-related properties

■■Data Methods that assist with associating arbitrary data with DOM elements

■■Deferred object A chainable object that can register multiple callbacks into call-

back queues and relay the success or failure state of any synchronous or asynchronous

functions

■■Dimensions Helper methods for retrieving and setting DOM element dimensions

■■Effects Animation techniques that can be added to your webpage

■■Events Methods that provide the ability to register code to execute when the user

interacts with the browser