Jquery Get Attribute Value Example

Share Me
  •  
  •  
  •  
  • 2
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    2
    Shares

Today now in this example,i will show you how to get attribute value by using jquery. we can easy and simply get the attribute value by using jquery.

So now here we get the value of an attribute for the first element in the set of matched elements or the set one or more attributes for every matched element. Now In following example i will give you three way to get custom attribute value by using jquery.

Example 1:

Syntax :

So now when a single parameter is passed to the .attr() function then it will returns the value of passed attribute on the selected element.

$([selector]).attr([attribute name]);
<html lang="en">
<head>
	<title>Get Attribute Value</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
    <input type="text" name="name" id="textbox1">
    <script type="text/javascript">

	    var input_type = $("input").attr("type");
	    alert(input_type);
	    
	    var input_id = $("input").data("id");
	    alert(input_id);

	    var input_name = $("input").attr("name");
	    alert(input_name);

    </script>
</body>
</html>
Example 2 :

We know jQuery offers data() function in order to deal with data attributes. so data() function returns the value of the data attribute on the selected element.

Syntax :

$([selector]).data([attribute name]);
<html lang="en">
<head>
	<title>Get Attribute Value</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
    <article data-row="4"></article>
    <script type="text/javascript">
    	
	    var article_data_row = $("article").data("row");
	    alert(article_data_row);
	    
    </script>
</body>
</html>

Read Also : Laravel 8 Eloquent Global Scope Tutorial Example

I hope it will help you. Also you can follow us on Facebook

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →