JavaScript Enhancement Tutorial—Getting Content and Attributes

This article is the official HTML5 training tutorial of H5EDU organization. It mainly introduces: JavaScript enhancement tutorial - Get content and attributes


jQuery - Get content and attributes
jQuery has powerful methods to manipulate HTML elements and attributes.
jQuery DOM operation
A very important part of jQuery is the ability to operate DOM.
jQuery provides a series of DOM-related methods that make it easy to access and manipulate elements and attributes.
lamp DOM = Document Object Model

DOM defines standards for accessing HTML and XML documents:
"The W3C Document Object Model is a platform- and language-independent interface that allows programs and scripts to dynamically access and update the content of documents. Structure and style. "

Get content - text(), html() and val()
Three simple and practical jQuery methods for DOM manipulation:
text() - Set or return the text content of the selected element
html() - Sets or returns the content of the selected element (including HTML tags)
val() - Sets or returns the value of a form field
The following example demonstrates how to obtain content through the 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 through the jQuery val() method:
Example
$("#btn1").click(function(){
alert("The value is: " + $("#test").val());
});

Get attributes - attr( )
jQuery attr() method is used to get the attribute value.
The following example demonstrates how to get the value of the href attribute in the link:
Example
$("button").click(function(){
alert($("#runoob").attr("href"));
});