jQuery对于大家而言并不陌生，因此关于它是什么以及它的作用，在这里我就不多言了，而本篇文章的目的是想通过对源码简单的分析来了解jQuery的实现原理和思路，以及jQuery是如何利用javascript中的高级特性来构建如此伟大的javascript库。
1 初识jQuery
从核心功能来看，jQuery仅仅做了一件简单而又平凡的事：查询。它的语法如此简洁明了，以致于很多人在不知道javascript是什么的时候就已经会用jQuery了，用一个词形容就是：大道至简。 从设计层面来看，我们可以将jQuery提供方法分为两大类：静态方法和实例方法。静态方法就是直接通过$访问的方法，这些方法一般不对dom元素操作，而是提供了一些常用的工具，比如ajax请求、以及对字符串的一些常用操作，除此之外，jQuery还提供了对自身的扩展机制，你可以通过extend方法来编写你需要的组件。而实例方法和静态方法不一样，它是用来对jQuery查询的DOM元素进行操作，jQuery执行$("..")会构建一个jQuery对象，这个对象以数组的方法存储查询出的所有DOM元素，然后在这个对象的原型链上实现了对这些DOM操作的方法，比如each()方法就是用来遍历每一个DOM元素的。你可能会注意到，我刚说这个对象“以数组的方式”存储，那就是说，jQuery构建的这个对象不是数组，那这个对象到底是什么？ 这才是jQuery架构的核心，也是本文将要展开的重点。
2 jQuery对象
一般情况下，我们会这样使用jQuery：
$(‘div‘).each(function(index){ //this ... });
$(‘div‘)执行完后回返回一个jQuery对象，each()方法是对这个对象中的DOM元素进行遍历，我们先看看$(‘div‘)的执行过程（本文源码摘自jQuery 3.0）：
jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); }
这个方法就是$(‘div‘)的入口方法，可以看出，这个方法只做了一件事，那就是返回jQuery.fn.init()函数的实例对象，那jQuery.fn.init 又是什么呢，我们再看下面的代码：
init = jQuery.fn.init = function( selector, context, root ) { //...
return this; } init.prototype = jQuery.fn;
jQuery.fn.init和init引用了同一个方法，这个方法根据selector查询出符合条件的DOM元素，并返回，可你会发现，返回的是this，这个this是什么呢？我们待会分析，先看下面的这句话：
init.prototype = jQuery.fn;
这句话是什么意思呢，这句话是让init方法的prototype对象指向了jQuery.fn对象，那jQuery.fn又是什么鬼？ 我们继续看代码：
jQuery.fn = jQuery.prototype = { // The current version of jQuery being used jquery: version, constructor: jQuery, // The default length of a jQuery object is 0 length: 0, // Execute a callback for every element in the matched set. each: function( callback ) { return jQuery.each( this, callback ); }, splice: arr.splice };
为了节省篇幅，我省略了其中一些代码，从这里可以看出，jQuery.fn 其实就是jQuery的原型对象，这个原型对象中定义了一些对this对象进行操作的方法，因此，总的来看，jQuery首先定义了一个init方法，然后在init的原型对象prototype上定义了一系列操作方法。最后将init方法的实例对象返回。所以上面的过程可以简化如下(伪代码)：
var init = function(selector,context,root){ //... return this; } init.prototype = { length:0, each:function(callback){ //... }, splice:[].splice } jQuery = function(selector,context,root){ return new init(selector,context,root); }
我们再来看看init中返回的this到底是什么，我在之前的博客中讲过，函数中的this总是指向运行期的调用者，那init的调用者是谁呢？在上面代码中似乎找不到调用者，这时我们就需要深入的理解javascript中new运算符的运行机制了，借用我之前在博客中对new运算符的理解，我们对new init()的执行过程进行如下分解：
new init(selector,context,root) = { var obj = {}; obj.__proto__ = init.prototype; init.call(obj,selector,context,root); return typeof result === ‘obj‘? result : obj; }
如果对上述流程不理解的请参考：ECMAScript:探索 new 运算符
从上述过程中可以看出，javascript在通过new来创建一个实例对象的时候，先创建了一个普通对象obj，然后将obj的__proto__指向了init的原型对象，因此obj的原型链将被改变， 而第3步使用call方法调用init方法，所以init中的this指的是这里的obj对象，init执行以后，会将查询的DOM对象存储到this对象中并返回，也就是obj对象，而new运算符最终也会将这个obj返回以作为新的实例对象。所以new运算符返回的这个实例对象具备两个特点：一是包含了DOM查询结果集，二是其原型链上添加了init的prototype,init的prototype实现了对init中this对象的操作，因此实例对象也具备了这些操作方法。
以上便是对$(‘‘)方法的分析，jQuery在执行$("")后返回的是一个经过加工的jQuery对象，这个对象会在内存中一直存在，然后你可以调用对象上的方法来操作这个对象里的DOM元素。这就是jQuery的设计思路和实现方式，为了让你能更便捷的操作DOM元素，jQuery在背后下足了功夫，花足了心思，也是蛮拼的...
3 jQuery 的不足
通过对jQuery的执行过程分析，我们会发现，每执行一次$()，jQuery就要在内存中构建一个庞大的jQuery对象，如果我们在一个页面中频繁的调用jQuery方法，必然会带来性能问题。因此，如果你对dom只做一些简单的操作，建议完全可以使用document.querySelector(selector)替代jQuery，不过在使用原生js方法时，对于不同的应用场景你可能要做一些兼容性的工作，你要学会取舍，不要过度依赖jQuery！
by @一像素 2016.01
原文：http://www.cnblogs.com/onepixel/p/5097584.html