How To Get Attribute Value In Jquery

by

Working with HTML attributes is a common task in web development, especially when dealing with forms, links, or any other elements that require user interaction. There are times when we need to access these attribute values to perform certain operations or modify the DOM. In this blog post, we will learn how to get attribute values using jQuery.

jQuery.attr() Method

The jQuery.attr() method is used to get the value of an attribute on the first element in the set of matched elements. The syntax for using the attr() method is as follows: 

jQuery(selector).attr(attributeName);

Here, selector is the element whose attribute value we want to get, and attributeName is the name of the attribute whose value we want to retrieve.

Example

Let’s say we have the following HTML code for an image element: 

<img id="my-image" src="image.jpg" alt="Sample Image">

To get the value of the src attribute of the image, we can use the following jQuery code: 

$(document).ready(function() {
    var imgSrc = $("#my-image").attr("src");
    console.log("Image source:", imgSrc);
});

In this example, we are using the $(“#my-image”) selector to target the image element with the ID “my-image”, and then using the attr() method to get the value of the src attribute. The output in the console will be “Image source: image.jpg”.

Getting Multiple Attribute Values

You can also get the values of multiple attributes at once by chaining the attr() method. For example, if you want to get the values of both the src and alt attributes of the image, you can use the following code: 

$(document).ready(function() {
    var imgSrc = $("#my-image").attr("src");
    var imgAlt = $("#my-image").attr("alt");
    console.log("Image source:", imgSrc);
    console.log("Image alt text:", imgAlt);
});

The output in the console will be:

“Image source: image.jpg”

“Image alt text: Sample Image”

Conclusion

In this blog post, we learned how to get the value of an attribute using jQuery’s attr() method. This method is very useful for accessing and manipulating HTML attributes, and it can be used with various HTML elements to achieve different tasks. Remember to always include the jQuery library in your project before using any jQuery methods.