We’ve talked about adding events to HTML objects using jQuery. Now, let’s discuss using attributes to manipulate different HTML objects. Almost every HTML DOM element has a set of attributes that we can add, change, or remove using jQuery. These attributes can be color, size, CSS classes, etc. Using jQuery, they allow us to dynamically manipulate these to produce a dynamic web experience.
Please note, there is sample code at the end of this article. We will reference this code throughout the article.
.addClass()
Using the .addClass() method allows you to add a class to an HTML attribute. This does not replace or remove any classes that are already added. You can add more than one class by separating the classes using a space.
$("#sampleText").addClass("redText");
As you can see from the above code, it adds the "redText" class to the sample text. This class changes the text to red. jQuery will not add multiples of the same class name. So no matter how many times you click the button or use the addClass method, the class will only be added once.
.removeClass()
The .removeClass() method allows you to remove class names from an HTML attribute. As with the .addClass() method, you can remove multiple classes by separating the classes with a space. Also, you can remove all classes by leaving the class name blank.
$("#sampleText").removeClass();
This code removes all classes from the Sample Text. You could also specify the class name like this:
$("#sampleText").removeClass("redText");
This will just remove the "redText" class from the Sample Text.
.toggleClass()
The .toggleClass() method allows you to add or remove (toggle) class names from an HTML element. The way this works is that if there is a match on the class name, it will be removed. If the class name is not attached to the element, it will be added. You can also specify more than one class name.
$("#sampleText").toggleClass("redText");
This code will toggle the "redText" class by either adding or removing it.
.hasClass()
The .hasClass() method allows you to check to see if an HTML element has a class assigned or not. This will return a Boolean value of true (it has a class) or false (it does not have a class).
$("#hasClassSample").click(function () {
alert($("#sampleText").hasClass("redText"));
});
The above example code tests to see if the "Sample Text" has the class "redText" and shows an alert box of the results. If you click the button to change the text to red and then click the example button again, it will test positive for the class.
.attr()
The .attr() method gets the attribute value of the first element that matches. Keep in mind that this will return the attribute of the first matched element. If matching elements have different attribute values, you will only get the first listed one. Also, if you try to get the value of the attribute and that attribute does not exists, the value of "undefined" will be returned.
$("#attrSample").click(function () {
alert($("#sampleText").attr("id"));
});
The sample code above displays the value of "sampleText" element’s ID attribute.
.removeAttr()
The .removeAttr() method removes an attribute from the HTML element. This is the same as the JavaScript .removeAttr() method. A good use for this is to use with the INPUT element to remove DISABLE or READONLY attributes.
.html()
The .html() method gets or sets the HTML contents of the element. This will only get the HTML content of the first matched element, but will set all the matched element’s HTML.
$("#htmlSample").click(function () {
alert($("#sampleText").html());
$("#sampleText").html("Changed!");
});
The above example gets the HTML of the "sampleText" element and displays it with an alert box. Then it changes the HTML to "Changed!".
.val()
The .val() method gets or sets the value of form elements like the input element.
$("#inputSample").keyup(function () {
$("#sampleText").html($(this).val());
});
The sample code above takes the characters typed in the input box and replaces the HTML of the "sampleText" element.
$("#valueSample").click(function () {
alert($("#inputSample").val());
});
The above sample code gets the input element’s value and displays it using an alert box.
Conclusion
In this article we discussed various was to access attributes of the HTML elements. You can add and remove classes, read and change values, read and change an element’s HTML, etc. jQuery provides many ways to manipulate HTML elements and using attributes is a great way to change these elements.
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jquery/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#addClassSample").click(function () {
$("#sampleText").addClass("redText");
});
$("#removeClassSample").click(function () {
$("#sampleText").removeClass();
});
$("#toggleClassSample").click(function () {
$("#sampleText").toggleClass("redText");
});
$("#hasClassSample").click(function () {
alert($("#sampleText").hasClass("redText"));
});
$("#attrSample").click(function () {
alert($("#sampleText").attr("id"));
});
$("#htmlSample").click(function () {
alert($("#sampleText").html());
$("#sampleText").html("Changed!");
});
$("#inputSample").keyup(function () {
$("#sampleText").html($(this).val());
});
$("#valueSample").click(function () {
alert($("#inputSample").val());
});
});
</script>
<style type="text/css">
.redText { color: Red; }
</style>
</head>
<body>
<p id="sampleText">Sample Text</p>
<p><button id="addClassSample">Click this to change the text to red</button></p>
<p><button id="removeClassSample">Click this to change the text to back</button></p>
<p><button id="toggleClassSample">Click this to toggle the text between red and normal</button></p>
<p><button id="hasClassSample">Click this to see if the class is attached</button></p>
<p><button id="attrSample">Click this to get the value of the attribute</button></p>
<p><button id="htmlSample">Click this to get the HTML of the attribute</button></p>
<p><input id="inputSample" type="text" value="" /></p>
<p><button id="valueSample">Click this to get the value of the above input</button></p>
</body>
</html>
