实战Jquery(一)--username校验


图一

userVarify.js的代码例如以下:

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

$(document).ready(function(){
	//这里面的内容就是页面装载完毕后须要运行的代码
	var userNameNode=$(#userName);
	//须要找到button按钮,注冊事件
	$(#varifyButton).click(function(){
		//获取文本框的内容
		var userName=userNameNode.val();
		//将这个内容发送给server端
		if(userName==){
			alert(username不能为空!);
		}else{
			$.get(http://192.168.24.118:8080/UserVerify?userName= + encodeURI(encodeURI(userName)),null,function(response){																												   
			//3.接收server端返回的数据。填充到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节点用于以后显示server返回数据.算是一个小技巧吧,方便我们获取数据.

4.$(document).ready(function(){})定义页面装载完毕时须要运行的方法.

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

6.$.get()方法能够和server端进行get方式的交互,数据返回来时调用callback方法,该方法会接收到代表server端返回数据的一个纯文本參数.

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

事实上,做完了这个实例,小谷童鞋真心认为JQuery好简单啊.





实战Jquery(一)--username校验

原文地址:http://www.cnblogs.com/yxysuanfa/p/7256084.html


最新回复(0)
/jishuQqjmnLtrMtAZ6_2BE2Ft_2Bv2tbfE3Luq3dTRYrGRQ_3D_3D4719395
8 简首页