jQuery设置内容和属性

jQuery是广受欢迎的JavaScript库，能够帮助开发者更加便捷地操作HTML文档和处理DOM事件。其中，设置内容和属性是jQuery中经常使用的功能，下面将详细讲解它的使用方法。

设置HTML内容和文本内容

设置HTML内容和文本内容的方法分别是html()和text()。其中，html()方法可以设置一个元素的HTML内容，而text()方法则可以设置一个元素的文本内容。

设置HTML内容

使用html()方法来设置元素的HTML内容。例如，下面的代码将id为myDiv的元素的HTML内容设置为<strong>Hello World!</strong>：

$("#myDiv").html("<strong>Hello World!</strong>");

设置文本内容

使用text()方法来设置元素的文本内容。例如，下面的代码将id为myDiv的元素的文本内容设置为Hello World!：

$("#myDiv").text("Hello World!");

设置元素属性

jQuery中使用attr()方法可以设置元素的属性。这个方法通常接收两个参数：要设置的属性名和属性值。例如，下面的代码将id为myLink的元素的href属性设置为https://www.example.com的值：

$("#myLink").attr("href", "https://www.example.com");

同时，attr()方法也可以接收一个包含属性名和属性值的对象。例如，下面的代码可以同时设置id为myLink的元素的href和target属性：

$("#myLink").attr({
  "href": "https://www.example.com",
  "target": "_blank"
});

示例说明

下面是两个实际示例，分别演示如何设置HTML和文本内容，以及如何设置元素的属性。

示例1：设置HTML内容和元素属性

HTML代码：

<div id="myDiv">
  This is a <span>Hello World!</span>
  <a id="myLink" href="#">click me</a>
</div>

JavaScript代码：

// 设置元素的HTML内容
$("#myDiv span").html("<strong>Hello World!</strong>");

// 设置元素的属性
$("#myLink").attr({
  "href": "https://www.example.com",
  "target": "_blank"
});

示例2：设置文本内容和元素属性

HTML代码：

<div id="myDiv">
  This is a <span>Hello World!</span>
  <a id="myLink" href="#">click me</a>
</div>

JavaScript代码：

// 设置元素的文本内容
$("#myDiv span").text("Hello World!");

// 设置元素的属性
$("#myLink").attr("href", "https://www.example.com");

总之，使用html()和text()方法可以轻松设置元素的内容，而attr()方法可以方便地设置元素的属性，使代码更加简洁、易读。