jQuery 获取/设置

jQuery的一个非常重要的部分是操纵DOM的可能性。

jQuery提供了有效地操作HTML元素和属性的方法。

在本章中，我们将解释jQuery如何获取和设置元素内容以及属性值。

HTML DOM（文档对象模型）

文档对象模型，通常被称为DOM，是使网站交互的一个重要部分。

文档对象模型表示被显示在一个窗口中的HTML文档。

它是一个接口，允许jQuery操纵网站的内容，结构和样式。

jQuery获取或设置内容-html()，text()和val()

使用jQuery，我们可以轻松地操纵HTML元素。

我们有以下用于DOM操作的jQuery方法：

• html()

• text()

• val()

下一节将向您展示如何使用每种方法。

jQuery html()方法

jQuery html()方法获取或设置所选元素的内容（innerHTML）。

下面的示例在单击按钮时获取第一段的内容：

$("button").click(function(){
  alert($("p").html());
});

下面的示例在单击按钮更改所有段落的内容：

$("button").click(function(){
  $("p").html("我想说: <b>Hello world</b>");
});

jQuery text()方法

jQuery text()方法获取或设置选定元素（包括其后代）的文本内容。

下面的示例在单击按钮时获取所有段落的文本内容：

$("button").click(function(){
  alert($("p").text());
});

下面的示例在单击按钮时更改所有段落的文本内容：

$("button").click(function(){
  $("p").text("我想说: Hello world");
});

html()和text()之间的区别

html()和text()方法都可以设置或获取HTML元素的内容，但是有以下区别：

html()：

• 设置或获取所选元素的内容（文本+ HTML标记）

• 当使用html()方法获取内容时，它将返回第一个选定元素的内容

text()：

• 设置或获取所选元素的内容（仅文本）

• 当使用text()方法获取内容时，它将返回所有选定元素的文本内容

下面的示例演示html()方法和text()方法之间的区别：

$("#btn1").click(function(){
  $("p").html("我想说: <b>Hello world</b>");
});
$("#btn2").click(function(){
  $("p").text("我想说: <b>Hello world</b>");
});

jQuery val()方法

jQuery val()方法获取或设置所选表单元素的value属性。

以下示例获取<input>字段的值：

$("button").click(function(){
  $("input:text").val();
});

以下示例设置<input>字段的值：

$("button").click(function(){
  $("input").val("Hello world");
});

jQuery获取或设置属性-attr()

jQuery attr()方法获取或设置所选元素的属性和值。

以下示例获取图像的src属性的值：

$("button").click(function(){
  $("img").attr("src");
});

以下示例设置图像的src属性的值：

$("button").click(function(){
  $("img").attr("src", "logo_jquery.png");
});

下面的示例设置多个属性和值：

$("button").click(function(){
  $("img").attr({
    alt: "Seagull Icon",
    title: "Image by Seagull",
    width: "350px",
    height: "300px"
  });
});

jQuery HTML参考

有关完整的HTML方法参考，请访问我们的jQuery HTML / CSS参考。