Archived collection

This collection is archived and won't be updated. We're keeping it online for now as a courtesy.

Alternate resources: 

Introduction to jQuery Series

In its short history, jQuery has revolutionized front-end web development, making it faster, easier, and more rewarding to write JavaScript – allowing easier selection and manipulation of HTML elements, and ensuring that scripts work across the ever increasing landscape of browsers and operating systems. jQuery is now the most popular JavaScript library on the web, powering over 27% of the 10,000 most popular sites. This video walks the viewer through the essential concepts and syntaxes needed start writing simple-yet-powerful JavaScript using jQuery. Nate Haug and Jeff Robbins show many hands-on examples demonstrating how to use jQuery's simple syntax to choose and manipulate HTML elements, traverse the document object model (DOM), and to attach event handlers which can react to user interaction with the page. They also walk through how to construct an AJAX request to pull in data from external HTML, XML, or JSON sources as well as how to create a simple jQuery plug-in. Learn how liberating and fun jQuery development can be. Give us 3 hours and we'll get you excited to create clearer, easier-to-use, and more whiz-bangy websites. Full chapter listing:

  1. Introduction
  2. What is jQuery?
  3. Introduction to Firebug
  4. Overview of jQuery Concepts
  5. Using jQuery Selectors
  6. jQuery Effects & Animations
  7. jQuery Events
  8. Adding jQuery Scripts
  9. DOM Manipulation with jQuery
  10. DOM Traversing with jQuery
  11. Implementing Ajax with jQuery
  12. Using jQuery Plugins
  13. Conclusion


Although Lullabot is known for its work with Drupal, this video is not Drupal-specific. The concepts in this video can be applied to jQuery in any context. Since jQuery is included as part of Drupal's core download, these concepts certainly apply to Drupal developers, but this video is designed to be beneficial to any web developer or designer who wants to understand jQuery. All of the examples in the video are based on jQuery 1.4, however, many backwards-compatible methods for jQuery 1.2 and 1.3 are provided. The example site and files used in this video are located under "Companion Files" on the first video in the series.