浅析JQuery中的html(),text(),val()区别

当我们使用jQuery操作DOM元素时，常用的三个方法是html()、text()和val()。这三个方法的区别在于返回值和作用对象不同。下面进行详细讲解：

html()方法

html()方法是用来设置或获取元素的HTML代码，它可以被用于任何HTML元素。当它被用于获取HTML代码时，返回匹配元素集合中第一个元素的HTML内容。

示例1：

<div id="test">
    <p>This is a paragraph.</p>
</div>

$(document).ready(function(){
    var htmlString = $("#test").html();
    alert(htmlString);
});

输出：<p>This is a paragraph.</p>

从以上代码可以看出，html()方法能够获取任何HTML元素的内容，包括子元素和文本节点。

示例2：

<div id="test">
</div>

$(document).ready(function(){
    $("#test").html("<p>This is a paragraph.</p>");
});

效果：<div id="test"><p>This is a paragraph.</p></div>

从以上代码可以看出，html()方法能够向指定的元素中插入新的HTML代码，同时会替换元素原有的内容。

text()方法

text()方法是用来设置或获取元素的文本内容，它只能被用于选中的元素。当它被用于获取文本内容时，返回匹配元素集合中第一个元素的文本内容。

示例1：

<div id="test">
    <p>This is a paragraph.</p>
</div>

$(document).ready(function(){
    var textString = $("#test").text();
    alert(textString);
});

输出：This is a paragraph.

从以上代码可以看出，text()方法只会获取元素的文本内容，不会返回HTML代码或者子元素。

示例2：

<div id="test">
</div>

$(document).ready(function(){
    $("#test").text("This is a paragraph.");
});

效果：<div id="test">This is a paragraph.</div>

从以上代码可以看出，text()方法能够向指定的元素中插入新的文本内容，同时会替换元素原有的内容。

val()方法

val()方法是用来获取表单元素的值，或者设置表单元素的值。它只能被用于表单元素，例如input、select和textarea元素等。

示例1：

<input type="text" id="test"> 
<button onclick="alert($('#test').val())">Click Me!</button>

从以上代码可以看出，val()方法能够获取输入框中的文本。

示例2：

<input type="text" id="test"> 
<button onclick="$('#test').val('New Value')">Click Me!</button>

从以上代码可以看出，val()方法能够向表单元素中插入新的值，同时会替换元素原有的值。

综上所述，html()方法、text()方法和val()方法的区别在于它们的作用对象和返回结果。html()方法用于操作元素的HTML代码，text()方法用于操作元素的文本内容，val()方法用于操作表单元素的值。