It is also possible to manipulate
all the attributes and properties assigned to HTML elements in jQuery. Some of
the most common properties developers tend to work with are ids, classes, tags,
title, href, src, and rel.
Take the following markup for an image element as an example.
The tag name in the above example
is img whereas class, id, title, and alt are the attributes of the image
element. Each of these attributes consists of a name and a value. jQuery
enables you to access any element by manipulating its attributes. Similarly, we
can also change its properties using the same method.
Get Attribute Method
You can use the attr() function
to get the value of every attribute in the selected element. On the other hand,
it is also possible to change or set the attribute values using attr() method.
In the following example, we get
the value of title attribute of the emphasis <em> tag and set the same
value on to the id attribute of the next div.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Attributes</title>
[block]0[/block]
$(document).ready(function() {
var title = $("em").attr("title");
$("#newdiv").text(title);
});
</head>
<body>
This is first paragraph.
This is second paragraph.
</div>
</body>
</html>
The output of the above code will be as under.
There are, in fact, a number of
attribute methods you can employ to achieve different results such as applying
styles to selected elements and setting the name attribute on to all the
selected elements. Here is jQuery’s
official reference page to learn more about attribute methods.
In the next lesson, we will learn
document traversing in jQuery and how you can use it in your program.
