JQuery开始

最新推荐文章于 2022-11-12 21:27:00 发布

原创最新推荐文章于 2022-11-12 21:27:00 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

B/S Web开发技术专栏收录该内容

6 篇文章

订阅专栏

本文介绍了使用JQuery实现用户名登录校验的过程，包括HTML、CSS及JQuery代码的详细说明，展示了如何通过简单的JQuery函数调用实现动态校验效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS视频看完了牛腩老师这部分，还有一部分没有看完，等看完了再总结一下了。最近的JQuery总结了一下。其中包括几个JQuery的实例。

初次接触JQuery，感觉到了JQuery的强大，一个动态的展开折叠只需要一个函数调用就可以了，JQuery和js相比，个人感觉JQuery集成度比js集成度高，JQuery就是js，是js框架，更能提高效率，减少代码量，去实现更多微小绚丽多彩的页面效果。跟着老师敲例子，也仅仅是过了一遍。

实例一：用户名登陆校验。

为了实现用户名登陆时在文本框中报错动态效果，我们用到了JQuery。在我们的程序中建立的js文件夹中有两个js文件，一个是js编写的JQuery框架,一个是我们自己程序调用的js,很显然,我们在用浏览器调试的时候就会,浏览器报错的时候就会给出相应的提示,并跳转到js编写的JQuery框架代码中。我们再进行检查。

效果显示：

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Jquery实战 用户名校验</title>
	 <link href="css/userVerify.css" rel="stylesheet" type="text/css" />
	 <script language="JavaScript" type="text/javascript" src="js/jquery.js"></script>
	 <script language="JavaScript" type="text/javascript" src="js/userVerify.js"></script>
</head>

<body>
	请输入用户名:<input type="text" id="userName" class="userText"/><input type="button" value="校验" id="verifyButton" />
	
	 <div id="result">
	 	
	 </div>
</body>
</html>

一定要注意js的链接，把jquery框架链接放到我们用户自定义的js链接的前面。

JQuery代码：

// JavaScript Document
/*
 *需要通过javascript做两件事情.
 *1 button被触发时,发送给服务器,最后接受服务器返回的数据,填充预留的div中.
 *2 文本框是否为空,如果不为空,我们就取消红色的背景图片,如果为空我们保留图片.
 * 
 *需要在页面装载完成时注册上这些工作.
 */
 
 $(document).ready(function(){
	//这里面是页面装载之完成后要执行的代码;
	
	//需要找到button按钮,注册事件.
	//获取Button按下的事件,在jquery中我们直接用click事件.
	$("#verifyButton").click(function(){
			//1 获取文本框的内容.
			var strUserName =$("#userName").val();
			
			//2将用户名发送给服务器端.
				//如果输入的用户民为空.
			if(strUserName =="")
			{
				alert("用户名不能为空!");
			}
			else
			{
				$.get("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){
					//3.接收服务器端返回的数据，填充到div中	
					$("#result").html(response);
				});	
			}
			
	});
	//需要找到文本框,注册事件.
	$("#userName").keyup(function(){
				//获取当前文本框中的内容.
				var value=$(this).val();
				if(value=="")
				{
					
					//让边框编程红色.并且带背景图,否则去掉边框.
					$(this).addclass("userText");
				}
					
				else
				{
						//去掉边框和背景图.
						$(this).removeClass("userText");
				}
							  
	});
								
});

CSS代码：

.userText
{
	/*控制文本框的边框是红色的实线*/
	border: 1px solid red;
	/*选择text userName的背景图片*/
	background-image:url(../images/userVerify.gif);
	/*让图片在横向方向上重复*/
	background-repeat:repeat-x;
	/*让图片出现在最下方*/
	background-position:bottom;
	
	
}

上述的三类文件html负责内容，CSS负责页面样式，Javascript负责页面行为。文件开头的DOCTYPE是告诉浏览器的渲染方式，红色的下划线是文本框的背景图片，" "并把背景图片显示为横向重复显示，所以出现红色下划曲线的效果。JQuery中用$来获得页面的指定节点,参数是某种CSS选择器,$(document).ready(function())方法是定义页面加载完后需要执行的方法，addClass()removeClass()用来删除和增加节点。