Book Image

Learning jQuery 1.3

By : Jonathan Chaffer, Karl Swedberg
Book Image

Learning jQuery 1.3

By: Jonathan Chaffer, Karl Swedberg

Overview of this book

<p>To build interesting, interactive sites, developers are turning to JavaScript libraries such as jQuery to automate common tasks and simplify complicated ones. Because many web developers have more experience with HTML and CSS than with JavaScript, the library's design lends itself to a quick start for designers with little programming experience. Experienced programmers will also be aided by its conceptual consistency. <br /><br />Revised and updated for version 1.3 of jQuery, this book teaches you the basics of jQuery for adding interactions and animations to your pages. Even if previous attempts at writing JavaScript have left you baffled, this book will guide you past the pitfalls associated with AJAX, events, effects, and advanced JavaScript language features.<br /><br />In this book, the authors share their knowledge, experience, and enthusiasm about jQuery to help you get the most from the library and to make your web applications shine. The book introduces jQuery and shows how you can write a functioning jQuery program in just three lines of code. It then guides you through CSS selectors and shows how to enhance the basic event handling mechanisms to give them a more elegant syntax. You will then learn to add impact to your actions through a set of simple visual effects and also to create, copy, reassemble, and embellish content using jQuery's DOM modification methods. You will also learn to send and retrieve information with AJAX methods. The book will then step you through many detailed, real-world examples and even equip you to extend the jQuery library itself with your own plug-ins.</p>

Related Content you might be interested in

Current Title:

Small book image
Learning jQuery 1.3
Jonathan Chaffer | Karl Swedberg
Feb, 2009 | 444 pages
No titles found
Table of Contents (22 chapters)
Learning jQuery 1.3
Learning jQuery 1.3
Credits
Credits
Foreword
Foreword
About the Authors
About the Authors
About the Reviewers
About the Reviewers
Preface
Preface
Free Chapter
1
Getting Started
Getting Started
What jQuery does
Why jQuery works well
History of the jQuery project
Our first jQuery-powered web page
Summary
2
Selectors
Selectors
The Document Object Model
The $() factory function
CSS selectors
Attribute selectors
Custom selectors
DOM traversal methods
Accessing DOM elements
Summary
3
Events
Events
Performing tasks on page load
Simple events
Compound events
The journey of an event
Altering the journey: the event object
Removing an event handler
Simulating user interaction
Summary
4
Effects
Effects
Inline CSS modification
Basic hide and show
Effects and speed
Compound effects
Creating custom animations
Simultaneous versus queued effects
Summary
5
DOM Manipulation
DOM Manipulation
Manipulating attributes
Inserting new elements
Moving elements
Wrapping elements
Copying elements
DOM manipulation methods in a nutshell
Summary
6
AJAX
AJAX
Loading data on demand
Choosing a data format
Passing data to the server
Keeping an eye on the request
AJAX and events
Security limitations
Additional options
Summary
7
Table Manipulation
Table Manipulation
Sorting and paging
Modifying table appearance
Summary
8
Forms with Function
Forms with Function
Improving a basic form
Compact forms
Working with numeric form data
Summary
9
Shufflers and Rotators
Shufflers and Rotators
Headline rotator
An image carousel
Summary
10
Using Plugins
Using Plugins
Finding plugins and help
How to use a plugin
The Form plugin
The jQuery UI plugin library
Other recommended plugins
Summary
11
Developing plugins
Developing plugins
Adding new global functions
Adding jQuery Object Methods
DOM traversal methods
Adding new shortcut methods
Method parameters
Adding a selector expression
Sharing a plugin with the world
Summary
Online Resources
Online Resources
jQuery documentation
JavaScript reference
JavaScript code compressors
(X)HTML reference
CSS reference
Useful blogs
Web development frameworks using jQuery
Development Tools
Development Tools
Tools for Firefox
Tools for Internet Explorer
Tools for Safari
Tools for Opera
Other tools
JavaScript Closures
JavaScript Closures
Inner functions
Interactions between closures
Closures in jQuery
Memory leak hazards
Summary
Quick Reference
Quick Reference
Selector expressions
DOM traversal methods
Event methods
Effect methods
DOM manipulation methods
AJAX methods
Miscellaneous methods
Index
Index

Wrapping elements

jQuery's primary method for wrapping elements around other elements is the appropriately named .wrap(). Because we want each $(this) to be wrapped in <li></li>, we can complete our footnote code like so:

$(document).ready(function() {
  $('<ol id="notes"></ol>').insertAfter('div.chapter');
  $('span.footnote').each(function(index) {
    $(this)
      .before(
        ['<a href="#foot-note-',
          index+1,
          '" id="context-',
          index+1,
          '" class="context">',
          '<sup>' + (index+1) + '</sup>',
          '</a>'
        ].join('')
      )
      .appendTo('#notes')
      .append( '&nbsp;(<a href="#context-' + (index+1) + 
                                       '">context</a>)' )
     .wrap('<li id="foot-note-' + (index+1) + 
                                            '"></li>');
  });
});

Now each of the <li> elements comes complete with an id that matches the...

Previous Section
End of Section 5
Next Section