jquery text(),val(),html()方法区别总结

当我们使用jQuery来操作DOM元素时，常常会遇到一种情况，即需要获取或修改该元素的文本内容或属性值。此时，jQuery提供了text()、val()、html()方法来实现这些操作。下面是他们的详细讲解，以及区别总结。

1. text()方法

text()方法返回（或修改）匹配元素的纯文本内容。比如，下面这个例子中，我们通过选择器选中了一个段落元素

，然后获取了它的文本内容，最后使用alert方法将其显示在弹出框中：

// 获取元素内容
var textContent = $("p").text();

// 显示结果
alert(textContent);

此时，如果该段落元素的HTML代码为<p>Hello, world!</p>，则将显示弹出框中将显示"Hello, world!"。

在修改元素纯文本内容时，同样可以使用text()方法。例如，当我们想修改上述段落元素的内容时，可以调用以下代码：

$("p").text("Hello, jQuery!");

此时，该段落元素的HTML代码变为<p>Hello, jQuery!</p>。

注意，使用text()方法来修改元素内容时，除了原有文本内容会被替换外，所有子元素和HTML标签都会被完全删除。

2. val()方法

val()方法用来获取或设置HTML表单元素（如input、select、textarea等）的值。例如，我们可以对一个文本框（input[type="text"]）使用val()方法来获取或设置当前其输入框的值：

// 获取文本框的值
var inputVal = $("input[type='text']").val();

// 设置文本框的值
$("input[type='text']").val("Hello, jQuery!");

注意，在代码中使用val()方法时，要明确指明选中的表单元素的类型，避免出现选择错误的情况。

3. html()方法

和text()方法类似，html()方法用来获取或设置匹配元素的HTML内容。例如，如果我们想获取一个段落元素p的HTML内容：

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

在调用该方法后，变量htmlContent的值将是：Hello, jQuery!

要修改一个元素的HTML内容，可以这样做：

$("p").html("<i>Hello, jQuery!</i>");

此时，该段落元素的HTML代码将变为<p><i>Hello, jQuery!</i></p>。

需要注意的是，在调用html()方法修改元素的HTML内容时，原有文本内容和子元素都将被替换。而使用text()方法仅仅只是替换文本内容。

综上所述，text()方法主要操作元素的文本内容，val()方法主要操作表单元素的值，而html()方法主要操作元素的HTML内容。需要根据需要选择适合的方法。