jQuery

 

jQuery

1，       小

最新的 1.4 版本压缩后只有 23kb ， 未压缩版本也只有 156kb 。

Version	Minified and gzipped	Uncompressed code
jQuery 1.3.2	56kb	118kb
jQuery 1.4	23kb	156kb

 

2，       强大的 selector ，兼容 CSS3

可以兼容 CSS1-3 的 css selector 。通过强大的 css selector ，我们可以更容易，更方便快速的操作页面中的任何 DOM 对象，并可用链式语法对同一个对象的不同属性进行操作。

例如：

$(“p.surprise”).addClass(“ohmy”).show(“slow");

相当于：

1)        查找 HTML 页面中的 <p> 标签，且 class 包含“ surprise ” 的所有 DOM 对象；

2)        给这些对象的 class 属性增加一个“ ohmy ”，也即是增加一个 css class ；

3)        动画效果，缓慢显示出来。

与下面的代码相比：

var $p = document.getElementsByTagName(“p”); for(var i = 0; i < $p.length; i++){ if($p[i].className.indexOf(“surprise”) != -1 ){ $p[i].className += “ ohmy”; // ohmy 前面有一个空格 , 不能省略的 $p[i].style.display = “block”; } }

这之间的差异相当明显。

3，       跨浏览器支持

jQuery 支持 IE 6.0+ ， FF 2+ ， Safari 3.0+ ， Opera 9.0+ ， Chrome ，简化了跨浏览器开发的复杂性。

例如，我们在处理鼠标事件的时候，对于鼠标位置，我们需要这样获取：

if(document.all){ x = event.clientX; y = event.clientY; }else{ x = event.pageX; y = event.pageY; }

而使用 jQuery ，我们只需要：

x = event.pageX; y = event.pageY;

 

4，       无侵入性

使用了 jquery 的代码，不会给 html 带来任何其他额外的代码，反而能减少不少重复的代码，实现 js 和 html 代码的分离。

例如，我们给按钮绑定事件，通常的写法是

<input type=”button” value=”click” οnclick=”doClick();” οnmοuseοver=”doMouseover();” οnmοuseοut=”doMouseout();” /> <input type=”button” value=”click” οnclick=”doClick();” οnmοuseοver=”doMouseover();” οnmοuseοut=”doMouseout();” /> <input type=”button” value=”click” οnclick=”doClick();” οnmοuseοver=”doMouseover();” οnmοuseοut=”doMouseout();” />

function doClick(){ // click action; } function doMouseover (){ // mouse over action; } function doMouseout (){ // mouse out action }

HTML 代码中包含了大量的事件绑定代码。而是用 jQuery ，那么只需要：

<input type=”button” value=”click” /> <input type=”button” value=”click” /> <input type=”button” value=”click” />

$(ducoment).ready(function(){ $(“input:button”).click(function(){     // click action; }).hover(function(){     // mouse over action; }, function(){     // mouse out action; }); };

就可以给上面的按钮绑定事件了。甚至我们可以不使用 jQuery ，那么可以直接用下面的代码代替即可：

window.onload = function () { var $input = document.getElementsByTagName(“input”); for(var i = 0 ; i < $input.length; i++){ if($input[i].type != “button”){ continue; } $input[i].onclick = function () {     // click action; }; $input[i].onmouseover = function (){     // mouse over action } $input[i].onmouseoutr = function (){     // mouse outr action } } };

 

5，       简单，文档丰富

jQuery 的使用和学习都非常简单，对于熟悉 CSS selector 概念的，可以立刻拿来使用；对于不熟悉的，也是很快就能上手。

jQuery 的文档非常丰富，每一个函数，都可以找到详细的说明以及例子，而且这些例子是可以直接看到实际效果的。

6，       方便的属性和样式的查询设置

DOM 对象的属性和样式的查询设置，是非常普遍的操作。例如控制一个 div 的显示状态：

$div.style.display = “block”; // or “none”; $div.style.backgroundImage = “url(image-url)”; // other style

使用 jQuery ：

$( $div ).css( { “display”: “block” // or “none”; , “background-image”: “url(image-url)” // 我们直接使用 css 样式 // , other style } );

另外， jQuery 能够极为方便的处理 DOM 对象的位置、大小，例如：

$( $div ).width(); $( “body > div” ).width( $( window ).width() );

 

7，       方便的文档遍历

我们还经常会在某一个 DOM 对象的基础上，寻找相关的一些 DOM 对象。

例如要找一个 td 所处的 table ，通常我们的做法是：

$td.parentNode.parentNode.parentNode;

比较麻烦，而且容易出错，比如漏了一个 parentNode 。而通过 jQuery ，那么我们只需要：

$($td).closest(“table”);

 

8，       方便的 DOM 操作

我们经常需要进行 DOM 操作，例如增加一个 li ，或者删除一个 div ，又或者将 div 替换成 text input ，使用 jQuery ，这些操作都是非常方便的

$( “<li>li content</li>” ).appendTo( $(“#aUl”) ); // 或者 $( “#aUl” ).append( “<li>li content</li>” );

$( “#aDiv” ).remove();

$( “#aDiv” ).replaceWith( “<input type=’text’ />” );

 

9，       方便的事件绑定及处理

通过 bind() 方法以及其简化方法（ click(fn) 、 mouseover(fn) 等等），可以很方便的给 DOM 绑定事件，正如前面的例子所示。

而通过 trigger() 方法以及其简化方法（ click() 、 mouseover() 等等），可以很方便的触发事件操作。

最为关键的是， jQuery 屏蔽的不同浏览器的差异，并按照 w3c 的标准封装了 event 对象。

如果页面再加载完成后动态增加了 DOM 对象，而这些对象又需要绑定事件，那么 live() 方法是一个很方便的选择。（注： jQuery 1.3.2 有部分方法不支持 live 绑定，最新的 1.4 则支持所有的事件绑定）

10，            动画和特效

通过 jQuery 提供的动画和特效的相关方法，只需要简单的函数调用，就可以实现很多特效，而这，以往都是需要大量 js 代码才能完成的。

例如，如果我们想要让一个 div 慢慢地显示出来，那么只需要：

$(“#aDiv”).show(“slow”)

 

11，            强大的 Ajax 功能

通过 jQuery.ajax(options) 方法，以及其多种简化方法，可以方便地处理 Ajax 请求，极大地简化 Ajax 的处理。

例如，如果我们只是需要将 Ajax 的返回结果添加到某一个 div 中，那么只需要：

$(“#aDiv”).load(“server-page-url”);

非常简单。

12，            高扩展性

可以很容易的扩展 jQuery 的功能，例如：

jQuery.fn.extend ({ check: function() {     return this.each(function(){ this.checked = true; }); }, uncheck: function() {     return this.each(function(){ this.checked = false; }); } });

$(“input:checkbox”).check(); // 所有的 checkbox 都处于选中状态 $(“input:checkbox”).uncheck(); // 所有的 checkbox 都处于未选中状态

而当前已经有非常多的 jQuery 插件可以使用，能够满足绝大部分的需求。

13，            缺点

1)        没有面向对象的扩展， jQuery 着重于 DOM 的增强；

2)        插件太多，良莠不齐。