版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20042935/article/details/88692555
JQuery 里val，text，html的使用与区别
介绍：
.html()用为读取和修改元素的HTML标签 对应js中的innerHTML
.html()是用来读取元素的HTML内容（包括其Html标签）,.html()方法使用在多个元素上时，只读取第一个元素
.text()用来读取或修改元素的纯文本内容 对应js中的innerText
.text()用来读取元素的纯文本内容，包括其后代元素;.text()方法不能使用在表单元素上
.val()用来读取或修改表单元素的value值
.val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上
使用方法：
- value：
获取：jquery对象.val()
赋值：jquery对象.val(“值”) - html：
获取：jquery对象.html()
赋值：jquery对象.html(“值”) - text：
获取：jquery对象.text()
赋值：jquery对象.text(“值”)
区别：
-
html和text设置值的区别：
- - html会把标签直接解析到页面上
- - text会把标签作为文本的形式展示到页面上 -
html和text获取值的区别：
- - html会把标签体中存在的html标签获取出来
- - text不会把标签体中存在的html标签获取出来
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//3.1 设置 username的默认值为"许多多"
$("[name=username]").val("许多多");
//3.2获取 username的value属性的值
//alert($("[name=username]").val());
//3.3通过html获取div标签体的内容
//alert($("div").html());
//3.4通过html设置div标签体的内容
$("div").html("如果我们角色互换，我会让你知道什么是残忍！");
//3.5通过text获取div标签体的内容
//alert($("div").text());
//3.6通过text设置div标签体的内容
$("div").text("要来一发吗");
//3.7 两者设置值的区别
//$("#sp1").html("<h1>html方式设置值</h1>");
$("#sp1").text("<h1>text方式设置值</h1>");
//3.8 两者获取值的区别
//alert($("#sp").html());
alert($("#sp").text());
});
</script>
<style type="text/css">
.textClass {
background-color: #ff0;
}
</style>
</head>
<body>
<h3>表单</h3>
<form action="">
<table border="1">
<tr id="tr1">
<td><label>姓名</label></td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td><span>密码</span></td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
</td>
</tr>
<tr>
<td></td>
<td>
<button type="button">普通按钮</button>
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
</td>
</tr>
</table>
</form>
<h3>公告信息</h3>
<div>
未满18慎进
</div>
<span id="sp">外span<a href='#'>内超链</a></span>
<span id="sp1"></span>
</body>
<span></span>
<div>
<span></span>
</div>
</html>