JQuery用户校验

          之前简单了解了什么是JQuery，对于JQuery的强大没有体会到，今天真正开始学习JQuery，第一个实例就是通过文本框和按钮实现用户校验，我们用HTML编写内容代码，通过CSS对页面样式进行控制，通过JS文件的引入控制页面的各种操作行为。下面是对这个Demo的讲解：

使用EditPlus或者其他的编写HTML的软件进行编写HTML的代码，在之前的学习中我们同样用过Dreamweaver编写代码，对于界面上的控件的添加直接通过拖拽操作即可，这里为了熟悉HTML代码，我们都用纯手工编写代码：

         在body标签中添加纯文本、文本框和按钮，这里设置文本框的id为userName，添加一个类class为userText，方便在CSS设置中使用id选择器和类选择器。

引入css文件，引入jquery文件，引入自己的js文件。

    通过类选择器方式设置页面样式。

  下面是详细讲解js文件中的代码含义和功能实现:

        1、  button按钮被按下的时候需要将文本框中的数据获取到，然后发送给服务器，最后接收服务器返回的数据，填充到我们预留的div中，这样用户就可以看到结果

        2、  在文本框中需要验证用户名是否为空，如果不为空，文本框上红色的边框和背景图就应该取消，否则保留。

 

  $(document).ready(function(){})表示页面装载完成后需要执行的代码。

使用$符号找到Button按钮的事件，$("#verifyButton").click(function(){})

其中，verifyButton为按钮的id。

在这个click事件中的代码：

//获取文本框的内容
var userName=userNameNode.val();

	//将这个内容发送给服务器端

if(userName=="")
{
	alert("用户名不能为空");
}
else
{
	$.get("file:///D:/TGB/3.7《JQuery实战视频教程[完整]》/视频练习/第1讲/UserVerify.html?userName=" + encodeURI(encodeURI(userNmae)), null,function(response){
	//需要接收返回的数据，填充到div中
	$("#result").html(response);
});
			
}	

文本框中的事件：

userNameNode.keyup(function(){
//获取当前文本框的内容

<span style="white-space:pre">	</span>var value =userNameNode.val();
<span style="white-space:pre">	</span>if(value=="")
<span style="white-space:pre">	</span>{
	<span style="white-space:pre">	</span>//让边框变为红色，并且带背景图
	<span style="white-space:pre">	</span>userNameNode.addClass("userText");
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>else
<span style="white-space:pre">	</span>{
	<span style="white-space:pre">	</span>//去掉边框和背景图
	<span style="white-space:pre">	</span>userNameNode.removeClass("userText");
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>});
});

         在文本框中输入中文，防止中文乱码的方式，应用了两次encodeURI进行转码操作。

addClass()和removeClass()方法给某个节点添加或删除一个类的样式，这个类的样式就是通过CSS中类选择器的方式引入显示。

$.get()方法可以和服务器交互，这个方法可以接收到从服务器端返回的一个纯文本的参数。

纵观这三种文件：.html文件、.js文件、.css文件，其中.html文件是对页面内容的控制，.js文件是对页面操作行为的控制，.css文件是对页面显示的样式控制，三者同时使用极大的方便了网页开发。