jQuery : as Cross Browser Solution :: Attributes
| Attributes Introduction |
One of the most basic components that we can manipulate when it comes to DOM elements are the properties and attributes assigned to those elements.
Most of these attributes are available through JavaScript as DOM node properties. Most of the common properties are:
- className
- tagName
- id
- href
- title
- rel
- src
As for example, Have a look on below HTML markup for an image element :
<img id = "myimage1" src = "myimage.gif" alt = "Image" class = "myclass"
title = "This is an image tag"/>
In the above 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.
| jQuery Attributes Example |
jQuery gives us the means to easily manipulate an element’s attributes and gives us access to the element so that we can also change its properties.
Get Attribute Value
The attr() method can be used to either fetch the value of an attribute from the first element in the matched set or set attribute values onto all matched elements.
Fetches title attribute of <em> tag and set <div id = "divid1"> value with the same value :
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script> <script type = "text/javascript">
$(document).ready(function()
{
var title = $("em").attr("title");
$("#divid1").text(title);
});
</script>
</head>
<body>
<div>
<em title = "This is title of first paragraph">This is first paragraph.</em>
<p id = "myid1">This is second paragraph.</p>
<div id = "divid1"></div>
</div>
</body>
</html>
Result :
This is first paragraph.
This is second paragraph.
Set Attribute Value
The attr(name, value) method can be used to set the named attribute onto all elements in the wrapped set using the passed value.
Use of src attribute of an image tag to change location :
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
$("#myimg1").attr("src", "/micon/jquery.png");
});
</script>
</head>
<body>
<div>
<img id = "myimg1" src = "/micon/images/jquery.png" alt = "Sample image" />
</div>
</body>
</html>
Result :
Applying Styles
The addClass( classes ) method can be used to apply defined style sheets onto all the matched elements. You can specify multiple classes separated by space.
Setting class attribute of a paragraph <p> tag .
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
$("em").addClass("selected");
$("#myid1").addClass("highlight"); });
</script>
<style>
.selected { color:blue; }
.highlight { background:red; }
</style>
</head>
<body>
<em title = "This is first paragraph">This is first paragraph.</em>
<p id = "myid1">This is second paragraph.</p>
</body>
</html>
Result :
This is first paragraph.
This is second paragraph.
Attribute Methods
Methods which you can use to manipulate attributes and properties :
| Methods | Description |
|---|---|
| attr( properties ) | Set a key/value object as properties to all matched elements. |
| attr( key, fn ) | Set a single property to a computed value, on all matched elements. |
| removeAttr( name ) | Remove an attribute from each of the matched elements. |
| hasClass( class ) | Returns true if the specified class is present on at least one of the set of matched elements. |
| removeClass( class ) | Removes all or the specified class(es) from the set of matched elements. |
| toggleClass( class ) | Adds the specified class if it is not present, removes the specified class if it is present. |
| html( ) | Get the html contents (innerHTML) of the first matched element. |
| html( val ) | Set the html contents of every matched element. |
| text( ) | Get the combined text contents of all matched elements. |
| text( val ) | Set the text contents of all matched elements. |
| val( ) | Get the input value of the first matched element. |
| val( val ) | Set the value attribute of every matched element if it is called on <input> but if it is called on <select> with the passed <option> value then passed option would be selected, if it is called on check box or radio box then all the matching check box and radiobox would be checked. |
Recent Comments