Several jQuery methods can either retrieve or modify values within a selection. Among these methods are text(), html(), attr(), and val().
When these methods are used without any arguments, they act as "getters," retrieving the current value of the element. When provided with an argument, they act as "setters," assigning a new value to the element.
text() MethodThe jQuery text() method serves the dual purpose of retrieving the combined text content of selected elements, including all their descendants, or setting new text content for these elements.
text()Below is an example demonstrating how to retrieve the text contents of paragraphs:
<script>
$(document).ready(function(){
// Get combined text contents of all paragraphs
$(".btn-one").click(function(){
var str = $("p").text();
alert(str);
});
// Get text contents of the first paragraph
$(".btn-two").click(function(){
var str = $("p:first").text();
alert(str);
});
});
</script>Note: While text() in jQuery retrieves the combined text content of all selected elements, other getters like html(), attr(), and val() only return the value from the first element in the selection.
text() MethodThe example below demonstrates how to assign text contents to a paragraph:
<script>
$(document).ready(function(){
// Set text contents of all paragraphs
$(".btn-one").click(function(){
$("p").text("This is demo text.");
});
// Set text contents of the first paragraph
$(".btn-two").click(function(){
$("p:first").text("This is another demo text.");
});
});
</script>
Note: When using jQuery's text(), html(), attr(), and val() methods with a value as an argument, the provided value is set to every matched element.
html() MethodThe jQuery html() method retrieves or updates the HTML contents of the selected elements.
html() MethodHere's an example that demonstrates how to retrieve the HTML contents of paragraph elements and a <div> container:
<script>
$(document).ready(function(){
// Get HTML contents of first selected paragraph
$(".btn-one").click(function(){
var str = $("p").html();
alert(str);
});
// Get HTML contents of an element with ID container
$(".btn-two").click(function(){
var str = $("#container").html();
alert(str);
});
});
</script>
Note: When multiple elements are selected, the html() method retrieves the HTML contents from the first matched element in the selection.
html() MethodThe example below demonstrates how to update the HTML contents of the <body> element:
<script>
$(document).ready(function(){
// Set HTML contents for document's body
$("button").click(function(){
$("body").html("<p>Hello World!</p>");
});
});
</script>attr() MethodThe example below demonstrates how to retrieve the href attribute value from a hyperlink (<a> element) and the alt attribute value from an image (<img> element):
<script>
$(document).ready(function(){
// Get href attribute value of first selected hyperlink
$(".btn-one").click(function(){
var str = $("a").attr("href");
alert(str);
});
// Get alt attribute value of an image with ID sky
$(".btn-two").click(function(){
var str = $("img#sky").attr("alt");
alert(str);
});
});
</script>
Note: When multiple elements are selected, the attr() method retrieves the attribute value only from the first element in the matched set.
attr() MethodThe following example demonstrates how to set the checked attribute of a checkbox:
<script>
$(document).ready(function(){
// Check all the checkboxes
$("button").click(function(){
$('input[type="checkbox"]').attr("checked", "checked");
});
});
</script>The attr() method also allows you to set multiple attributes at a time. The following example demonstrates how to set the class and title attributes for the <img> elements:
<script>
$(document).ready(function(){
// Add a class and title attribute to all the images
$("button").click(function(){
$("img").attr({
"class" : "frame",
"title" : "Hot Air Balloons"
});
});
});
</script>val() MethodThe jQuery val() method is primarily used to retrieve or set the current value of HTML form elements such as input, <select>, and <textarea>.
val() MethodThe following example demonstrates how to retrieve the values of form controls:
<script>
$(document).ready(function(){
// Get value of a text input with ID name
$("button.get-name").click(function(){
var name = $('input[type="text"]#name').val();
alert(name);
});
// Get value of a textarea with ID comment
$("button.get-comment").click(function(){
var comment = $("textarea#comment").val();
alert(comment);
});
// Get value of a select box with ID city
$("button.get-city").click(function(){
var city = $("select#city").val();
alert(city);
});
});
</script>
Note: When selecting multiple form elements, the val() method retrieves the value of the first matched element from the selection.
val() MethodThe following example demonstrates how to assign values to form controls:
<script>
$(document).ready(function(){
// Set value of all the text inputs
$("button").click(function(){
var text = $(this).text();
$('input[type="text"]').val(text);
});
});
</script>