JQuery中的html()、text()、val()区别示例介绍

下面是详细的攻略：

标题

JQuery中的html()、text()、val()区别示例介绍

介绍

JQuery是一个非常流行的JavaScript库，提供了许多实用的方法。其中三个常用的方法是html()、text()和val()，用于操作HTML元素的内容。

区别

html()

html()方法用于获取或设置HTML元素的内容。如果不传参数，则返回第一个匹配元素的HTML内容。如果传入参数，则将所有匹配元素的HTML内容设置为该参数的值。

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

<script>
var value = $('#demo').html();
alert(value); // 输出: 这是一个段落

$('#demo').html('这是一个新段落');
value = $('#demo').html();
alert(value); // 输出: 这是一个新段落
</script>

text()

text()方法用于获取或设置HTML元素的文本内容。如果不传参数，则返回所有匹配元素的文本内容。如果传入参数，则将所有匹配元素的文本内容设置为该参数的值。

<p id="demo">这是<b>粗体</b>的文字</p>

<script>
var value = $('#demo').text();
alert(value); // 输出: 这是粗体的文字

$('#demo').text('这是新文字');
value = $('#demo').text();
alert(value); // 输出: 这是新文字
</script>

val()

val()方法用于获取或设置表单元素的值。如果不传参数，则返回第一个匹配元素的值。如果传入参数，则将所有匹配元素的值设置为该参数的值。

<input type="text" id="demo" value="Hello World">

<script>
var value = $('#demo').val();
alert(value); // 输出: Hello World

$('#demo').val('新的值');
value = $('#demo').val();
alert(value); // 输出: 新的值
</script>

总结

以上就是html()、text()和val()方法的区别及示例介绍。总结一下，它们的主要差别在于：

• html()用于操作HTML内容，text()用于操作文本内容，val()用于操作表单元素的值。
• html()和text()可以应用于所有HTML元素，而val()只能应用于表单元素。
• html()和text()是获取/设置HTML元素内容和文本内容，而val()是获取/设置表单元素的值。

希望以上内容能够帮助大家更好地理解JQuery中html()、text()和val()方法的区别和应用。