jquery
jQuery Getters & Setter
jQuery contains powerful methods for changing and manipulating HTML elements and attributes.

jQuery DOM Manipulation

DOM is the very important part of jQuery. The jQuery comes with a bunch of DOM related methods that make it easy to access and manipulate elements and attributes.

Get Content and Set Content  Attributes - text(), html(), and val().
Three simple, but useful, jQuery methods for DOM manipulation are :

text() : Sets or returns the text content of selected elements
html() : Sets or returns the content of selected elements (including HTML markup)
val() : Sets or returns the value of form fields.

The following example demonstrates how to get and set content with the jQuery text(), html(), and val() methods :

Get Content - text(), html(), and val()
<!DOCTYPE html>
<html>
<head>
<title>Get Content - text(), html(), and val()</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("#btn1").click(function(){
        alert("Text: " + $("#test").text());
    });
    $("#btn2").click(function(){
        alert("HTML: " + $("#test").html());
    });
$("#btn3").click(function(){
        alert("Value: " + $("#test_val").val());
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>

<body>
 
<p id="test">This is some <b>bold</b> text in a paragraph.</p>

<button type="button" id="btn1" class="btn">Show Text</button>
<button type="button" id="btn2" class="btn">Show HTML</button>
 
 
<p>Name: <input type="text" id="test_val" value="Free Time Learning"></p>

<button type="button" id="btn3" class="btn">Show Val</button>
 
</body>
</html>
Output :
Set Content - text(), html(), and val()
<!DOCTYPE html>
<html>
<head>
<title>Set Content - text(), html(), and val()</title>
 
<script src="../js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("#btn1").click(function(){
        $("#test1").text("Hello world!");
    });
    $("#btn2").click(function(){
        $("#test2").html("<b>Hello world!</b>");
    });
    $("#btn3").click(function(){
        $("#test3").val("Free Time Learning");
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
<body>
 
<p id="test1">This is a sample paragraph.</p>
<p id="test2">This is another sample paragraph.</p>
 
<p>Input field: <input type="text" id="test3" value="website Name"></p>
 
<button id="btn1" class="btn">Set Text</button>
<button id="btn2" class="btn">Set HTML</button>
<button id="btn3" class="btn">Set Value</button>
 
</body>
</html>
Output :
jQuery Get & Set Attributes - attr() Methods
You can use the jQuery attr() method to either get the value of an element's attribute or set one or more attributes for the selected element.
Get Attributes - attr() Method
The following example will show you how get the href attribute of the hyperlink i.e. the <a> element as well as the alt attribute of an <img> element :
<!DOCTYPE html>
<html>
<head>
<title>Get Attributes - attr() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $(".btn-one").click(function(){
        var str = $("a").attr("href");
        alert(str);
    });
    $(".btn-two").click(function(){
        var str = $("img#ftl").attr("alt");
        alert(str);
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
<body>
    <button type="button" class="btn-one btn">Get link href Attribute</button>
    <button type="button" class="btn-two btn">Get image alt Attribute</button>
    <p><a href="http://www.freetimelearning.com/"><img id="ftl" src="images/Free-Time-Learning.png" alt="Logo"></a></p>
</body>
</html>   
Output :
Set Attributes - attr() Method

The jQuery attr() method is also used to set/change attribute values.

The following jQuery attr() example demonstrates how to change (set) the value of the href attribute of an <img> element :

<!DOCTYPE html>
<html>
<head>
<title>Set Attributes - attr() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("img").attr({
            "class" : "frame",
            "title" : "Free Time Learning Logo"
        });
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
.frame{border: 6px solid #000; padding:20px; }
</style>
</head>
<body>
    <button type="button" class="btn">Set Image Attributes</button>
    <p><img id="ftl" src="images/Free-Time-Learning.png" alt="Free Time Learning Logo"></p>
</body>
</html>  
Output :