JQuery框架获取 /设置表单控件值

JQuery框架是对Javascript的封装，利用它便于我们书写js代码。JQuery框架的宗旨就是“写的少干的多”，尤其是它的“.”(点)语法，绝对让你眼前一亮。下面我们就来使用它获取和设置控件值(文本框及span内容)。

一、前台界面如下：

JQuery框架获取 /设置表单控件值-LMLPHP

二、首先要在自己项目中引入jquery.js相应版本的js文件

JQuery框架获取 /设置表单控件值-LMLPHP

三、下面实例完成的功能：判断文本框中有没有内容，并在其后面的span中显示相应提示信息。

涉及小知识点：1.利用jquery为按钮添加事件; 2.获取和设置文本框的值( val())；3.获取和设置span的内容（text()）

JQuery框架获取 /设置表单控件值-LMLPHP

四、源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery的基本使用</title>
		<script type="text/javascript" src="jquery-3.5.1/jquery-3.5.1.js"></script>
	</head>
	<body>
			<h2>jquery框架的简单使用</h2>
			<hr>
			<div id="jq">jquery</div>
			<input type="text" id="username"/><span id="info" ></span>
			<br />
			<button id="btn">测试</button>
			<script type="text/javascript">
				$("#btn").on('click',function(){
					 msg=$('#username').val();//获取文本框的值
					if(msg==null||msg==""){
						$("#info").text("此外不能为空！");
						$("#info").css('color','red');
					}else{
						$("#info").text(msg);
						$("#info").css('color','blue');
					}

					//$('#username').val('hello');//设置文本框的值
				});

			</script>
	</body>
</html>

djw0108043

JQuery框架获取 /设置表单控件值