本篇博客主要内容是：
（1）页面中有很多元素，包括表单中的输入项，如输入文本框等；获取、设置、输入文本框的值；val()方法。
（2）也包括<p>、<span>等元素；获取、设置这些元素的文本值；text()方法、html()方法。
目录
一：准备工作：
二：示例演示
1.示例1：val()：设置输入项的值（其实大部分情况下就是设置表单中的输入文本框）
2.示例2：val()：获取输入项的值
3.示例3：text()：设置元素的纯文本
4.示例4：html()方法：设置元素的纯文本
5.示例5：html()方法：获取元素的纯文本
6.对比：text()方法：获取元素的纯文本
一：准备工作：
基础代码sample3.html：
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实验室</title>
<style>
.myclass {
font-style: italic;
color: darkblue;
}
/* 高亮css类 */
.highlight {
color: red;
font-size: 30px;
background: lightblue;
}
</style>
</head>
<body>
<div class="section">
<h2>jQuery选择器实验室</h2>
<input style="height: 24px" id="txtSelector" />
<button id="btnSelect" style="height: 30px">选择</button>
<hr />
<div>
<p id="welcome">欢迎来到选择器实验室</p>
<ul>
<li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <a
style="color: darkgreen" href="http://www.so.com">360</a>
</span>
</li>
<li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a
style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a>
</span>
</li>
<li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
<a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
</span>
</li>
</ul>
<span>新加测试span标签</span>
<p>你好</p>
<span class="myclass ">我是拥有myclass类的span标签</span>
<p class="myclass">我是拥有myclass的p标签</p>
<form id="info" action="#" method="get">
<div>
用户名：<input type="text" name="uname" value="admin" /> 密码：<input
type="password" name="upsd" value="123456" />
</div>
<div>
婚姻状况： <select id="marital_status">
<option value="1">未婚</option>
<option value="2">已婚</option>
<option value="3">离异</option>
<option value="4">丧偶</option>
</select>
</div>
<div class="left clear-left">
<input type="submit" value="提交" /> <input type="reset" value="重置" />
</div>
</form>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
<script type="text/javascript">
</script>
</body>
</html>二：示例演示
1.示例1：val()：设置输入项的值（其实大部分情况下就是设置表单中的输入文本框）
下面是先用$("input[name='uname']")这个选择器获取了页面元素，然后调用val()方法，设置该元素的值；
<script type="text/javascript">
$("input[name='uname']").val("administrator");
</script>
…………………………
2.示例2：val()：获取输入项的值
当var v = $("input[name='uname']").val();，即val()没有参数的时候，就是获取输入项元素的值；
<script type="text/javascript">
$("input[name='uname']").val("administrator");
var v = $("input[name='uname']").val();
alert(v);
</script>
val()方法用于设置表单项的内容，尤其指输入框的文本值；
……………………………………………………
3.示例3：text()：设置元素的纯文本
注意下面：$("span.myclass")标签和类选择器组合使用的方式；
<script type="text/javascript">
$("span.myclass").text("设置的内容~~~");
</script>效果：
…………………………
为了应对上面的问题，可以：
4.示例4：html()方法：设置元素的纯文本
<script type="text/javascript">
$("span.myclass").html("<b>设置的内容~~~</b>");
</script>发现，html()方法，会让浏览器解释文本中的标签
但html这种方法，只能当成便利贴用，不能大量使用，容易乱。或者当遇到特殊的业务需求的时候可以使用；
5.示例5：html()方法：获取元素的纯文本
<script type="text/javascript">
$("span.myclass").html("<b>设置的内容~~~</b>");
var v = $("span.myclass").html();
alert(v);
</script>
…………………………
6.对比：text()方法：获取元素的纯文本
<script type="text/javascript">
$("span.myclass").html("<b>设置的内容~~~</b>");
var v = $("span.myclass").text();
alert(v);
</script>效果：
平时，尽量使用text()方法，，只有当 当前元素的文本内容需要动态的改变，并且中间涉及到样式改变，需要用到标签时，才用html()方法；
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
