- 4 years ago
- Zaid Bin Khalid
- 7615 Views
-
6
In this session, you will learn how to Get or Set the content of the element and attribute value with the help of JQuery with an example.
jQuery Get or Set Contents and Values
In jQuery, a few methods like text ( ), Html, attr ( ), and Val ( ) method can be used to assign or read some value on a selection.
If these methods are known with no argument, it means it referred to as getters, because it gets the value of the element. When these methods are known with value as an argument, it referred to as a setter because it sets or assigns that value.
jQuery text ( ) Method
The method is used to get the combined text contents of the selected elements, with the set text contents are called the jQuery text ( ) method.
Get Contents with text ( ) Method
With the help of the following example, you will know how to get 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>
Set Contents with text ( ) Method
With the help of the following example you know how to set the text contents of 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>
jQuery Html ( ) Method
The method is used to get or set the HTML contents of the elements are called the jQuery Html ( ) method.
Get HTML Contents with Html ( ) Method
With the help of the following example you will know how to get the Html contents of the paragraph elements as well as an <div> element 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>
Set HTML Contents with Html ( ) Method
With the help of following example you will know how to set the Html content 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>
jQuery attr ( ) Method
The method is used to get the value of an element attribute or set one or more attributes for the selected elements are called jQuery attr ( ) method.
Get Attribute Value with attr ( ) Method
With the help of the following example, you will know the href attribute of the hyperlink.
<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>
jQuery val () Method
The method is used to get or set the current value of the Html form element is called the jQuery val ( ) method.
Get the Values of Form Fields with val ( ) method
With the help of the following example you will know how to get the values of the form control:
<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 the 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>
- 4 years ago
- Zaid Bin Khalid
- 7615 Views
-
6