初次接触jquery是在一年前,当时是由于项目的需要,最近又再次使用jquery,仍然是项目的需要,说实话,jquery用起来真的很舒服,首先语法非常简洁,节省了大量的js代码,其次他的API非常完整,简单易学,加上他的跨浏览器,如果你有专业的美工,我想jquery一定是你的首先。那么,究竟什么是jquery:
1.1 什么是jquery
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等。
jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
1.2 Jquery特点
1.2.1 轻量级
Jquery目前的最新版本1.3.2
文件 | 行数 | 大小 | 说明 |
jquery-1.3.2.min.js | 19 | 56KB | 所有源代码放在一行,去掉多余空白,注释等等 |
jquery-1.3.2.js | 4337 | 118KB | 正常代码风格,方便维护和阅读 |
1.2.2 Dom选择
可以轻松获取任意dom元素或dom元素封装后的jquery对象
Var obj = $("#table1");//取得ID=table1的dom对象,并返回包装的jquery对象
Var obj = $("#table1 a.class1");//取得ID=table1的元素中的class=class1的所有A标签,并返回包装的jquery对象
Var obj = $("input[name='name1']");//取得name=name1的所有的input,并返回包装的jquery对象
1.2.3 Css处理
可以轻松设置,删除,读取css属性
Var obj = $("p").css("color");//取得第一个段落的color样式属性的值。
Var obj = $("p").addClass("css1");//取得第一个段落为并追加class属性
Var obj = $("p").removeClass("css1");//取得第一个段落为删除class属性
$("#div1").css("overflow-y", "scroll");//为div1设置上下滚动条
//$("#div1").css("overflow-x", "scroll");//为div1设置左右滚动条
$("p").css({ color: "#ff0011", background: "blue" }); //取得第一个段落并设置颜色和背景
1.2.4 链式语法
Var obj = $("#id1").parent().parent().parent().attr("name");//获取id=id1的元素的三层父节点的name属性
Var obj = $("#div1").find("table td").find("a").attr("href");//在id=div1的元素下查找table的所有td,然后在第一个td中找到第一个a,然后获取href属性
1.2.5 事件注册
可以对任意一个或多个对象注册事件,让画面和事件分离
给id=btn1的元素注册click事件
$("#btn1").click(function(){
//do something
});
给class=class1的所有元素注册mouseover事件
$(".class1 ").mouseover(function(){
//do something
});
给多个元素注册事件,如:给id= listTable元素下的所有class=toLink的td注册点击事件
$("#listTable td.toLink").click(function(){
//do something
});
1.2.6 对象克隆
非常强大的功能,可以克隆任意对象及其所有事件
$("#table1").clone();//找到id=table1的元素并克隆,不克隆元素内的事件
$("#table1").clone(true);//找到id=table1的元素并克隆,并且克隆元素内的所有事件
特别说明:当clone的参数为true时,元素内部以jquery方式注册的事件才能被克隆,以代码的方式甙入在dom元素内部的事件不会被克隆,如<a οnclick="fun1()"></a>,这个事件在克隆时是不会被克隆的,所以强烈建议:所有的事件都采用jquery注册方式。
1.2.7 Ajax支持
$.ajax({
type: "POST",//提交方式post或者get
url: "test.do",//访问的地址
data: "name=a&code=b",//访问的参数
cache: false,//是否缓存,
timeout: 1000,//超时时间
global: false,//禁用全局Ajax事件【只有当我们对ajax实现事件绑定时才有必要用】
success: function(html){//成功回调函数
//do something
},
beforeSend: function(){//提交前执行
// do something
},
complete: function(){//提交完成后执行,先用success
// do something
},
error: function(XMLHttpRequest, textStatus){//失败后执行
// do something
}
});
特别说明:data参数的格式为name=a&code=b这样的串,假设我们需要把一个form中的所有元素都作为参数提交,直接调用serialize()即可完成拼接,如:
Var obj = ($("#form1").serialize();
则obj的值就是类似于下面的一个字符串:
name=x&pwd=123&sex=1&age=22&address=beijing
关于jquery的ajax详细解析请参照
http://www.cnblogs.com/QLeelulu/archive/2008/04/21/1163021.html
1.2.8 跨浏览器
支持Internet Explorer 6.0+、Opera 9.0+、Firefox 2+、Safari 2.0+、Google Chrome 1.0+