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.
Table of Contents (24 chapters)
Learning jQuery Third Edition
Credits
Foreword
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

DOM manipulation methods


DOM manipulation methods are discussed in detail in Chapter 5.

Attributes and properties

Manipulation Method

Description

.attr(key)

Get the attribute named key

.attr(key, value)

Set the attribute named key to value

.attr(key, fn)

Set the attribute named key to the result of fn (called separately on each matched element)

.attr(map)

Set attribute values, given as key-value pairs

.removeAttr(key)

Remove the attribute named key

.prop(key)

Get the property named key

.prop(key, value)

Set the property named key to value

.prop(key, fn)

Set the property named key to the result of fn (called separately on each matched element)

.prop(map)

Set property values, given as key-value pairs.

.removeProp(key)

Remove the property named key

.addClass(class)

Add the given class to each matched element.

.removeClass(class)

Remove the given class from each matched element

.toggleClass(class)

Remove the given class if present, and add it if not, for each matched element

.hasClass(class)

Return true if any of the matched elements has the given class

.val()

Get the value attribute of the first matched element

.val(value)

Set the value attribute of each element to value

Content

Manipulation Method

Description

.html()

Get the HTML content of the first matched element

.html(value)

Set the HTML content of each matched element to value

.text()

Get the textual content of all matched elements as a single string

.text(value)

Set the textual content of each matched element to value

CSS

Manipulation Method

Description

.css(key)

Get the CSS attribute named key

.css(key, value)

Set the CSS attribute named key to value

.css(map)

Set CSS attribute values, given as key-value pairs

Dimensions

Manipulation Method

Description

.offset()

Get the top, and left, pixel coordinates of the first matched element, relative to the viewport

.position()

Get the top, and left, pixel coordinates of the first matched element, relative to the element returned by .offsetParent()

.scrollTop()

Get the vertical scroll position of the first matched element

.scrollTop(value)

Set the vertical scroll position of all matched elements to value

.scrollLeft()

Get the horizontal scroll position of the first matched element

.scrollLeft(value)

Set the horizontal scroll position of all matched elements to value

.height()

Get the height of the first matched element

.height(value)

Set the height of all matched elements to value

.width()

Get the width of the first matched element

.width(value)

Set the width of all matched elements to value

.innerHeight()

Get the height of the first matched element, including padding, but not border

.innerWidth()

Get the width of the first matched element, including padding, but not border

.outerHeight(includeMargin)

Get the height of the first matched element, including padding, border, and optional margin

.outerWidth(includeMargin)

Get the width of the first matched element, including padding, border, and optional margin

Insertion

Manipulation Method

Description

.append(content)

Insert content at the end of the interior of each matched element

.appendTo(selector)

Insert the matched elements at the end of the interior of the elements matched by selector

.prepend(content)

Insert content at the beginning of the interior of each matched element

.prependTo(selector)

Insert the matched elements at the beginning of the interior of the elements matched by selector

.after(content)

Insert content after each matched element

.insertAfter(selector)

Insert the matched elements after each of the elements matched by selector

.before(content)

Insert content before each matched element

.insertBefore(selector)

Insert the matched elements before each of the elements matched by selector

.wrap(content)

Wrap each of the matched elements within content

.wrapAll(content)

Wrap all of the matched elements as a single unit within content

.wrapInner(content)

Wrap the interior contents of each of the matched elements within content

Replacement

Manipulation Method

Description

.replaceWith(content)

Replace the matched elements with content

.replaceAll(selector)

Replace the elements matched by selector with the matched elements

Removal

Manipulation Method

Description

.empty()

Remove the child nodes of each matched element

.remove([selector])

Remove the matched nodes (optionally filtered by selector) from the DOM

.detach([selector])

Remove the matched nodes (optionally filtered by selector) from the DOM, preserving jQuery data attached to them

.unwrap()

Remove the element's parent

Copying

Manipulation Method

Description

.clone([withHandlers])

Make a copy of all matched elements, optionally also copying event handlers

Data

Manipulation Method

Description

.data(key)

Get the data item named key associated with the first matched element

.data(key, value)

Set the data item named key associated with each matched element to value

.removeData(key)

Remove the data item named key associated with each matched element