jQuery历史

 

历史

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。

jQuery 是开源项目,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如选择DOM元素、操作文档对象(document)、处理事件、CSS处理、创建动画效果、以及开发Ajax程序。jQuery 也提供了给开发人员在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使 jQuery 函数库能够创建功能强大的动态网页以及网络应用程序。

jQuery最初由John Resig在Bar Camp上发布的,之后吸引了来自世界各地的众多javascript高手加入,此后的几年jQuery被广泛使用,基于jQuery的插件如雨后春笋般出现,覆盖了整个WEB世界,同时也拯救了一代又一代前端开发者。插曲:在jQuery第一次发布时,Bar Camp还是刚刚成立几个月的组织,由参加了电脑界名人提姆·奥莱理所创立的一年一度名为“FooCamp”的黑客会议的一些人发起并在之后迅速蔓延全球,猜测jQuery在其中起了很大的作用。

目前jQuery的源代码在GitHub上管理,每个人都可以加入jQuery的开发队列进行代码优化,bug跟踪修复和文档编写等。jQuery背后的支持是jQuery团队,董事会和jQuery基金会,由董事会来决定与项目有关的各种问题:添加新成员,加入新的项目,或征用的钱。

jQuery官方现在有五套产品分别是:jQuery,jQuery UI,jQuery Mobile,Sizzle,Qunit。

前三个大家都应该熟悉jQuery核心产品,基于jQuery的一套UI产品和应用于移动设备的jQuery产品。后两个不经常用,一个是js选择器引擎:jQuery自1.3后开发的一套新的选择器引擎,并且可以独立于jQuery单独使用、另一个是js单元测试框架,用于调试代码,jQuery的官方测试套件。

特点

jQuery以快速,小巧,简单,功能丰富脱颖而出。

 

官方如是说:jQuery是一个快速,体积小,功能丰富的JavaScript库。它可以在众多的浏览器中通过一个易于使用的API使得HTML文档遍历和操作,事件处理,动画,和Ajax的事情变得非常简单。随着通用性和可扩展性的组合,jQuery的改变了数以百万计的人编写JavaScript的方式。

插曲:JavaScript是由网景公司(Netscape)的Brendan Eich设计,他仅用了十天把就JavaScript设计出现的,很显然他自己并不怎么重视这个由他自己设计出来的网页动态语言,可他没有想到JavaScript的应用越来越广泛,越来越多的开发人员开始编写JavaScript代码,但语言本身参差错落的设计元素已经不能改变了,借Java之风披着面向对象的皮囊再加上难以测试让不少写大型JS脚本的开发人员抓狂。其实JavaScript中有很好的设计元素,《JavaScript语言精粹》这本书算是真正道出JavaScript的本质了。

 

跨浏览器的DOM元素选择

从名字就能看到,jQuery的重心是放在查询上的,还可以利用JQuery对象进行过滤。

DOM对象处理

创建,复制,删除,移动DOM对象

事件

 

CSS

 

特效和动画

 

Ajax

封装了ajax,提供简单的调用API

工具

一些常用的工具方法

插件

可以基于强大的jQuery做一些你想做的东西

 

 

 

核心原理

JavaScript库和框架数量众多,为什么唯独jQuery能脱颖而出,就是因为jQuery采取了与其他库和框架截然不同的理念,处处匠心独运,别出心裁。

 

jQuery对象

我们通过各种选择符和方法取得的结果集合实际上都是一个jQuery对象,在jQuery对象上不能执行DOM对象方法,这里就和prototype框架的最大区别,prototype框架中只有DOM对象,通过prototype选择只不要是在DOM对象的基本上添加了一些额外的方法,但对象本身并没有变,这更像是继承,相较于prototype,jQuery在DOM对象和jQuery对象中间起到适配器的作用,把DOM对象转换成jQuery对象,把jQuery对象转换成DOM对象,但两个对象之间并没有什么联系,而这个适配器函数就是$()或jQuery(),下面会说到。

jQuery对象有一些类似于JavaScript数组,但它却不是一个JavaScript数组。尽管它有一些诸如length这样的属性,push,sort,splice这样的方法。jQuery对象的创建过程有点复杂,如何感兴趣的话可以读一下这篇文章

 

工厂函数

这是一个神奇的方法,它可以接收字符串,DOM对象和方法做为参数。

l 把代表选择器的字符串传进去时会返回代表选择器相应的jQuery对象

l 把代码一段html代码的字符串传递进去会返回代表这段html代码的jQuery对象

l 把DOM对象传递进去会返回代表DOM对象的jQuery对象

l 把一个方法传递进去则此方法会在DOM文档载入完成后执行。

 

Jquery对象与工厂函数的关系

工厂函数就是$()或jQuery(),它是一个函数,但奇怪的它是函数的同时也拥有自己的函数。

在JavaScript中除了基本类型外其它全部都是对象,函数也是对象,所以它当然也可以有自己的函数,这些函数就是jQuery工具方法。如果你懂得Javascript语言的继承原理,那么就能理解工具方法的实质。它是定义在jQuery构造函数上的方法,即jQuery.method(),所以可以直接使用。而那些操作元素的方法,是定义在构造函数的prototype对象上的方法,即jQuery.prototype.method(),所以必须生成实例(即选中元素)后使用。如果不理解这种区别,问题也不大,只要把工具方法理解成,是像javascript原生函数那样,可以直接使用的方法就行了。

 

 

匠心设计

一致性,对称性

jQuery化繁杂为简单的魔力让很多人记忆犹新,如果你一直关注WEB技术,熟悉HTML和CSS,你会发现jQuery的学习成本很低,其用法也似曾相似。这是因为它的大部分概念都是从HTML和CSS的结构中借用而来的。完全贯彻设计前后“一致性”原则。

 

渐进增强,平稳退化

这是一种设计思想,可以参看这篇文章

 

面向集合(隐跌代)

   把文档内所有的p元素的color样式修改为red;

$("p").css("color","red");

 

用同一个方法取值和赋值

  

取值:$('#id').css("color");
赋值:$('#id').css("color","red");

 

链式调用

 

 

$('#id').click(function(){
      //click code
    }).focus(function(){
       // focus code
   });

 

DOM元素与jQuery对象方便切换

 把DOM元素转换成jQuery对象:

$(domObj)
  把jQuery对象转换成DOM元素:

 

$('#id').get(index)
$('#id')[index]
 

 

 

 

相关推荐