4. jQuery Attributes Manipulation
Most of these attributes are available through JavaScript as DOM node properties. Some of the more common properties are:
-
className
-
tagName
-
id
-
href
-
title
-
rel
-
src
<img id="myImage" src="image.gif" alt="An image" class="someClass" title="This is an image"/> |
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.Example:
Following is a simple example which fetches title attribute of <em> tag and set <div id="divid"> value with the same value:<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var title = $("em").attr("title");
$("#divid").text(title);
});
</script>
</head>
<body>
<div>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
<div id="divid"></div>
</div>
</body>
</html>
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.Example:
Following is a simple example which set src attribute of an image tag to a correct location:<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#myimg").attr("src", "/images/jquery.jpg");
});
</script>
</head>
<body>
<div>
<img id="myimg" src="/wongpath.jpg" alt="Sample image" />
</div>
</body>
</html>
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.Example:
Following is a simple example which set src attribute of an image tag to a correct location:<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("em").addClass("selected");
$("#myid").addClass("highlight");
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
</body>
</html>
Useful Attribute Methods:
Following table lists down few useful 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. |
-
$("#myID").attr("custom") : This would return value of attribute custom for the first element matching with ID myID.
-
$("img").attr("alt", "Sample Image"): This sets the alt attribute of all the images to a new value "Sample Image".
-
$("input").attr({ value: "", title: "Please enter a value" }); : Sets the value of all <input> elements to the empty string, as well as sets the title to the string Please enter a value.
-
$("a[href^=http://]").attr("target","_blank"): Selects all links with an href attribute starting with http:// and set its target attribute to _blank
-
$("a").removeAttr("target") : This would remove target attribute of all the links.
-
$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); : This would modify the disabled attribute to the value "disabled" while clicking Submit button.
-
$("p:last").hasClass("selected"): This return true if last <p> tag has associated classselected.
-
$("p").text(): Returns string that contains the combined text contents of all matched <p> elements.
-
$("p").text("<i>Hello World</i>"): This would set "<I>Hello World</I>" as text content of the matching <p> elements
-
$("p").html() : This returns the HTML content of the all matching paragraphs.
-
$("div").html("Hello World") : This would set the HTML content of all matching <div> to Hello World.
-
$("input:checkbox:checked").val() : Get the first value from a checked checkbox
-
$("input:radio[name=bar]:checked").val(): Get the first value from a set of radio buttons
-
$("button").val("Hello") : Sets the value attribute of every matched element <button>.
-
$("input").val("on") : This would check all the radio or check box button whose value is "on".
-
$("select").val("Orange") : This would select Orange option in a dropdown box with options Orange, Mango and Banana.
-
$("select").val("Orange", "Mango") : This would select Orange and Mango options in a dropdown box with options Orange, Mango and Banana.
