jQuery - Getting Content and Attributes
jQuery has powerful methods to manipulate HTML elements and attributes.
jQuery DOM Manipulation
A very important part of jQuery is the ability to manipulate the DOM.
jQuery provides a set of methods related to the DOM, making it easy to access and manipulate elements and attributes.
| | DOM = Document Object Model (Document Object Model) <br> <br> The DOM defines a standard for accessing HTML and XML documents: "The W3C Document Object Model is a platform- and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." | | --- | --- |
Getting Content - text(), html(), and val()
Three simple and practical jQuery methods for DOM manipulation:
text() - Sets or returns the text content of the selected elements
html() - Sets or returns the content of the selected elements (including HTML markup)
val() - Sets or returns the value of form fields
The following example demonstrates how to get content using jQuery text() and html() methods:
Example
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
The following example demonstrates how to get the value of an input field using jQuery val() method:
Example
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
Getting Attributes - attr()
The jQuery attr() method is used to get the value of an attribute.
The following example demonstrates how to get the value of the href attribute in a link:
Example
$("button").click(function(){
alert($("#tutorialpro").attr("href"));
});
The next chapter will explain how to set (change) content and attribute values.