Change HTML Attribute with jQuery
What is the Purpose of This Tutorial?
- How to change some attributes contained in HTML with jQuery
Requirements
- Must know about HTML, CSS, and Javascript
- jQuery (.js file), you can download it in this link https://jquery.com/download/
Difficulty
- Basic
Introduction
jQuery is a fast, small and feature-rich JavaScript library included in a single .js file. jQuery makes a web developer's life easy. It provides many built-in functions using which you can accomplish various tasks easily and quickly.
jQuery's change methods allow you to alter the Document Object Model of your page using a syntax that's much friendlier than the one provided by native DOM of changing methods. Change methods return the jQuery object on which they were called, which means you can chain them or combine them with other jQuery methods.
So, let's get started to practice it.
Take HTML Attributes with jQuery
To create an interactive page, sometimes we have to change the attributes of an HTML element. To "deal" with the HTML element attribute, jQuery provides the attr() method. This method can be filled with 1 or 2 arguments. If filled with 1 argument, we want to take the attribute of that element.
For example, to retrieve the title attribute value from an HTML tag that has id="paragraph", we can write the following jQuery code :
var value = $("# paragraph ").attr("title");
Now, the value variable will contain the title attribute value.
For more "real" program code, let's go into the following practice example :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery by simpleawesome</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function() {
$("#take").click(function() {
var value1 = $("a[title]").attr("href");
var value2 = $("a[title]").attr("title");
var value3 = $("a[title]").attr("target");
$("#goto").html(value1+"<br>"+value2+"<br>"+value3);
})
});
</script>
</head>
<body>
<h2>jQuery by simpleawesome</h2>
<a href="https://utopian.io/@simpleawesome"
title="Hi There"
target="_blank" >
Hi, i'm simpleawesome
</a>
<br><br>
<button id="take">Take the Attribute</button>
<p id="goto"></p>
</body>
</html>
Here, we have a link created from the < a > tag. Notice this link has 3 attributes: href, title, and target. Underneath there is a Capture Attribute button created with the <button id = "take"> tag. The last element is an empty paragraph that has id = "goto".
Here we want to take all three attributes of the < a > tag, then display the result to <p id = "goto">. This we did with the following 4 lines :
var value1 = $("a[title]").attr("href");
var value2 = $("a[title]").attr("title");
var value3 = $("a[title]").attr("target");
$("#goto").html(value1+"<br>"+value2+"<br>"+value3);
Notice how to retrieve the value of each attribute. The value1, value2 and value3 variables will contain the href, title and target attributes of the < a > tag.
<a href="https://utopian.io/@simpleawesome"
title="Hi There"
target="_blank" >
For the jQuery selector < a > tag, we look for it usinga [title]. In CSS, a selector like this is known as the selector attribute. That is, we look for a < a > tag that has the title attribute. Because on the current page there is only 1 < a > tag, this tag will be taken. This is just an alternative to the id attribute we always use today.
Finally we use the html() method to move the three attribute values into the <p id = "goto"> </ p> tag.
This is the result of the program code we have created :
Then we try to press the "Take the Attribute" button and see what happens below :
In the picture above, will appear text or contents of href, title and target attribute taken by id="take". Then the text will be picked up by $("#goto").html(value1+"<br>"+value2+"<br>"+value3)as we have discussed above.
Add HTML Attributes with jQuery
After we know how to take the HTML attribute with jQuery, we must know also how to add it. We still use the attr() method. But this time by writing 2 arguments. The first argument serves as an attribute name, while the second argument is the value of the attribute.
For example, to change or add the title = "put the title here" attribute to the HTML element with id="paragraph", we can write the following code :
$("#paragraph").attr("title","put the title here");
Let's look at the sample code of the program below :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery by simpleawesome</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function() {
$("#add").click(function() {
$("#link_jquery").attr("href",
"https://utopian.io/@simpleawesome");
$("#link_jquery").attr("title","Hi There");
})
});
</script>
</head>
<body>
<h2>jQuery by simpleawesome</h2>
<p>
<a id="link_jquery">Hi, i'm simpleawesome</a>
</p>
<button id="add">Add the Attribute</button>
</body>
</html>
Here are the results (temporarily) :
When the HTML page was first executed, the < a > tag has no attributes other than id="link_jquery". This < a > tag is not a link yet, because it does not have a href attribute. Can we see in the picture above, the text "Hi, i'm simpleawesome" has not been active into a link or not blue.
When the Add the Attribute button is clicked, we will add 2 new attributes with the following command :
$("#link_jquery").attr("href","https://utopian.io/@simpleawesome");
$("#link_jquery").attr("title","Hi There");
Now, the tag <a id="link_jquery"> has got href and title attributes. That is, the < a > tag is transformed into a link. We can see the effect by changing the font color to blue and having an underscore, just like a normal link like the output below :
Points to Remember
- jQuery attribute methods allows us to change attributes and properties of elements.
- Use the selector to get the reference of an element(s) and then call jQuery attribute methods to edit it.
Curriculum
This is the first tutorial i'm contributing using jQuery.
Posted on Utopian.io - Rewarding Open Source Contributors
Congratulations @simpleawesome! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOPThank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Thank you
Hey @simpleawesome I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x