jQuery - 获取内容和属性


jQuery 包含用于更改和操作 HTML 元素和属性的强大方法。


jQuery DOM 操作

jQuery 的一个非常重要的部分是可以操作 DOM。

jQuery 附带了一系列 DOM 相关方法,可以轻松访问和操作元素和属性。

DOM = 文档对象模型

DOM 定义了访问 HTML 和 XML 文档的标准:

"The W3C Document Object Model (DOM) 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."


获取内容 - text()、html() 和 val()

用于 DOM 操作的三种简单但有用的 jQuery 方法是:

  • text()- 设置或返回所选元素的文本内容
  • html()- 设置或返回所选元素的内容(包括 HTML 标记)
  • val()- 设置或返回表单字段的值

下面的例子演示了如何使用 jQuery 获取内容text()html()方法:

示例

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
亲自试一试 »

下面的例子演示了如何使用 jQuery 获取输入字段的值val()方法:

示例

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});
亲自试一试 »


获取属性 - attr()

jQueryattr()方法用于获取属性值。

以下示例演示如何获取链接中 href 属性的值:

示例

$("button").click(function(){
  alert($("#w3s").attr("href"));
});
亲自试一试 »

下一章解释如何设置(更改)内容和属性值。


jQuery 练习

通过练习测试一下

练习:

使用 jQuery 方法返回<div> 元素的文本内容。

$("div").();

开始练习


jQuery HTML 参考

有关所有 jQuery HTML 方法的完整概述,请访问我们的jQuery HTML/CSS 参考