In the previous chapter, we learned how to get elements using selectors and various methods, how to refine the selection, leaving only the necessary elements in it. However, the selection itself would be unimportant if jQuery didn’t support selection manipulation. So let’s see what element manipulation we can do with jQuery.
Element Attributes and Properties
The jQuery library provides us with a toolkit for manipulating the properties and attributes of elements. But before moving on to the actual jQuery methods, it’s worth noting how properties and attributes differ.
Attributes are elements of element markup, such as id, style, class, and a number of others. Properties, on the other hand, represent elements of javascript objects.
Despite this difference, there is a mapping between properties and attributes. So, the id attribute will match the id property. For example, we have a link:
<a href="1.html" id="link1">Link</a>
That is, it will display the value of the id attribute on the console. At the same time, not all for all attributes have classes of the same name. For example, an attribute class corresponds to a property className.
Change properties
To work with properties, jQuery has a prop(). To get the values of a property, we need to pass the name of the property to this method. For example, this is how we can get all the URLs of the links on the page:
$('a').each(function(index,elem){
console.log($(elem).prop('href'));
});
To change the value of a property, simply pass the new value as the second parameter:
$('a').first().prop('href','33.html');
After that, the first link on the page will have page 33.html as the address.
Removing properties
To remove properties, we can use the method removeProp(‘property_name’):
$('a').first().removeProp('href');
After that, the property will be assigned a new value: undefined, which will indicate that the property is not defined.
Working with Attributes
Working with attributes is similar to working with properties in many ways. So, to get the value of an element attribute, we need to use the method attr(‘attribute_name’):
$('a').each(function(index,elem){
console.log($(elem).attr('href'));
});
The action of this method is similar to that given for the prop method: displaying all link addresses on the console.
And by passing some value as the second parameter to the attr method, you can set a new attribute value:
$('a').first().attr('href','33.html');
And also to remove attribute values, we modem use the method removeAttr(‘attribute_name’):
$('a').first().removeAttr('href');
Please note that if in the case of removing a property through the removeProp method, the attribute corresponding to the property remained, only it was assigned the value of the property, that is, undefined, then when the attribute is removed through the removeAttr method, the attribute is removed from the element’s markup.
html5 custom attributes
HTML5 introduced functionality such as custom attributes. Their essence is that we can apply additional attributes to the element, which will store some additional value. Such attributes begin with the data- prefix followed by the attribute name and value. For example, in the following example, I am adding a data-year attribute that will store the year:
<ul data-year="2010">
<li>Java</li>
<li>C/C++</li>
<li>PHP</li>
</ul>
To work with similar attributes, use the data. It has the following use cases:
data(‘attribute name’): Gets the attribute value of the first element in the set. The attribute name without the data- prefix is passed as a parameter.
So, we can get the value of the attribute from the previous example like this:
console.log($('ul').data('year'));
data(): returns a javascript object that contains a set of attributes and their values as key-value pairs.
For example, let’s say we have an element with two attributes:
<ul data-year="2010" data-description="lang">
Then the method data()would return an object {description:’lang’, year:’2010′}. And to get the value of an individual attribute, you can write this:
console.log($('ul').data().year);
data(‘attribute’, ‘new value’): sets the value of the attribute to the string passed as the second parameter:
$('ul').first().data('year', '2012');
An entire javascript object can also act as a new value, and this attribute will contain the entire object as a value:
$('ul').first().data('lang', { rate: "tiobe", year: 2012 });
If we want to remove an attribute, then we need to apply the method removeData(‘attribute_name’):
$('ul').removeData('year');