Introduction to jQuery Series

This page is archived

We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.

Alternate resources

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.

Tutorials in this course
More information

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.

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.

In this video, Jeff and Nate introduce themselves and the agenda for this series, including Selectors, Effects, and AJAX.

Categories
More information

jQuery makes using Javascript easy. A description of the basic jQuery library, and a brief history of why jQuery exists and how it can be used to simplify development of Javascript for your site.

More information

Overview the Firebug extension for Firefox and how it can be used to aid in the development of Javascript. Real time development and debugging of Javascript.

More information

First look at basic fundamentals of jQuery's syntax and usage. Learn about using the $ function, jQuery selectors for finding elements on the page, creating new DOM elements, and browser detection. In addition to selecting elements on the page we'll introduce the basics of jQuery effects and events. Note: In D7 developers are encouraged to add a jQuery wrapper around JavaScript. (function ($) { // Original JavaScript code. })(jQuery); When using Firebug console you need to use jQuery instead of $. >>> jQuery('.title') Drupal 7 uses jQuery in no-conflict mode meaning you need to wrap your code in an anonymous function and pass the jQuery object into the function. This is a pretty common practice now days and is actually a better way to write jQuery in general rather than always assuming that jQuery is the $ symbol. But, it means in the console you need to use either jQuery('selector) or $ = jQuery;

More information

Use jQuery selectors to locate and select elements on the page. jQuery selectors operate much like CSS3 seletors. Start out simple by selecting elements by tag, DOM id, or class name. Then get more advanced and select form elements based on their current state, and complex n-th child selectors. Additional notes: As a result of Drupal 7 using jQuery in no conflict mode, the jQuery object is not automatically assigned to the global $ symbol. The easiest way to get around this in Firebug or Webkit Inspector is to just use jQuery('element'); or do $ = jQuery; and then use the $ as per usual. If you take a look at the JS files in Drupal 7 you'll see that they almost all use an anonymous closure in order to assign the $ variable. Something like the following. (function ($) { // Add your code here and use $ as per usual. })(jQuery);

More information

Learn about using jQuery to apply animation and effects to DOM elements. Show and hide things on the page using the fade, slide, and hide/show methods. Chain multiple effects together to create animations. And use the jQuery .animate() function to preform more complex animations.

More information

Learn how to respond to the actions that a user performs on a page using jQuery events. Attach event handlers to DOM elements and respond to mouse events like click and hover, and keyboard events such as someone pressing or releasing a key. Finally learn about responding to special events that only occur on form elements. This chapter gives a description of each of the available jQuery events and how or when they are triggered. Check out http://quirksmode.org/js/keys.html for more information on compatibility for assigning keyboard events across multiple browsers.

More information

Add a jQuery Javascript file to Drupal following best practice methods for including javascript files on the page. Learn about how your custom jQuery scripts are loaded on to the page, and when they get executed. Introduces jQuery's no-conflict mode and provides some best practice examples for writing your own jQuery files within the context of Drupal as a whole.

Note: To avoid hiding all blocks on your page, target your blocks more specifically. For example, #sidebar .block .content Also, inspect your markup for the existence of a class of title on the h3, which may or may not be applied in your theme. The new example below does not include the title class.

(function($){
  $(document).ready(function(){
    
    $('#sidebar .block .content').hide();
    $('#sidebar .block h3').css('cursor', 'pointer').click(function(){
      $(this).parent().children('.content').slideToggle();
    });

  });
})(jQuery);
More information

Use jQuery to manipulate DOM elements including adding and removing classes to an HTML element, changing the content of an element, wrap a set of elements with a new element, adding new elements to the page using prepend and append methods and the related prependTo and appendTo methods. Use jQuery to manipulate properties height, width, and position of any DOM element. Finally learn how to use jQuery to completely remove selected DOM elements from the page.

More information

Traverse the DOM tree using jQuery to find the children, parents, and other nearby elements of any selected element on the page. Learn how to select an element up the page and reliably locate it's siblings by traversing up the DOM to a parent element and then back down using find. Use additional jQuery methods to filter a list of DOM elements down using find to apply an additional selector to the list, not to filter out elements that do not match a set of criteria and more.

More information

AJAX is one of the main reasons to use a Javascript library such as jQuery. See how simple it is to perform a previously difficult task that required complex browser specific code to preform reliably and was prone to simple mistakes. Implement basic AJAX requests using jQuery's built in methods which make it extremely simple to send an asynchronous request to a server, gather the returned data, and insert it into the page.

Example code:


// AJAX Live Function
$('.content p').live('mouseenter mouseleave',
  function() {
    $(this).toggleClass('hilight');
  }
);

// AJAX Example
$('.node_read_more a').click(function() {
  var url = $(this).attr('href');
  var link = this;

  $.ajax({
    url: url,
    success: function(data) {
      var $fullContent = $('#content-output .content', data);
      var html = $fullContent.html();
      $(link).closest('div.node').find('div.content').html(html);
      $(link).hide();
    }
  });
  return false;
});
More information

Use the jQuery plugin system to extend the set of methods available in jQuery beyond those provided by the core jQuery library. See where to find jQuery plugins, and examine a number of the available plugins and when to use them and what to use them for. See how to make use of plugins in your custom jQuery code. Finally, learn how to write your own plugins to extend the basic jQuery functionality.

More information

A brief summary of the material covered in the Introduction to jQuery video series