jQuery获取、设置表单

本篇博客主要内容是：

（1）页面中有很多元素，包括表单中的输入项，如输入文本框等；获取、设置、输入文本框的值；val()方法。

（2）也包括<p>、<span>等元素；获取、设置这些元素的文本值；text()方法、html()方法。

一：准备工作：

基础代码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()方法；

HL🌱数字花园

探索