DOM Manipulation—How to Change Your Page on Command | Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Overview of this book

jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. In this book, creators of the popular jQuery learning resource, www.LearningjQuery.com, share their knowledge, experience, and enthusiasm about jQuery to help you get the most from the library and to make your web applications shine. For designers, jQuery leverages existing CSS and HTML skills, allowing you to dynamically find and change any aspect of a page.This book provides a gentle introduction to jQuery concepts, allowing you to add interactions and animations to your pages - even if previous attempts at writing JavaScript have left you baffled. For programmers, jQuery offers an open -source, standards-compliant, unobtrusive approach to writing complex JavaScript applications. This book will guide you past the pitfalls associated with AJAX, events, effects, and advanced JavaScript language features. Stop scratching your head, and start improving your web applications with jQuery and JavaScript!

Learning jQuery

Learning jQuery

Credits

Credits

About the Authors

About the Authors

About the Reviewers

About the Reviewers

Preface

Preface

Free Chapter

Getting Started

Getting Started

What jQuery Does

Why jQuery Works Well

Our First jQuery Document

Summary

Selectors—How to Get Anything You Want

Selectors—How to Get Anything You Want

The Document Object Model

The $() Factory Function

CSS Selectors

XPath Selectors

Custom Selectors

DOM Traversal Methods

Accessing DOM Elements

Summary

Events—How to Pull the Trigger

Events—How to Pull the Trigger

Performing Tasks on Page Load

Simple Events

Compound Events

Limiting and Ending Events

Simulating User Interaction

Summary

Effects—How to Add Flair to Your Actions

Effects—How to Add Flair to Your Actions

Inline CSS Modification

Basic Hide and Show

Effects and Speed

Multiple Effects

Simultaneous versus Queued Effects

In a Nutshell

Summary

DOM Manipulation—How to Change Your Page on Command

DOM Manipulation—How to Change Your Page on Command

Manipulating Attributes

Inserting New Elements

Moving Elements

Wrapping Elements

Copying Elements

DOM Manipulation Methods in a Nutshell

Summary

AJAX—How to Make Your Site Buzzword-Compliant

AJAX—How to Make Your Site Buzzword-Compliant

Loading Data on Demand

Choosing a Data Format

Passing Data to the Server

Keeping an Eye on the Request

AJAX and Events

Security Limitations

Summary

Table Manipulation

Table Manipulation

Sorting

Pagination

The Finished Code

Advanced Row Striping

Row Highlighting

Tooltips

Collapsing and Expanding

Filtering

The Finished Code

Summary

Forms with Function

Forms with Function

Progressively Enhanced Form Styling

Form Validation

Checkbox Manipulation

The Finished Code

Placeholder Text for Fields

AJAX Auto-Completion

The Finished Code

Input Masking

Numeric Calculations

Deleting Items

Editing Shipping Information

The Finished Code

Summary

Shufflers and Rotators

Shufflers and Rotators

Headline Rotator

An Image Carousel

Image Enlargement

The Finished Code

Summary

Plug-ins

Plug-ins

How to Use a Plug-in

Popular Plug-Ins

Finding Plug-in Documentation

Developing a Plug-in

Summary

Online Resources

Online Resources

jQuery Documentation

JavaScript Reference

JavaScript Code Compressors

(X)HTML Reference

CSS Reference

XPath Reference

Useful Blogs

Web Development Frameworks Using jQuery

Development Tools

Development Tools

Tools for Firefox

Tools for Internet Explorer

Tools for Safari

Other Tools

JavaScript Closures

JavaScript Closures

Inner Functions

The Great Escape

Variable Scoping

Interactions between Closures

Closures in jQuery

Memory Leak Hazards

Conclusion

Wrapping Elements

jQuery’s 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>')
      .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 marker’s href. At last, we have a set of numbered, linked footnotes:

Of course...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Search

Your notes and bookmarks