jQuery之-jquery特点

初次接触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+