jQuery Attributes

The basic components which can be done related to DOM elements are the properties and attributes which are been assigned to the elements.

Most of the attributes are been available in JavaScript as a DOM node properties. The most used properties are :

• id
• tagName
• className
• href
• title
• src

For Example consider a div element :

< div id="newDiv" class="selected" title="This is my first element." > This is my Div < /div > 

< span id="span1" > < /span >

In this element, the tagname is div and the id,class,title are the element's attributes. Each one consists of a name and value. In jQuery we can manipulate an elements attributes easily.

Get Attribute Value :

The attr() can be used in get attribute value. It is used to fetch the value of an attribute from the first element or to set the value onto all matched elements.

Example :

Here, the below example will fetch the title from the div and that title value is stored in the variable called title and set this text to the span for the id of "span1".

output:

This is my Div

This is my first element

Set Attribute Value :

The attr(name,value) method will set the named attributes to all elements by using the passed value.

output :

As the alt attribute value is been changed from Sample image to the Image couldn't be loaded and also the image path is not available in the source. So, the alt value is set to the updated one.

So, the output will be :

Image couldn't be loaded.

Applying class to the elements :

The addClass method is used to add the classes to all the matched elements. The multiple classes can be separated by space.

Example :

output :

This is my first div

This is first paragraph.

Methods for Attribute :

1. removeClass( class ) :

The removeClass method removes all the mentioned classes from the matched elements.

Parameter : class i.e. the name of the class name which has to be removed from the elements.

Syntax :

selector.removeClass( class );

Example :

output :

This is my first div

This is first paragraph.

2. hasClass( class ) :

The hasClass( class ) method will check whether the specified class has the matched elements or not. If the class is present it returns true or else it returns false.

Syntax :

selector.hasClass( class );

Parameter :

class : The name of the class.

Example :

output :

This is first paragraph.

This is second paragraph.

true

false

3. attr( properties ) :

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

Syntax :

selector.attr({ prop1:val1,prop2:val2})

Parameters :

property : css property of the matched element.

value : value which has to be set.

Example :

output :

As the image src is empty and first the alt is none and then it is changed to Logo. So, the attr method will update the alt value to Logo.

Logo.

4.  html() and html( val ) :

html() will get the html content of the  first matched element and the html( val ) will set the value for the specified element.

Syntax :

selector.html();

selector.html( val );

Example :

output :

Here the second div content is replaced by the first div content.

This is first div.

This is first div.

4. text() and text( val ) :

The text() will combine the text contents of all the matched elements and the text ( val ) will set the text contents of all the matched elements.

Syntax :

selector.text();

selector.text( val );

Example :

output :

Here, the text of the div is stored in data1 and data2. Div2 data is replaced with div1 and div3 data is been replaced with div2. But the CSS doesn't change.

This is first div.

This is first div.

This is second div.

6. val() and val( val ) :

The val() will get the input value for the first matched element and the val ( val ) will set the input for the every matched element

Syntax :

selector.val();

selector.val( val );

Parameter : 

val : If it is called on input element it will set for every matched element but if it is called for select tag with the option value then only the passed value will be selected or if it is called for checkbox or radio box then all the selected radio box and check box which are matched will be checked.