JavaScript Enhancement Tutorial - jQuery - Get content and attributes

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

jQuery has a powerful method of manipulating HTML elements and attributes.

jQuery DOM operation

A very important part of jQuery is the ability to operate DOM.

jQuery provides a set of DOM-related methods that make it easy to access and manipulate elements and attributes.

Tip: DOM = Document Object Model

DOM defines the standard for accessing HTML and XML documents:

"The W3C Document Object Model is platform and language independent An interface that allows programs and scripts to dynamically access and update the content, structure, and style of documents."

Getting content - text(), html() and val()

Three simple and practical methods. jQuery methods for DOM manipulation:

text() - Sets or returns the text content of the selected element
html() - Sets or returns the content (including HTML markup) of the selected element
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("Value: " + $("#test").val()); });

Get attributes - attr()

The jQuery attr() method is used to get the attribute value.

The following example demonstrates how to obtain the value of the href attribute in the link:

Example

$("button").click(function(){ alert($("#w3s").attr("href")); });

The above is the JavaScript enhancement tutorial-jQuery - Obtaining content and attributes Content, for more related content, please pay attention to the PHP Chinese website (www.php.cn)!