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();” <input type=”button” value=”click” οnclick=”doClick();” <input type=”button” value=”click” οnclick=”doClick();” |
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) 插件太多,良莠不齐。