In this tutorial you will learn how to use jquery get & set in the element’s content and attribute value as well as the from control value using jQuery.
jQuery Get or Set Contents and Values
Some jQuery methods can be used to either assign or read some value on a selection. A few of these methods are text(), html(), attr(), and val(). These methods are used for “jquery get & set”.
When these methods are called with no argument, it is referred to as a getters, because it gets (or reads) the value of the element. When these methods are called with a value as an argument, it’s referred to as a setter because it sets (or assigns) that value.
jQuery text() Method
The jQuery text() method is either used to get the combined text contents of the selected elements, including their descendants, or set the text contents of the selected elements. This is part of jquery get & set methods
Get Contents with text() Method
The following example will show you how to get the text contents of paragraphs:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery Get Text Contents of the Elements</title> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn-one").click(function(){ var str = $("p").text(); alert(str); }); $(".btn-two").click(function(){ var str = $("p:first").text(); alert(str); }); $(".btn-three").click(function(){ var str = $("p.extra").text(); alert(str); }); }); </script> </head> <body> <button type="button" class="btn-one">Get All Paragraph's Text</button> <button type="button" class="btn-two">Get First Paragraph's Text</button> <button type="button" class="btn-three">Get Last Paragraph's Text</button> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <p class="extra">This is one more paragraph.</p> </body> </html> |
Note:The jQuery
text()retrieves the values of all the selected elements (i.e. combined text), whereas the other getters such ashtml(),attr(), andval()returns the value only from the first element in the selection.
Set Contents with text() Method
The following example will show you how to set the text contents of a paragraph:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript"> $(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 the jQuery
text(),html(),attr(), andval()methods are called with a value as an argument it sets that value to every matched element.
jQuery html() Method
The jQuery html() method is used to get or set the HTML contents of the elements.
Get HTML Contents with html() Method
The following example will show you how to get the HTML contents of the paragraph elements as well as a <div> element container:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="text/javascript"> $(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:If multiple elements are selected, the
html()method only returns the HTML contents of the first element from the set of matched elements.
Set HTML Contents with html() Method
The following example will show you how to set the HTML contents of the <body> element:
| 1 2 3 4 5 6 7 8 | <script type="text/javascript"> $(document).ready(function(){ // Set HTML contents for document's body $("button").click(function(){ $("body").html("<p>Hello World!</p>"); }); }); </script> |
jQuery attr() Method
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 Attribute Value with 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:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="text/javascript"> $(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:If multiple elements are selected, the
attr()method only returns the attribute value of the first element from the set of matched elements.
Set Attributes with attr() Method
The following example will show you how to set the checked attribute of the checkbox.
| 1 2 3 4 5 6 7 8 | <script type="text/javascript"> $(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 will show you how to set the class and title attribute for the <img> elements.
| 1 2 3 4 5 6 7 8 9 10 11 | <script type="text/javascript"> $(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> |
jQuery val() Method
The jQuery val() method is mainly used to get or set the current value of the HTML form elements such as <input>, <select> and <textarea>.
Get the Values of Form Fields with val() Method
The following example will show you how to get the values of form controls:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <script type="text/javascript"> $(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:If multiple form elements are selected, the
val()method only returns the value of the first element from the set of matched elements.
Set the Values of Form Fields with val() Method
The following example will show you how to set the values of the form controls:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery Set Form Fields Values</title> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ var text = $(this).text(); $('input[type="text"]').val(text); }); }); </script> </head> <body> <button type="button">Discovery</button> <button type="button">Atlantis</button> <button type="button">Endeavour</button> <p><strong>Note:</strong> Click the above buttons to set the value of following input box.</p> <p> <input type="text"> </p> </body> </html> |
jquery get & set
from the above topic, we understand how to use “jquery get & set“. If You have any queries, you can ask those in the Forum section of our site. Here is the link for Forum section
