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()区别就介绍到这了。

回复

我来回复
  • 暂无回复内容