Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

jQuery

Learn step by step



jQuery-Attributes

Some of very basic components 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. Some of the common properties are:

1.className

2.tagName

3.id

4.href

5.title

6.rel

7.src

Consider the given HTML markup for an image (img) element:

<img id="myImage" src="image.gif" alt="An image"
class="someClass" title="This is an image"/>

In this Html 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 name and value.

jQuery gives us easy means to 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() function can be used to either fetch the value of an attribute from the first element in the matched set or to set attribute values onto all matched elements.

Below given is a simple example which fetches title attribute of <em> tag and set <div id="divid"> value with 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:

Function attr(name, value) can be used to set named attribute onto all elements in the wrapped set using the passed value.

Below given 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 ) function can be used to apply defined style sheets onto all the matched elements. We can specify multiple classes separated by space.

Below given is a example which sets class attribute of a para <p> tag:


<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:

Table lists down few useful functions which you can use to manipulate attributes and properties:

MethodsDescription
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( )It get the combined text contents of all matched elements.
text( val )Set the text contents of all matched elements.
val( )It 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, also sets the title to the string Please enter a value.

  • $("a[href^=http://]").attr("target","_blank"): This selects all the 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("Banana") : This would select Banana option in a dropdown box with options Mango, Orange and Banana.

  • $("select").val("Orange", "Mango") : This select Mango and Orange options in a dropdown box with options Mango, Orange and Banana.



Related Videos