jQuery Reference - Writing the jQuery Code

Our custom code will go in the second, currently empty, JavaScript file which we included from the HTML using <script src="dolittle.js" type="text/ javascript"></script>. Despite how much it accomplishes, the script is fairly short:

jQuery.fn.toggleNext = function() {
   this.toggleClass('arrow-down')
      .next().slideToggle('fast');
};
$(document).ready(function() {
   $('<div id="page-contents"></div>')
      .prepend('<h3>Page Contents</h3>')
      .append('<div></div>')
      .prependTo('body');
   $('#content h2').each(function(index) {
      var $chapterTitle = $(this);
      var chapterId = 'chapter-' + (index + 1);
      $chapterTitle.attr('id', chapterId);
      $('<a></a>').text($chapterTitle.text())
         .attr({
            'title': 'Jump to ' + $chapterTitle.text(),
            'href': '#' + chapterId
         })
         .appendTo('#page-contents div');
   });
   $('#page-contents h3').click(function() {
      $(this).toggleNext();
   });
   $('#introduction > h2 a').click(function() {
      $('#introduction').load(this.href);
      return false;
   });
});

Script Dissection

NOTE: We will not discuss the operation of this script in much detail here, but a similar script is presented as a tutorial on the Learning jQuery web log: http://www.learningjquery.com/2007/06/ automatic-page-contents.

Selector Expressions

Before we can act on an HTML document, we need to locate the relevant portions. In our script, we sometimes use a simple approach to finding an element:

This expression creates a new jQuery object that references the element with the ID introduction. On the other hand, sometimes we require a more intricate selector:

Here we produce a jQuery object potentially referring to many elements. Elements are included if they are anchor tags, but only if they are descendants of <h2> elements that are themselves children of an element with the ID introduction.

These selector expressions can be as simple or complex as we need. Chapter 2 will enumerate all of the selectors available to us and how they can be combined.