实战Jquery(一)--username校验

歇息了好几天,最终又開始学习了.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对象,然后对其进行各种操作.

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

图一

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好简单啊.