实例说明jquery中html()、text()、val()方法的区别

最新推荐文章于 2024-01-28 23:47:35 发布

三五月儿

最新推荐文章于 2024-01-28 23:47:35 发布

阅读量5.2k

点赞数 1

分类专栏： JQuery JavaScript HTML5 文章标签： jquery html 表单标签

本文链接：https://blog.csdn.net/yl2isoft/article/details/54425824

版权

JQuery 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

JavaScript

17 篇文章 0 订阅

订阅专栏

HTML5

9 篇文章 0 订阅

订阅专栏

1、html()
读取和修改元素的HTML标签。对应js中的innerHTML。

2、text()
读取或修改元素的纯文本内容。对应js中的innerText。

3、val()
读取或修改表单元素的value值。

val()只能使用在表单元素上，html()和text()方法不是被用于表单元素。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("label's Text: " + $("#test-label").text());   //label's Text:tttt。
  });
  $("#btn2").click(function(){
    alert("label's HTML: " + $("#test-label").html());//label's HTML:t<b>tt</b>t。
  });
  $("#btn3").click(function(){
    alert("input's Value: " + $("#test-input").val());//input's Value:vv
  });
  $("#btn4").click(function(){
    alert("input's Text: " + $("#test-input").text());//input's Text:
  });
});
</script>
</head>

<body>
<label id="test-label">t<b>tt</b>t。</label>
<input id="test-input" value="vv">xx</input>
<button id="btn1">显示label的文本</button>
<button id="btn2">显示label的HTML</button>
<button id="btn3">显示input的Value</button>
<button id="btn4">显示input的文本</button>
</body>

</html>