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

DOM manipulation methods


The DOM manipulation methods are discussed in detail in Chapter 5, Manipulating the DOM.

Attributes and properties

Manipulation method

Description

.attr(key)

Gets the attribute named key.

.attr(key, value)

Sets the attribute named key to value.

.attr(key, fn)

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

.attr(obj)

Sets attribute values given as key-value pairs.

.removeAttr(key)

Removes the attribute named key.

.prop(key)

Gets the property named key.

.prop(key, value)

Sets the property named key to value.

.prop(key, fn)

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

.prop(obj)

Sets property values given as key-value pairs.

.removeProp(key)

Removes the property named key.

.addClass(class)

Adds the given class to each matched element.

.removeClass(class)

Removes the given class from each matched element.

.toggleClass(class)

Removes the given class if present, and adds it if not, for each matched element.

.hasClass(class)

Returns true if any of the matched elements has the given class.

.val()

Gets the value attribute of the first matched element.

.val(value)

Sets the value attribute of each element to value.

Content

Manipulation method

Description

.html()

Gets the HTML content of the first matched element.

.html(value)

Sets the HTML content of each matched element to value.

.text()

Gets the textual content of all matched elements as a single string.

.text(value)

Sets the textual content of each matched element to value.

CSS

Manipulation method

Description

.css(key)

Gets the CSS attribute named key.

.css(key, value)

Sets the CSS attribute named key to value.

.css(obj)

Sets CSS attribute values given as key-value pairs.

Dimensions

Manipulation method

Description

.offset()

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

.position()

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

.scrollTop()

Gets the vertical scroll position of the first matched element.

.scrollTop(value)

Sets the vertical scroll position of all matched elements to value.

.scrollLeft()

Gets the horizontal scroll position of the first matched element.

.scrollLeft(value)

Sets the horizontal scroll position of all matched elements to value.

.height()

Gets the height of the first matched element.

.height(value)

Sets the height of all matched elements to value.

.width()

Gets the width of the first matched element.

.width(value)

Sets the width of all matched elements to value.

.innerHeight()

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

.innerWidth()

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

.outerHeight(includeMargin)

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

.outerWidth(includeMargin)

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

Insertion

Manipulation method

Description

.append(content)

Inserts content at the end of the interior of each matched element.

.appendTo(selector)

Inserts the matched elements at the end of the interior of the elements matched by selector.

.prepend(content)

Inserts content at the beginning of the interior of each matched element.

.prependTo(selector)

Inserts the matched elements at the beginning of the interior of the elements matched by selector.

.after(content)

Inserts content after each matched element.

.insertAfter(selector)

Inserts the matched elements after each of the elements matched by selector.

.before(content)

Inserts content before each matched element.

.insertBefore(selector)

Inserts the matched elements before each of the elements matched by selector.

.wrap(content)

Wraps each of the matched elements within content.

.wrapAll(content)

Wraps all of the matched elements as a single unit within content.

.wrapInner(content)

Wraps the interior contents of each of the matched elements within content.

Replacement

Manipulation method

Description

.replaceWith(content)

Replaces the matched elements with content.

.replaceAll(selector)

Replaces the elements matched by selector with the matched elements.

Removal

Manipulation method

Description

.empty()

Removes the child nodes of each matched element.

.remove([selector])

Removes the matched nodes (optionally filtered by selector) from the DOM.

.detach([selector])

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

.unwrap()

Removes the element's parent.

Copying

Manipulation method

Description

.clone([withHandlers], [deepWithHandlers])

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

Data

Manipulation method

Description

.data(key)

Gets the data item named key associated with the first matched element.

.data(key, value)

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

.removeData(key)

Removes the data item named key associated with each matched element.