jQuery获取文本节点之 text()/val()/html() 方法区别

jQuery 是一种非常流行的 JavaScript 框架，它提供了许多用于操作 DOM 的方法。其中，text()、val() 和 html() 这三个方法用于获取 HTML 元素的内容，但它们在获取文本节点时有一些区别。下面是它们的详细讲解：

text() 方法

text() 方法用于获取 HTML 元素的文本内容，即去除 HTML 标签后的纯文本内容。例如，在以下 HTML 代码中：

<p>这是一个段落。</p>
<p><b>这是粗体文本。</b></p>

我们可以使用以下 jQuery 代码获取第一个 p 元素的文本内容：

var textContent = $("p:first").text();

执行后，变量 textContent 的值将是 这是一个段落。

值得注意的是，text() 方法获取的是文本内容，不包括 HTML 标签和属性值。另外，该方法也不能获取表单元素（如 input）中的值。

val() 方法

val() 方法用于获取表单元素（如 input、select、textarea 等）的值。例如，在以下 HTML 代码中：

<input type="text" id="myInput" value="这是一个输入框。">

我们可以使用以下 jQuery 代码获取该输入框的值：

var inputValue = $("#myInput").val();

执行后，变量 inputValue 的值将是 这是一个输入框。

值得注意的是，只有表单元素才能使用 val() 方法，其他元素使用时会返回 undefined。

html() 方法

html() 方法用于获取 HTML 元素的内容，包括 HTML 标签和属性值。例如，在以下 HTML 代码中：

<p>这是一个段落。<b>这是粗体文本。</b></p>

我们可以使用以下 jQuery 代码获取该 p 元素的内容：

var htmlContent = $("p:first").html();

执行后，变量 htmlContent 的值将是 <b>这是粗体文本。</b>。

需要注意的是，html() 方法获取的是 HTML 内容，可能包含 JavaScript 代码和事件处理程序。因此，使用 html() 方法时要谨慎，以免引起安全问题。

综上所述，text()、val() 和 html() 方法在获取文本节点时有着不同的用途和区别，使用时应根据具体场景进行选择。