jQuery对HTML元素的取值与赋值实例详解

前言

jQuery 是一款非常流行的 JavaScript 框架，很多网站都会使用它来进行开发，它提供了非常方便的 API 进行 DOM 操作。其中，包括对 HTML 元素的取值与赋值操作，本文就来详细讲解一下。

HTML 元素的取值

text()

我们可以使用 text() 方法获取一个 HTML 元素的纯文本内容，例如：

<p id="content">这是一个段落</p>

var content = $('#content').text();

上述代码会将 content 变量赋值为 这是一个段落。

html()

另外，我们还可以使用 html() 方法获取一个 HTML 元素的 HTML 代码，例如：

<div id="content">
  <h2>这是一个标题</h2>
  <p>这是一个段落</p>
</div>

var content = $('#content').html();

上述代码会将 content 变量赋值为 <h2>这是一个标题</h2><p>这是一个段落</p>。

HTML 元素的赋值

text()

我们可以使用 text() 方法给一个 HTML 元素设置文本内容，例如：

<p id="content">这是一个段落</p>

$('#content').text('这是新的文本内容');

上述代码会将 id 为 content 的元素的文本内容设置为 这是新的文本内容。

html()

另外，我们还可以使用 html() 方法给一个 HTML 元素设置 HTML 代码，例如：

<div id="content">
  <h2>这是一个标题</h2>
  <p>这是一个段落</p>
</div>

$('#content').html('<h2>这是新的标题</h2><p>这是新的段落</p>');

上述代码会将 id 为 content 的元素的 HTML 代码设置为 <h2>这是新的标题</h2><p>这是新的段落</p>。

结语

以上就是 jQuery 对 HTML 元素的取值与赋值实例的详细讲解，希望读者可以通过本文更好地掌握 jQuery 的 DOM 操作能力。