jQuery get and set methods provide different getter method such as text (),html (),attr () and val ().These methods are used to get(or read) the value of the element.
Please keep in mind that jQuery getter methods do not take any argument.
Getter's method does not take an argument, because it takes(or reads) the value from the element while the setter methods take argument since it assigns (or sets) value to the element.
jQuery text() method is used to get or set textual content to the selected elements.
Please keep in mind that the jQuery getter text() method is used to retrieve the values ??of all selected elements while other getter methods(html (), attr () and val ()) return only the value of the first selected element.
Source Code
$(document).ready(function () {
$(".btn-first").click(function () {
var str = $("h2").text();
alert(str);
});
$(".btn-second").click(function () {
var str = $("h2.last").text();
alert(str);
});
});
Let us see the setter text() method example.
General Syntax
$("p").text("This is the text content that indicates jQuery setter method content.");
Source Code
$(document).ready(function () {
$(".btn-first").click(function () {
$("p").text("This is the text content that indicates jQuery setter method content.");
});
});
Jquery HTML() method is used as a getter(read the data) and setter(set the data) for the selected HTML element. Basically, It gets or sets the HTML content of the selected element.
Source Code
$(document).ready(function () {
$(".btn-first").click(function () {
var alrt = $("p").html();
alert(alrt);
});
});
General Syntax
$(".container").html("<p>This is the illustration of <b>jQuery</b> setter method.</p>");
Source Code
$(document).ready(function () {
$(".btn-first").click(function () {
var alrt = $(".container").html("<p>This is the illustration of <b>jQuery</b> setter method.</p>");
});
});
The primary aim of using the jquery attr() method is to get the selected element attribute's value or set one or more attributes to the selected element.
Source Code
$(document).ready(function () {
$(".btn-first").click(function () {
var str = $("a").attr("href");
alert(str);
});
});
Source Code
$(document).ready(function () {
$(".btn-first").click(function () {
$("a").attr({
class: "link",
title: "Learn Bootstrap 5",
});
});
});
It is mainly used to set or get the current value of HTML form elements. These form elements are <input>,
<select> and <textarea>.
Source Code
$(document).ready(function () {
$(".btn-show").click(function () {
var username = $("#username").val();
var workingField = $("#workingField").val();
var message = $("#message").val();
if (username == "" || workingField == "" || message == "") {
alert("Please enter all the field");
return false;
} else {
alert("usetname=" + username + "working Field = " + workingField + " message = " + message);
}
});
});
