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文件是对页面显示的样式控制，三者同时使用极大的方便了网页开发。