Getter in JQuery simply means, to get the contents of any HTML element.
Let us understand it with the below example, where we have a <p> element,
<p> New Code </p>
With content New Code. And we want to get the content of the <p> element. This can be achieved with the text() method.
<html>
<head>
<title> My First Programme </title>
</head>
<body>
<h1> JQuery </h1>
<p> New Code </p>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
<script>
var x = $('p').text();
document.write("The content of p tag is ::", x)
</script>
</body>
</html>
Now, we just need to look at the JQuery code. So, let us take the JQuery code chunk and analyse it,
var x = $('p').text();
document.write("The content of p tag is ::", x)And we need to do is, access the text inside the <p> element.
<p> New Code </p>
So, we have used a text() method along with the selector, so that we can get the actual text i.e. New Code.
var x = $('p').text();And after we got the text i.e. New Code. We assign it to a variable x.
And we print the value of x using document.write() statement.
In brief, html body p is the Selector. And we pass html body p to JQuery to get the text using the text() Method.
So, text() method can be said as a Getter method because it gets the content of the <p> element.
Similarly, there are other Getter methods that helps us get the contents of the HTML elements.
In this tutorial, we will be discussing the commonly used getter methods i.e. text(), html(), val() and attr(),
And you can click on the below getter methods to understand in detail :
The html() method is used to get the contents of an HTML element.
<html>
<head>
<title> My First Programme </title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
</head>
<body>
<h1> JQuery </h1>
<button> Click to get the HTML </button>
<p>
In a huge pond, <br/>
there lived many fish. <br/>
They were arrogant and <br/>
never listened to anyone.<br/>
</p>
<script>
$('button').click( function() {
alert($('p').html());
});
</script>
</body>
</html>
So, in the above example, we have a <p> element,
<p> In a huge pond, <br/> there lived many fish. <br/> They were arrogant and <br/> never listened to anyone.<br/> </p>
And a <button> element,
<button> Click to get the HTML </button>
And on buton click, the JQuery statement gets triggered,
$('button').click( function() {
alert($('p').html());
});And an alert is generated,
alert($('p').html());And all we have done is used the getter method html() to get the contents of the <p> element.
$('p').html()Now, if we see the output (i.e. The alert),
In a huge pond, <br/> there lived many fish. <br/> They were arrogant and <br/> never listened to anyone.<br/>
We can see the <br/> elements are also displayed. This is because the html() method is used to get the HTML content of the <p> element.
The val() method is used to get the value of an HTML form element.
<html>
<head>
<title> My First Programme </title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
</head>
<body>
<h1> JQuery </h1>
Enter anything and click to get its content : <input type = "text"/>
<br/><br/>
<button> Click it </button>
<script>
$('button').click( function() {
alert($('input').val());
});
</script>
</body>
</html>
So, if we look at the above code, we have an <input> element(Just remember, <input> element is a part of the <form> element).
<input type = "text"/>
And we have a <button> element,
<button> Click it </button>
And on buton click, the JQuery statement gets triggered,
$('button').click( function() {
alert($('input').val());
});And an alert is generated,
alert($('input').val());Now, if we see the output (i.e. The alert),
You get that value which you have entered in the <input> field.
This is because the val() method is used to get the actual value of the <input> element.
The attr() method is used to get the attribute of an HTML element.
<html>
<head>
<title> My First Programme </title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
</head>
<body>
<h1> JQuery </h1>
Enter the value : <input type = "text"/>
<br/><br/>
<button> Click it </button>
<script>
$('button').click( function() {
alert("The input element is of type : " + $("input").attr("type"));
});
</script>
</body>
</html>
So, if we look at the above code, we have an <input> element that has an attribute i.e. "type = 'text'".
<input type = "text"/>
And we have a <button> element,
<button> Click it </button>
And on buton click, the JQuery statement gets triggered,
$('button').click( function() {
alert("The input element is of type : " + $("input").attr("type"));
});And an alert is generated,
alert("The input element is of type : " + $("input").attr("type"));Now, if we see the output (i.e. The alert),
You get the type of the <input> element(i.e. text).
This is because the attr("type") method is used to get the attribute i.e. type of the <input> element.
