Book Image

Learning jQuery, Third Edition

Book Image

Learning jQuery, Third 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.Learning jQuery Third Edition is revised and updated for version 1.6 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 step 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, Third Edition
Sep, 2011 | 428 pages
No titles found
Table of Contents (24 chapters)
Learning jQuery Third Edition
Learning jQuery Third 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
Our first jQuery-powered web page
Plain JavaScript vs. jQuery
Development tools
Summary
2
Selecting Elements
Selecting Elements
The Document Object Model
The $() function
CSS selectors
Custom selectors
DOM traversal methods
Accessing DOM elements
Summary
Exercises
3
Handling Events
Handling 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
Exercises
4
Styling and Animating
Styling and Animating
Inline CSS modification
Basic hide and show
Effects and speed
Creating custom animations
Simultaneous versus queued effects
Summary
Exercises
5
Manipulating the DOM
Manipulating the DOM
Manipulating attributes
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
Additional options
Summary
Exercises
7
Using Plugins
Using Plugins
Finding plugins and help
How to use a plugin
The jQuery UI plugin library
Summary
Exercises
8
Developing Plugins
Developing Plugins
Use of the $ alias in plugins
Adding new global functions
Adding jQuery object methods
Method parameters
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
Events revisited
Event delegation
Custom events
Throttling events
Special events
Summary
Exercises
11
Advanced Effects
Advanced Effects
Animation revisited
Observing and interrupting animations
Global effect properties
Multi-property easing
Deferred objects
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
Advanced attribute manipulation
Summary
Exercises
13
Advanced Ajax
Advanced Ajax
Progressive enhancement with Ajax
Ajax error handling
The jqXHR object
Throttling Ajax requests
Extending Ajax capabilities
Summary
Exercises
JavaScript Closures
JavaScript Closures
Inner functions
Interactions between closures
Closures in jQuery
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

Selector expressions

The jQuery factory function $() is used to find elements on the page to work with. This function takes a string composed of CSS-like syntax, called a selector expression. Selector expressions are discussed in detail in Chapter 2, Selecting Elements.

Simple CSS

Selector

Matches

*

All elements

#id

The element with the given ID

element

All elements of the given type

.class

All elements with the given class

a, b

Elements that are matched by a or b

a b

Elements b that are descendants of a

a > b

Elements b that are children of a

a + b

Elements b that immediately follow sibling elements a

a ~ b

Elements b that follow sibling elements a

Position among siblings

Selector

Matches

:nth-child(index)

Elements which are the indexth child of their parent element (1-based)

:nth-child(even)

Elements which are an even child of their parent element (1-based)

:nth-child(odd)

Elements which are an odd child of their parent element (1-based)

:nth-child(formula)

Elements which are the nth child of their parent element (1-based); formulas are of the form an+b for integers a and b

:first-child

Elements which are the first child of their parent

:last-child

Elements which are the last child of their parent

:only-child

Elements which are the only child of their parent

Position among matched elements

Selector

Matches

:first

The first element in the result set

:last

The last element in the result set

:not(a)

All elements in the result set that are not matched by a

:even

Even elements in the result set (0-based)

:odd

Odd elements in the result set (0-based)

:eq(index)

A numbered element in the result set (0-based)

:gt(index)

All elements in the result set after (greater than) the given index (0-based)

:lt(index)

All elements in the result set before (less than) the given index (0-based)

Attributes

Selector

Matches

[attr]

Elements that have the attribute attr

[attr="value"]

Elements whose attr attribute are value

[attr!="value"]

Elements whose attr attribute are not value

[attr^="value"]

Elements whose attr attribute begin with value

[attr$="value"]

Elements whose attr attribute end with value

[attr*="value"]

Elements whose attr attribute contain the substring value

[attr~="value"]

Elements whose attr attribute is a space-delimited set of strings, one of which is value

[attr|="value"]

Elements whose attr attribute is either equal to value or begins with value followed by a hyphen

Forms

Selector

Matches

:input

All <input>, <select>, <textarea>, and <button> elements

:text

<input> elements with type="text"

:password

<input> elements with type="password"

:file

<input> elements with type="file"

:radio

<input> elements with type="radio"

:checkbox

<input> elements with type="checkbox"

:submit

<input> elements with type="submit"

:image

<input> elements with type="image"

:reset

<input> elements with type="reset"

:button

<input> elements with type="button", and <button> elements

:enabled

Enabled form elements

:disabled

Disabled form elements

:checked

Checked checkboxes and radio buttons

:selected

Selected <option> elements

Other custom selectors

Selector

Matches

:header

Header elements (e.g. <h1>, <h2>)

:animated

Elements with an animation in progress

:contains(text)

Elements containing the given text

:empty

Elements with no child nodes

:has(a)

Elements containing a descendant element matching a

:parent

Elements that have child nodes

:hidden

Elements that are hidden, either through CSS or because they are <input type="hidden" />.

:visible

The inverse of :hidden

:focus

The element that has the keyboard focus

Previous Section
End of Section
Next Section