Java Reference
In-Depth Information
eSrc.className = "";
}
You can greatly simplify this code by using the
toggleClass()
method, like this:
var target = $(e.target);
if (e.type == "mouseover" || e.type == "mouseout") {
target.toggleClass("class-one");
}
Notice how the
$()
function is used in this code: It passes
e.target
, a DOM object, to
$()
. This
can at first seem like a strange thing to do, but remember what we said earlier:
$()
is used for many
things. One of those things is to
wrap
a normal DOM object with a
jQuery
object.
In technical terms, we call the resulting
jQuery
object a
wrapper object
. Wrapper objects are
typically used to enhance the functionality of another object. With jQuery, you're wrapping a
jQuery
object around an element object, enabling you to use jQuery's API to manipulate the
element. In the case of this code, you're wrapping a
jQuery
object around an element object so that
you can use
toggleClass()
to toggle the
class‐one
class.
Checking if a Class exists
The last CSS class method is the
hasClass()
method, and it returns
true
or
false
depending on if
an element has the specified CSS class. For example:
var hasClassOne = content.hasClass("class-one");
This code uses
hasClass()
to determine if the
class‐one
is applied to
content
. If it is,
hasClassOne
is
true
. Otherwise, it's
false
.
Creating, appending, and removing elements
Think back to Chapter 9 and how you create and append elements to the page. The following code
will refresh your memory:
var a = document.createElement("a");
a.id = "myLink";
a.setAttribute("href", "
http://jquery.com");
a.setAttribute("title", "jQuery's Website");
var text = document.createTextNode("Click to go to jQuery's website");
a.appendChild(text);
document.body.appendChild(a);
This code creates an
<a/>
element, assigns it an
id
, and sets the
href
and
title
attributes. It then
creates a text node and assigns the object to the
text
variable. Finally, it appends the text node to
the
<a/>
element and appends the
<a/>
element to the document's
<body/>
element. It goes without
saying that creating elements with the DOM methods requires a lot of code.
