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