jQuery html(),text(),val()区别
分类：实例代码
jQuery html(),text(),val()区别属于前端实例代码，有关更多实例代码大家可以查看。
本章节介绍一下标题中三个方法的区别。
虽然比较简单，但是可能对于初学者还是有点难度的，下面就对它们做一下简单介绍。
一.val()方法:
此方法和其他两个方法最容易区分。
因为此方法专门针对表单元素的value属性值。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var inputVal=$("input").val();
var divText=$("#antzone").val();
$("#show").text("input的value值:"
+inputVal+",div的内部文本是:"
+divText)
})
</script>
</head>
<body>
<input type="text" value="pipipi.net"/>
<div id="antzone">犀牛前端部落</div>
<div id="show"></div>
</body>
</html>
从上面的代码可以看出，val()方法只针对表单元素的value属性值。
二.text()和html()方法:
text方法会对元素内容中的<和>编码为HTML字符实体，而html方法不会。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#txt").text("<b>犀牛前端部落</b>");
$("#html").html("<b>犀牛前端部落</b>");
})
</script>
</head>
<body>
<div id="txt"></div>
<div id="html"></div>
</body>
</html>
正因为text方法对html标签编码为html字符实体，所以才会在第一个div中将标签输出，而html方法不会编码，直接原样输出，那么就会被浏览器给解析。
jQuery html(),text(),val()区别，这样的场景在实际项目中还是用的比较多的，关于jQuery html(),text(),val()区别就介绍到这了。