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>
