HTML and CSS Reference
In-Depth Information
// Return the href of the first link on the page
var myHref= $("a").attr('href');
// Set the href for all links on the page
$("a").attr("href","http://www.google.com");
// Set the href and target for all links on the page
$("a").attr({ href: "http://www.google.com",
target: "_blank" });
// Return the HTML in the first paragraph element
var myHTML = $("p").html();
// Set the HTML on all paragraph elements
var myHTML = $("p").html("Lorem ipsum dolor sic amet");
The getter versions return only the appropriate value of the first element that matches the set, whereas the
setter value sets all matching elements.
The following list shows some of the most common jQuery methods you can use and their descriptions.
•
$(selector).show() /$(selector).hide()
:
Show and hide matched elements on the page.
•
$(selector).addClass(name) /$(selector).removeClass(name)
:
Add or remove a
CSS class from an element.
•
$(selector).empty()
:
Clear any content in an element.
•
$(selector).val(newValue) /$(selector).val()
:
Set or return the value of an input ele-
ment.
•
$(selector).attr(attributeName) / $(selector).attr(attributeName,
value) / $(selector).attr(attributeHash)
:
Retrieve or set an arbitrary attribute on an
object.
•
$(selector).css(propertyName) / $(selector).css(propertyName,value) /
$(selector).css(propertyHash)
:
Retrieve or set an arbitrary CSS style on a DOM object.
•
$(selector).animate(propertyHash)
:
Change a CSS style over time.
•
$(selector).fadeIn() / $(selector).fadeOut()
:
Fade an element into view or fade it
out of view.
•
$(selector).append(content) / $(content).appendTo(selector)
:
Add some con-
tent to the bottom of a container.
•
$(selector).html() / $(selector).html(newHtml)
:
Get or set the HTML in an element
directly.
Get Comfortable Reading the Documentation
This section has touched on only a few of the methods available. You need to become comfortable with the
jQuery documentation site at
http://api.jquery.com
because the easier it is for you to find your way around the
documentation, the easier of a time you can have building dynamic interfaces on the web.
You revisit a lot of these jQuery methods in Chapter 12, “Building Games with CSS3,” when you build a
role-playing game (RPG) using DOM elements.
