小谷童鞋休息了好几天,终于又开始学习了.今天学的是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好简单啊.