小谷实战Jquery(一)--用户名校验

    小谷童鞋休息了好几天,终于又开始学习了.今天学的是Jquery,先来看看神马是jQuery?

• JQuery is designed to change the way that you write JavaScript.
• The focus of jQuery is "find some elements, do something with them".
• write less,do more。

    它是一个兼容多浏览器的javascript框架，兼容CSS3,使用户能方便地处理HTML,events,制作动画效果,使用Ajax等.特点是以强大的CSS选择器为基础,几乎所有的操作都先使用选择器查找DOM对象,然后对其进行各种操作.

    学习JQuery时用到了之前学到的HTML,Javascript,CSS与DIV等,下面就在实战中总结学习过程的收获吧.

    今天实现的是一个用户名校验的小例子,分为服务器端分页面端两部分,在服务器端,当输入的用户名已经存在时,提示用户名已存在,否则用户名可用.重点是客户端代码的编写,对输入过程中的页面信息进行提示.对了,因为其它js文件使用jQuery写的,所以要写引入jQuery文件,就比如是先拿工具(jQuery),再用工具操作(其它js文件)吧,不然程序是运行不起来的呦.引入文件如图一:

                                                                                                      图一

userVarify.js的代码如下:

/*
*需要通过Javascript代码来做两件事
*1.button被按下的时候,获取文本框中的数据,发送给服务器端,最后接受服务器返回的数据,填充到我们预留的div中
*2.文本框上,用户按键之后,需要判断文本框中内容是否为空,如果不为空,取消红色的边框和背景图,否则保留
*/

$(document).ready(function(){
	//这里面的内容就是页面装载完成后需要执行的代码
	var userNameNode=$("#userName");
	//需要找到button按钮,注册事件
	$("#varifyButton").click(function(){
		//获取文本框的内容
		var userName=userNameNode.val();
		//将这个内容发送给服务器端
		if(userName==""){
			alert("用户名不能为空!");
		}else{
			$.get("http://192.168.24.118:8080/UserVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){																												   
			//3.接收服务器端返回的数据，填充到div中																			   			
			$("#result").html(response);																									   
			});
		}			
	});
		
	//需要找到文本框,注册事件
	userNameNode.keyup(function(){
		//获取当前文本框的内容
		var value=userNameNode.val();
		if (value==""){
			//让边框变红,带背景图
			userNameNode.addClass("userText");
		}else{
			//去掉边框和背景图
			userNameNode.removeClass("userText");
			
		}
	});
	
});

userVarify.css的代码也是相当的简单,只几句话就实现了提示线的效果,CSS的强大我们还是慢慢体会吧~~

.userText{
	/*控制文本框的边框是红色的实线*/
	border:1px solid red;
	background-image:url(images/userVerify.gif);
	background-repeat:repeat-x;
	background-position:bottom;
}

    小小实例也涉及到不少技术呢,小谷童鞋很认真的总结了一下:

    1.不难发现,HTML是负责页面内容的,CSS是负责页面样式的,而Javascript负责页面行为.

    2.图一中第一段标记部分,指定了浏览器在解释HTML代码时所采用的渲染规范,如个元素的显示位置及大小等.这个渲染规范由w3c给出,各浏览器根据这个规范去解释HTML代码,最终呈现给大家丰富多彩的页面效果.但即使在同一个Doctype规范下,不同的浏览器也会采用不同的文本模式对HTML页面进行渲染.文本模式有三种:诡异模式,标准模式和几乎标准模式.我们可以通过js获取document.compatMode的值来获取当前浏览器所采用的文本模式,该值一般有两个,BackCompat(诡异文本模式),CSS1Compat(标准文本模式).

    3.定义div或span节点用于以后显示服务器返回数据.算是一个小技巧吧,方便我们获取数据.

    4.$(document).ready(function(){})定义页面装载完成时需要执行的方法.

    5.$()方法获取页面指定节点,参数是某种CSS的选择器,通过获取DOM并对其定义事件,执行操作或获取数据完成我们想要实现的内容.

    6.$.get()方法可以和服务器端进行get方式的交互,数据返回来时调用callback方法,该方法会接收到代表服务器端返回数据的一个纯文本参数.

    7.我们想让某个CSS效果可有可无,可以通过addClass()/removeClass()方法给某个节点添加或删除一个class,从而控制CSS对于具有该class的HTML的节点的效果.

    其实,做完了这个实例,小谷童鞋真心觉得JQuery好简单啊.

小谷实战Jquery(一)--用户名校验,古老的榕树,5-wow.com