jquery元素选择val()、html()、text()的用法
1、在整个jquery开发框架之中，最为重要的工具就是页面元素的选择处理。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
function fun() {
var msgValue = $(msg).val();
console.log("**************msg=" + msgValue);
}
</script>
<html>
<body>
<input type="text" name="msg" id="msg">
<input type="button" value="选择" onclick="fun()">
</body>
</html>
2、如果按照之前的写法“ $(msg).val()”，要变为"document.getElementById("msg").value",而如果使用了jquery之后整个世界都变了。在jquery里面充分考虑到用户的体验，所以对于val()函数还提供有设置内容的功能。
功能：设置组件的内容。
3、很多的时候我们认为应该将内容设置到一个“<span>”或者“<div>”元素之中。所以在此时就不能够利用val()函数完成了。因为val()函数主要是针对于表单控件（value属性）。
4、但是如果要设置“<div>”、"<span>"中的文件，那么就不应该是value属性的范畴了。所以这个可以使用text(),html()两个函数完成。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
function fun() {
var msgValue = $(msg).val();
$(showMsg).text(msgValue);
}
</script>
<html>
<body>
<input type="text" name="msg" id="msg">
<input type="button" value="设置内容" onclick="fun()">
<div id="showMsg"></div>
</body>
</html>
5、但是text()设置的都是纯文本，如果此时你输入的内容包含有html元素。
6、如果要想标签正常显示出来，则要使用html():
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
function fun() {
var msgValue = $(msg).val();
$(showMsg).html(msgValue);
}
</script>
<html>
<body>
<input type="text" name="msg" id="msg">
<input type="button" value="设置内容" onclick="fun()">
<div id="showMsg"></div>
</body>
</html>
7、此时如果设置的内容之中包含有html元素，那么html元素将进行正常的显示。
当然，在整个jquery之中，这两个函数也同样具备元素数据取得的功能。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
function fun() {
console.log($(showMsg).text());
console.log($(showMsg).html());
}
</script>
<html>
<body>
<input type="text" name="msg" id="msg">
<input type="button" value="设置内容" onclick="fun()">
<div id="showMsg"><h1>www.baidu.com</h1></div>
</body>
</html>
8、面试题：请问text()和html()有什么区别？