jQuery Reference

Category: jQuery
Comments (0)

jQuery Reference

Writing the jQuery Code

DOM Traversal Methods

AJAX Methods

Writing the jQuery Code

Page 2 of 4

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:

Sample Code

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;
});
});

We now have a dynamic table of contents that brings users to the relevant portion of the text, and an introduction that is loaded on demand.

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:

$('#introduction')

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:

$('#introduction > h2 a')

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.

Sponsored Links

jQuery Tutorials

jQuery Reference

Table of Contents

Writing the jQuery Code

Writing the jQuery Code

Script Dissection

Selector Expressions

Comments

Post Your Comment:

Sponsored Links

Subscribe via RSS