« Previous | 1 | 2 | 3 | Next »

JQUERY - ATTRIBUTES

Some of the most 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 more common properties are:

className
tagName
id
href
title
rel
src

Consider the following HTML markup for an image element:

In this 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 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>

This will produce the following result:

This is first paragraph.

This is second paragraph.

Bold and Brave

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

This will produce the following result:

This is first paragraph.

This is second paragraph.

Attribute Methods

Following table lists down few useful methods which you can use to manipulate attributes and properties:

S.N.	Methods & Description
1	attr( properties ) Set a key/value object as properties to all matched elements.
2	attr( key, fn ) Set a single property to a computed value, on all matched elements.
3	removeAttr( name ) Remove an attribute from each of the matched elements.
4	hasClass( class ) Returns true if the specified class is present on at least one of the set of matched elements.
5	removeClass( class ) Removes all or the specified class(es) from the set of matched elements.
6	toggleClass( class ) Adds the specified class if it is not present, removes the specified class if it is present.
7	html( ) Get the html contents (innerHTML) of the first matched element.
8	html( val ) Set the html contents of every matched element.
9	text( ) Get the combined text contents of all matched elements.
10	text( val ) Set the text contents of all matched elements.
11	val( ) Get the input value of the first matched element.
12	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.

attr( properties ) Method

The attr( properties) method set a key/value object as properties to all matched elements.

Syntax

Here is the simple syntax to use this method:

selector.attr({property1:value1, property2:value2})

Parameters

Here is the description of all the parameters used by this method:

property: This is the CSS property of the matched element.
value: This is the value of the property to be set.

Example

Following example would change the properties of an image tag:

<html>
<head>
<title>The Selecter Example</title>
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("img").attr({
src: "/images/jquery.jpg",
title: "jQuery",
alt: "jQuery Logo"
});
});
</script>
</head>
<body> <div class="divcl" id="divid">
<p>Following is the logo of jQuery</p>
<img src="Wrong SRC" title="None" alt="None" />
</div>
</body>
</html>

attr( key, func ) Method

The attr( key, func ) method sets a single property to a computed value, on all matched elements.

Syntax

Here is the simple syntax to use this method:

selector.attr( key, func )

Parameters

Here is the description of all the parameters used by this method:

key: The name of the property to set.
func: A function returning the value to set. This function would have one argument which is index of current element.

Example

The following example would create border for each table:

<html>
<head>
<title>The Selecter Example</title>
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("table").attr("border", function(arr) {
return arr;
})
});
</script>
</head>
<body>
<table>
<tr><td>This is first table</td></tr>
</table>
<table>
<tr><td>This is second table</td></tr>
</table>
<table>
<tr><td>This is third table</td></tr>
</table>
</body>
</html>

This would produce the following result:

This is first table

This is second table

This is third table

removeAttr( name ) Method

The removeAttr( name ) method removes an attribute from each of the matched elements.

Syntax

Here is the simple syntax to use this method:

selector.removeAttr( name )

Parameters

Here is the description of all the parameters used by this method:

name: The name of the property to be removed.

Example

Following example would remove border from each table:

<html>
<head>
<title>The Selecter Example</title>
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"> </script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("table").removeAttr("border");
});
</script>
</head>
<body>
<table border="2">
<tr><td>This is first table</td></tr>
</table>
<table border="3">
<tr><td>This is second table</td></tr>
</table>
<table border="4">
<tr><td>This is third table</td></tr>
</table>
</body>
</html>

This would produce the following result:

This is first table

This is second table

This is third table

hasClass( class ) Method

The hasClass( class ) method returns true if the specified class is present on at least one of the set of matched elements otherwise it returns false.

Syntax

Here is the simple syntax to use this method:

selector.hasClass( class )

Parameters

Here is the description of all the parameters used by this method:

class: The name of CSS class.

Example

Following example would check which para has class red:

<html>
<head>
<title>The Selecter 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" language="javascript">
$(document).ready(function() {
$("#result1").text( $("p#pid1").hasClass("red") );
$("#result2").text( $("p#pid2").hasClass("red") );
});
</script>
<style>
.red { color:red; }
.green { color:green; }
</style>
</head>
<body>
<p class="red" id="pid1">This is first paragraph.</p>
<p class="green" id="pid2">This is second paragraph.</p>
<div id="result1"></div>
<div id="result2"></div>
</body>
</html>

This would produce the following result:

This is first paragraph.

This is second paragraph.
true
false

removeClass( class ) Method

The removeClass( class ) method removes all or the specified class(es) from the set of matched elements.

Syntax

Here is the simple syntax to use this method:

selector.removeClass( class )

Parameters

Here is the description of all the parameters used by this method:

class: The name of CSS class.

Example

Following example would remove class red from the first para:

<html>
<head>
<title>The Selecter 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" language="javascript">
$(document).ready(function() {
$("p#pid1").removeClass("red");
});
</script>
<style>
.red { color:red; }
.green { color:green; }
</style>
</head>
<body>
<p class="red" id="pid1">This is first paragraph.</p>
<p class="green" id="pid2">This is second paragraph.</p>
</body>
</html>

This would produce the following result:

This is first paragraph.

This is second paragraph.

toggleClass( class ) Method

The toggleClass( class ) method adds the specified class if it is not present, removes the specified class if it is present.

Syntax

Here is the simple syntax to use this method:

selector.toggleClass( class )

Parameters

Here is the description of all the parameters used by this method:

class: The name of CSS class.

Example

Following example would remove a class with one click and in second click it would again add the same class:

<html>
<head>
<title>The Selecter 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" language="javascript">
$(document).ready(function() {
$("p#pid").click(function () {
$(this).toggleClass("red");
});
});
</script>
<style>
.red { color:red; }
</style>
</head>
<body>
<p class="green">Click following line to see the result</p>
<p class="red" id="pid">This is first paragraph.</p>
</body>
</html>

With the first click it would generate following result, in the second click it would revert to its original form as shown above:

Click the following line to see the result

This is first paragraph.

html( ) Method

The html( ) method gets the html contents of the first matched element. This property is not available on XML documents but it works for XHTML documents.

Syntax

Here is the simple syntax to use this method:

selector.html( )

Parameters

Here is the description of all the parameters used by this method:

Example

Following example would get HTML content of first paragraph and would display it in second paragraph. Please check description of html(val) method as well.

<html>
<head>
<title>The Selecter Example
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var content = $("p").html();
$("p#pid2").html( content );
});
</script>
<style>
.red { color:red; }
.green { color:green; }
</style>
</head>
<body>
<p class="green" id="pid1">This is first paragraph.

<p class="red" id="pid2">This is second paragraph.

</body>
</html>

This would produce the following result.

This is first paragraph.

This is first paragraph.

html( val ) Method

The html( val ) method sets the html contents of every matched element. This property is not available on XML documents but it works for XHTML documents.

Syntax

Here is the simple syntax to use this method:

selector.html( val )

Parameters

Here is the description of all the parameters used by this method:

val: Any string

Example

Following example would get HTML content of first paragraph and would display it in second paragraph. Please check description of html() method as well.

<html>
<head>
<title>The Selecter Example</title>
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var content = $("p").html();
$("p#pid2").html( content );
});
</script>
<style>
.red { color:red; }
.green { color:green; }
</style>
</head>
<body>
<p class="green" id="pid1">This is first paragraph.</p>
<p class="red" id="pid2">This is second paragraph.</p>
</body>
</html>

This would produce the following result.

This is first paragraph.

This is first paragraph.

text( ) Method

The text( ) method gets the combined text contents of all matched elements. This method works for both on XML and XHTML documents.

Syntax

Here is the simple syntax to use this method:

selector.text( )

Parameters

Here is the description of all the parameters used by this method:

Example

Following example would find the text in the first paragraph stripping out the html, then set the html of the second paragraph to show it is just text

<html>
<head>
<title>The Selecter Example</title>
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var content = $("p#pid1").text();
$("p#pid2").html(content);
});
</script>
<style>
.red { color:red; }
.green { color:green; }
</style>
</head>
<body>
<p class="green" id="pid1">This is <i>first paragraph</i>.</p>
<p class="red" id="pid2">This is second paragraph.</p>
</body>
</html>

This would produce the following result.

This is first paragraph.

This is first paragraph.

text( val ) Method

The text( val ) method sets the text contents of all matched elements. This method is similar to html( val ) but escapes all HTML entities.

Syntax

Here is the simple syntax to use this method:

selector.text( val )

Parameters

Here is the description of all the parameters used by this method:

val: Any string

Example

Following example would set the HTML content of the first paragraph in the second paragraph but it escapes all the HTML tag.

<html>
<head>
<title>The Selecter Example</title>
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var content = $("p#pid1").html();
$("p#pid2").text(content);
});
</script>
<style>
.red { color:red; }
.green { color:green; }
</style>
</head>
<body>
<p class="green" id="pid1">This is <i>first paragraph</i>.</p>
<p class="red" id="pid2">This is second paragraph.</p>
</body>
</html>

This would produce the following result.

This is first paragraph.

This is <i>first paragraph</i>.

val( ) Method

The val( ) method gets the input value of the first matched element.

Syntax

Here is the simple syntax to use this method:

selector.val( )

Parameters

Here is the description of all the parameters used by this method:

Example

Following example would set the HTML content of the first input box in the second paragraph:

<html>
<head>
<title>The Selecter Example</title>
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var content = $("input").val();
$("p#pid2").text(content);
});
</script>
<style>
.red { color:red; }
.green { color:green; }
</style>
</head>
<body>
<input type="text" value="First Input Box"/>
<input type="text" value="Second Input Box"/>
<p class="green" id="pid1">This is <i>first paragraph</i>.</p>
<p class="red" id="pid2">This is second paragraph.</p>
</body>
</html>

This would produce the following result.

First Input Box

Second Input Box

This is first paragraph.

This is second paragraph.

val( val ) Method

The val( val ) method sets the input value of every matched element.

If this method is called on radio buttons, checkboxes, or select options then it would check, or select them at the passed value.

Syntax

Here is the simple syntax to use this method:

selector.val( val )

Parameters

Here is the description of all the parameters used by this method:

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

Example

Following example would set the value attribute of the second input with the value content of the first input:

<html>
<head>
<title>The Selecter Example</title>
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var content = $("input").val();
$("input").val( content );
});
</script>
</head>
<body>
<input type="text" value="First Input Box"/><br/>
<input type="text" value="Second Input Box"/>
</body>
</html>

This would produce the following result.

First Input Box

Second Input Box

Examples

Similar to above syntax and examples, the following examples would give you understanding on using various attribute methods in different situation:

S.N.	Selector & Description
1	$("#myID").attr("custom") This would return value of attribute custom for the first element matching with ID myID.
2	$("img").attr("alt", "Sample Image") This sets the alt attribute of all the images to a new value "Sample Image".
3	$("input").attr({ value: "", title: "Please enter a value" }); Sets the value of all <input> elements to the empty string, as well as sets The jQuery example to the string Please enter a value.
4	$("a[href^=http://]").attr("target","_blank") Selects all links with href attribute starting with http:// and set its target attribute to _blank.
5	$("a").removeAttr("target") This would remove target attribute of all the links.
6	$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); This would modify the disabled attribute to the value "disabled" while clicking Submit button.
7	$("p:last").hasClass("selected") This return true if last <p> tag has associated classselected.
8	$("p").text() Returns string that contains the combined text contents of all matched elements.
9	$("p").text("<i>Hello World</i>") This would set "<I>Hello World</I>" as text content of the matching <p> elements.
10	$("p").html() This returns the HTML content of the all matching paragraphs.
11	$("div").html("Hello World") This would set the HTML content of all matching <div> to Hello World.
12	$("input:checkbox:checked").val() Get the first value from a checked checkbox.
13	$("input:radio[name=bar]:checked").val() Get the first value from a set of radio buttons.
14	$("button").val("Hello") Sets the value attribute of every matched element <button>.
15	$("input").val("on") This would check all the radio or check box button whose value is "on".
16	$("select").val("Orange") This would select Orange option in a dropdown box with options Orange, Mango and Banana.
17	$("select").val("Orange", "Mango") This would select Orange and Mango options in a dropdown box with options Orange, Mango and Banana.

« Previous | 1 | 2 | 3 | Next »

The largest Interview Solution Library on the web

JQUERY - ATTRIBUTES

This is first paragraph.