jQuery in Action
Manipulating element properties and attributes
49
Remember those days (not all that long ago) when fledgling page authors would try
to add pizzazz to their pages with counterproductive abominations such as mar-
quees; blinking text; loud background patterns that interfered with the readability
of page text; annoying animated
to add pizzazz to their pages with counterproductive abominations such as mar-
quees; blinking text; loud background patterns that interfered with the readability
of page text; annoying animated
GIF
s; and, perhaps worst of all, unsolicited back-
ground sounds that would play upon page load (and served to test how fast a user
could close down the browser)?
could close down the browser)?
We've come a long way since then.
Today's savvy web developers and designers know better and use the power
Today's savvy web developers and designers know better and use the power
given to them by Dynamic
HTML
(
DHTML
) to enhance a user's web experience,
rather than showcase annoying tricks.
Whether it's to incrementally reveal content, create input controls beyond the
basic set provided by
HTML
, or give users the ability to tune pages to their own
liking,
DHMTL
--or
DOM
manipulation--has allowed many a web developer to
amaze (not annoy) their users.
On an almost daily basis, we come across web pages that do something that
makes us say, "Wow! I didn't know you could do that!" And being the commensu-
rate professionals that we are (not to mention insatiably curious about such
things), we immediately start looking at the source code to find out how they did it.
rate professionals that we are (not to mention insatiably curious about such
things), we immediately start looking at the source code to find out how they did it.
But rather than having to code up all that script ourselves, we'll find that
jQuery provides a robust set of tools to manipulate the
DOM
, making those types of
"Wow!" pages possible with a minimum of code. Whereas the previous chapter
introduced us to the many ways jQuery lets us select
introduced us to the many ways jQuery lets us select
DOM
elements into a wrapped
set, this chapter puts the power of jQuery to work performing operations on those
elements to bring life and that elusive wow factor to our pages.
elements to bring life and that elusive wow factor to our pages.
3.1 Manipulating element properties and attributes
Some of the most basic components we can manipulate when it comes to
DOM
elements are the properties and attributes assigned to those elements. These prop-
erties and attributes are initially assigned to the
erties and attributes are initially assigned to the
DOM
elements as a result of pars-
ing their
HTML
markup and can be changed dynamically under script control.
To make sure we have our terminology and concepts straight, consider the fol-
lowing
HTML
markup for an image element:
<img id="myImage" src="image.gif" alt="An image" class="someClass"
title="This is an image"/>
In this element's markup, the tag name is
img
, and the markup for
id
,
src
,
alt
,
class
, and
title
represents the element's attributes, each of which consists of a
name and a value. This element markup is read and interpreted by the browser to