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]