jquery原理的简单分析

[backcolor= transparent] jquery是一个轻量级的JS框架，这点相信大部分人都听过，而jquery之所以有这样一个称呼，就是因为它悄悄披了一件外衣，将自己给隐藏了起来。
[backcolor= transparent]      /以下截取自jquery源码片段
[backcolor= transparent]      (function( window, undefined ) {
[backcolor= transparent]      /*    源码内容    */
[backcolor= transparent]       })( window );
[backcolor= transparent]      上面这一小段代码来自于1.9.0当中jquery的源码，它是一个无污染的JS插件的标准写法，专业名词叫闭包。可以把它简单的看做是一个函数，与普通函数不同的是，这个函数没有名字，而且会立即执行，就像下面这样，会直接弹出字符串。
[backcolor= transparent]      (function( window, undefined ) {
[backcolor= transparent]         alert("Hello World!");
[backcolor= transparent]       })( window );
[backcolor= transparent]       可以看出来这样写的直接效果，就相当于我们直接弹出一个字符串。但是不同的是，我们将里面的变量变成了局域变量，这不仅可以提高运行速度，更重要的是我们在引用jquery的JS文件时，不会因为jquery当中的变量太多，而与其它的JS框架的变量命名产生冲突。对于这一点，我们拿以下这一小段代码来说明。
[backcolor= transparent]     var temp = "Hello World!";
[backcolor= transparent]        (function( window, undefined ) {
[backcolor= transparent]         var temp = "ByeBye World!";
[backcolor= transparent]        })( window );
[backcolor= transparent]        alert(temp);
[backcolor= transparent]       这段代码的运行结果是Hello而不是ByeBye，也就是说闭包中的变量声明没有污染到外面的全局变量，倘若我们去掉闭包，则最终的结果会是ByeBye，就像下面这样。
[backcolor= transparent]      var temp = "Hello World!";
[backcolor= transparent]        //    (function( window, undefined ) {
[backcolor= transparent]         var temp = "ByeBye World!";
[backcolor= transparent]      //    })( window );
[backcolor= transparent]       alert(temp);
[backcolor= transparent]       由此就可以看出来，jquery的外衣就是这一层闭包，它是很重要的一个内容，是编写JS框架必须知道的知识，它可以帮助我们隐藏我们的临时变量，降低污染。
[backcolor= transparent]       刚才我们说了，jquery将自己声明的变量全部都用外衣遮盖起来了，而我们平时使用的Jquery和$，却是真真实实的全局变量，这个是从何而来，谜底就在jquery的某一行代码，一般是在文件的末尾。
[backcolor= transparent]window.jQuery = window.$ = jQuery;
[backcolor= transparent]       这一句话将我们在闭包当中定义的jQuery对象导出为全局变量jQuery和$，因此我们才可以在外部直接使用jQuery和$。window是默认的JS上下文环境，因此将对象绑定到window上面，就相当于变成了传统意义上的全局变量，就像下面这一小段代码的效果一样。
[backcolor= transparent]      var temp = "Hello World!";
[backcolor= transparent]      (function( window, undefined ) {
[backcolor= transparent]         var temp = "ByeBye World!";
[backcolor= transparent]         window.temp = temp;
[backcolor= transparent]       })( window );
[backcolor= transparent]       alert(temp);
[backcolor= transparent]       很明显，它的结果应该是ByeBye，而不是Hello。因为我们在闭包中导出了temp局部变量为全局变量，从而覆盖了第一行声明的全局变量temp。
[backcolor= transparent]       jquery最核心的功能，就是选择器。而选择器简单理解的话，其实就是在DOM文档中，寻找一个DOM对象的工具。
[backcolor= transparent]        首先我们进入jquery源码中，可以很容易的找到jquery对象的声明，看过以后会发现，原来我们的jquery对象就是init对象。
[backcolor= transparent]         jQuery = function( selector, context ) {
[backcolor= transparent]          return new jQuery.fn.init( selector, context, rootjQuery );
[backcolor= transparent]         }
[backcolor= transparent]         jQuery.fn = jQuery.prototype;
[backcolor= transparent]         jQuery.fn.init.prototype = jQuery.fn;
[backcolor= transparent]        这两句话，第一句把jQuery对象的原型赋给了fn属性，第二句把jQuery对象的原型又赋给了init对象的原型。也就是说，init对象和jQuery具有相同的原型，因此我们在上面返回的init对象，就与jQuery对象有一样的属性和方法。
[backcolor= transparent]很多时候，我们在jQuery和DOM对象之间切换时需要用到[0]这个属性。从截图也可以看出，jQuery对象其实主要就是把原生的DOM对象存在了[0]的位置，并给它加了一系列简便的方法。这个索引0的属性我们可以从一小段代码简单的看一下它的由来，下面是init方法中的一小段对DOMElement对象作为选择器的源码。
[backcolor= transparent]      // Handle $(DOMElement)
[backcolor= transparent]       if ( selector.nodeType ) {
[backcolor= transparent]            /*     可以看到，这里将DOM对象赋给了jQuery对象的[0]这个位置  */
[backcolor= transparent]            this.context = this[0] = selector;
[backcolor= transparent]            this.length = 1;
[backcolor= transparent]           return this;
[backcolor= transparent]        }
[backcolor= transparent]       这一小段代码可以在jquery源码中找到，它是处理传入的选择参数是一个DOM对象的情况。可以看到，里面很明显的将jQuery对象索引0的位置以及context属性，都赋予了DOM对象。代码不仅说明了这一点，也同时说明了，我们使用$(DOMElement)可以将一个DOM对象转换为jQuery对象，从而通过转换获得jQuery对象的简便方法。
[backcolor= transparent]

[backcolor= transparent]

[backcolor= transparent]阅读全文