Book Image

Learning jQuery - Fourth Edition - Fourth Edition

Book Image

Learning jQuery - Fourth Edition - Fourth Edition

Overview of this book

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. LearningjQuery - Fourth Edition is revised and updated version of jQuery. You will learn 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. Starting with an introduction to jQuery, you will first be shown how to write a functioning jQuery program in just three lines of code. Learn how to add impact to your actions through a set of simple visual effects and to create, copy, reassemble, and embellish content using jQuery's DOM modification methods. The book will take you through many detailed, real-world examples, and even equip you to extend the jQuery library itself with your own plug-ins.

Related Content you might be interested in

Current Title:

Small book image
Learning jQuery - Fourth Edition - Fourth Edition
Jun, 2013 | 444 pages
No titles found
Table of Contents (24 chapters)
Learning jQuery Fourth Edition
Learning jQuery Fourth Edition
Credits
Credits
Foreword
Foreword
About the Authors
About the Authors
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started
Getting Started
What jQuery does
Why jQuery works well
Making our first jQuery-powered web page
Plain JavaScript versus jQuery
Using development tools
Summary
2
Selecting Elements
Selecting Elements
Understanding the DOM
Using the $() function
CSS selectors
Attribute selectors
Custom selectors
DOM traversal methods
Accessing DOM elements
Summary
Exercises
3
Handling Events
Handling Events
Performing tasks on page load
Handling simple events
Event propagation
Altering the journey – the event object
Removing an event handler
Simulating user interaction
Summary
Exercises
4
Styling and Animating
Styling and Animating
Modifying CSS with inline properties
Hiding and showing elements
Effects and duration
Creating custom animations
Simultaneous versus queued effects
Summary
Exercises
5
Manipulating the DOM
Manipulating the DOM
Manipulating attributes and properties
DOM tree manipulation
Copying elements
Content getter and setter methods
DOM manipulation methods in a nutshell
Summary
Exercises
6
Sending Data with Ajax
Sending Data with Ajax
Loading data on demand
Choosing a data format
Passing data to the server
Delivering different content for Ajax requests
Keeping an eye on the request
Error handling
Ajax and events
Security limitations
Exploring additional options
Summary
Exercises
7
Using Plugins
Using Plugins
Finding plugins and help
Using a plugin
Other types of plugins
The jQuery UI plugin library
The jQuery Mobile plugin library
Summary
Exercises
8
Developing Plugins
Developing Plugins
Using the dollar ($) alias in plugins
Adding new global functions
Adding jQuery object methods
Providing flexible method parameters
Creating plugins with the jQuery UI widget factory
Plugin design recommendations
Summary
Exercises
9
Advanced Selectors and Traversing
Advanced Selectors and Traversing
Selecting and traversing revisited
Customizing and optimizing selectors
DOM traversal under the hood
Summary
Exercises
10
Advanced Events
Advanced Events
Revisiting events
Event delegation
Defining custom events
Throttling events
Extending events
Summary
Further reading
Exercises
11
Advanced Effects
Advanced Effects
Animation revisited
Observing and interrupting animations
Using global effect properties
Multiproperty easing
Using deferred objects
Taking fine-grained control of animations
Summary
Exercises
12
Advanced DOM Manipulation
Advanced DOM Manipulation
Sorting table rows
Moving and inserting elements revisited
Storing data alongside DOM elements
Using HTML5 custom data attributes
Sorting and building rows with JSON
Revisiting attribute manipulation
Summary
Exercises
13
Advanced Ajax
Advanced Ajax
Implementing progressive enhancement with Ajax
Handling Ajax errors
Using the jqXHR object
Throttling Ajax requests
Extending Ajax capabilities
Summary
Exercises
JavaScript Closures
JavaScript Closures
Creating inner functions
Handling interactions between closures
Creating closures in jQuery
Handling memory-leak hazards
Summary
Testing JavaScript with QUnit
Testing JavaScript with QUnit
Downloading QUnit
Setting up the document
Organizing tests
Adding and running tests
Other types of tests
Practical considerations
Summary
Quick Reference
Quick Reference
Selector expressions
DOM traversal methods
Event methods
Effect methods
DOM manipulation methods
Ajax methods
Deferred objects
Miscellaneous properties and functions
Index
Index

DOM traversal methods

After creating a jQuery object using $(), we can alter the set of matched elements we are working with by calling one of these DOM traversal methods. DOM traversal methods are discussed in detail in Chapter 2, Selecting Elements.

Filtering

Traversal method

Returns a jQuery object containing…

.filter(selector)

Selected elements that match the given selector.

.filter(callback)

Selected elements for which the callback function returns true.

.eq(index)

The selected element at the given 0-based index.

.first()

The first selected element.

.last()

The final selected element.

.slice(start, [end])

Selected elements in the given range of 0-based indices.

.not(selector)

Selected elements that do not match the given selector.

.has(selector)

Selected elements that have a descendant matching selector.

Descendants

Traversal method

Returns a jQuery object containing…

.find(selector)

Descendant elements that match the selector.

.contents()

Child nodes (including text nodes).

.children([selector])

Child nodes, optionally filtered by a selector.

Siblings

Traversal method

Returns a jQuery object containing…

.next([selector])

The sibling immediately following each selected element, optionally filtered by a selector.

.nextAll([selector])

All siblings following each selected element, optionally filtered by a selector.

.nextUntil([selector], [filter])

All siblings following each selected element up to and not including the first element matching selector, optionally filtered by an additional selector.

.prev([selector])

The sibling immediately preceding each selected element, optionally filtered by a selector.

.prevAll([selector])

All siblings preceding each selected element, optionally filtered by a selector.

.prevUntil([selector], [filter])

All siblings preceding each selected element up to and not including the first element matching selector, optionally filtered by an additional selector.

.siblings([selector])

All siblings, optionally filtered by a selector.

Ancestors

Traversal method

Returns a jQuery object containing…

.parent([selector])

The parent of each selected element, optionally filtered by a selector.

.parents([selector])

All ancestors, optionally filtered by a selector.

.parentsUntil([selector], [filter])

All ancestors of each selected element up to and not including the first element matching selector, optionally filtered by an additional selector.

.closest(selector)

The first element that matches the selector, starting at the selected element and moving up through its ancestors in the DOM tree.

.offsetParent()

The positioned parent, either relative or absolute of the first selected element.

Collection manipulation

Traversal method

Returns a jQuery object containing…

.add(selector)

The selected elements, plus any additional elements that match the given selector.

.addBack()

The selected elements, plus the previous set of selected elements on the internal jQuery stack.

.end()

The previous set of selected elements on the internal jQuery stack.

.map(callback)

The result of the callback function when called on each selected element.

.pushStack(elements)

The specified elements.

Working with selected elements

Traversal method

Description

.is(selector)

Determines whether any matched element is matched by the given selector expression.

.index()

Gets the index of the matched element in relation to its siblings.

.index(element)

Gets the index of the given DOM node within the set of matched elements.

$.contains(a, b)

Determines whether DOM node b contains DOM node a.

.each(callback)

Iterates over the matched elements, executing callback for each element.

.length

Gets the number of matched elements.

.get()

Gets an array of DOM nodes corresponding to the matched elements.

.get(index)

Gets the DOM node corresponding to the matched element at the given index.

.toArray()

Gets an array of DOM nodes corresponding to the matched elements.

Previous Section
End of Section
Next Section