Objectives and outcomes

In this tutorial we are going to learn about jquery get attribute value methods. There are two types of get methods - first is content methods (html(), text(), val()) and the second is attribute methods (attr()).

1- text() - It is used to change or get the text content of selected element.
2- html() - It is used to change or get the content of selected element including html markup.
3- val() - It is used to change or get the value of form fields.
4- attr() - It is used to get the value of attributes.



This div consist of a title which will be displayed on clicking the button below.









HTML code:

<html>
<head>
<meta charset="utf-8">
<title>Get attribute method</title>
<script src="jquery/jquery.min.js"></script>
</head>
<body>
<div id="example" title="Learn javascript, jquery and many more with codeshot.in">
<p style="margin:15px;">This div consist of a title which will be displayed on clicking the button below.</p>
</div><br/>
<div id="get1"></div>
<br/><br/>
<button type="submit" id="butn1">Get title</button>
</body>
</html>


Javascript

<script>
$(document).ready(function()
{
$('#butn1').click(function()
{
var title_text = $('#example').attr("title");
$('#get1').text(title_text);
});	
});
</script>


CSS stylesheet

<style>
#example
{
color:#000;
border:1px solid #585858;
font-size:20px;
height:100px;
text-align:center;
}
	
button[type=submit]
{
background-color:#fff;
color:#000;
border:1px solid #585858;
margin-left:-17px;
}
	
button[type=submit]:hover
{
background-color:#585858;
color:#fff;
border:1px solid #585858;
margin-left:-17px;
}
</style>