更新时间：2024-01-09 15:20:17
你们好，最近小艾特发现有诸多的小伙伴们对于val函数使用方法，val函数这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。
1、在整个jquery开发框架之中，最为重要的工具就是页面元素的选择处理。
2、<%@ page language="java" contentType="text/html; charset=UTF-8"
3、 pageEncoding="UTF-8"%>
4、<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
5、<%
6、 pageContext.setAttribute("APP_PATH",request.getContextPath());
7、%>
8、<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
9、<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
10、<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
11、<script type="text/javascript">
12、 function fun() {
13、 var msgValue = $(msg).val();
14、 console.log("**************msg=" + msgValue);
15、 }
16、</script>
17、<html>
18、 <body>
19、 <input type="text" name="msg" id="msg">
20、 <input type="button" value="选择" onclick="fun()">
21、 </body>
22、</html>
23、如果按照之前的写法“$(msg).val()”，要变为"document.getElementById("msg").value",而如果使用了jquery之后整个世界都变了。在jquery里面充分考虑到用户的体验，所以对于val()函数还提供有设置内容的功能。
24、功能：设置组件的内容。
25、很多的时候我们认为应该将内容设置到一个“<span>”或者“<div>”元素之中。所以在此时就不能够利用val()函数完成了。因为val()函数主要是针对于表单控件（value属性）。
26、但是如果要设置“<div>”、"<span>"中的文件，那么就不应该是value属性的范畴了。所以这个可以使用text(),html()两个函数完成。
27、<%@ page language="java" contentType="text/html; charset=UTF-8"
28、 pageEncoding="UTF-8"%>
29、<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
30、<%
31、 pageContext.setAttribute("APP_PATH",request.getContextPath());
32、%>
33、<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
34、<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
35、<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
36、<script type="text/javascript">
37、 function fun() {
38、
39、 var msgValue = $(msg).val();
40、 $(showMsg).text(msgValue);
41、 }
42、</script>
43、<html>
44、 <body>
45、 <input type="text" name="msg" id="msg">
46、 <input type="button" value="设置内容" onclick="fun()">
47、
48、 <div id="showMsg"></div>
49、 </body>
50、</html>
51、但是text()设置的都是纯文本，如果此时你输入的内容包含有html元素。
52、如果要想标签正常显示出来，则要使用html():
53、<%@ page language="java" contentType="text/html; charset=UTF-8"
54、 pageEncoding="UTF-8"%>
55、<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
56、<%
57、 pageContext.setAttribute("APP_PATH",request.getContextPath());
58、%>
59、<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
60、<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
61、<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
62、<script type="text/javascript">
63、 function fun() {
64、
65、 var msgValue = $(msg).val();
66、 $(showMsg).html(msgValue);
67、 }
68、</script>
69、<html>
70、 <body>
71、 <input type="text" name="msg" id="msg">
72、 <input type="button" value="设置内容" onclick="fun()">
73、
74、 <div id="showMsg"></div>
75、 </body>
76、</html>
77、此时如果设置的内容之中包含有html元素，那么html元素将进行正常的显示。
78、当然，在整个jquery之中，这两个函数也同样具备元素数据取得的功能。
79、<%@ page language="java" contentType="text/html; charset=UTF-8"
80、 pageEncoding="UTF-8"%>
81、<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
82、<%
83、 pageContext.setAttribute("APP_PATH",request.getContextPath());
84、%>
85、<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
86、<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
87、<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
88、<script type="text/javascript">
89、 function fun() {
90、 console.log($(showMsg).text());
91、 console.log($(showMsg).html());
92、 }
93、</script>
94、<html>
95、 <body>
96、 <input type="text" name="msg" id="msg">
97、 <input type="button" value="设置内容" onclick="fun()">
98、
99、 <div id="showMsg"><h1>www.baidu.com</h1></div>
100、 </body>
101、</html>
102、面试题：请问text()和html()有什么区别？
以上就是val函数这篇文章的一些介绍，希望对大家有所帮助。
