JavaScript及jQuery学习小结

　　最近几天学习了很多关于JavaScript和jQuery的文章，稍作梳理后，总结如下。

　　1、jQuery入门系列

　　环境搭建

　　只需引用一个jQuery库文件，即可完成jQuery的环境搭建。

　　选择器

　　jQuery支持利用各种各样的选择器，来筛选、过滤出我们想要的元素，并且以jQuery包装集的形式返回。

　　包装集

　　所谓包装集，就是由jQuery函数筛选出的，支持jQuery提供的各种方法和属性的DOM元素。还包括如何动态构建一个DOM元素，并且添加到文档中。

　　利用jQuery操作元素的属性与样式

　　jQuery提供相应的方法获取、操作元素的属性与样式。

　　事件

　　通过jQuery，通过各种方法（比如bind、one、tigger等）为DOM元素添加各种方法。

　　Ajax

　　jQuery提供了多种方法（load、get、getjson、getscript、post、ajax）Ajax，比利用原生XMLHttpRequest对象方便很多，并且解决了不同浏览器的兼容性问题。

　　动画

　　jQuery提供了多种方法，为DOM元素实现动态效果，如渐变、闪烁、平移等等。

　　工具函数

　　jQuery提供了多种工具函数，可供直接调用，比如操作字符串、检测浏览器属性的各种方法。

　　2、JavaScript零散却重要的知识

　　全局对象/变量其实是window的属性。

　　声明一个全局函数fn，其实是为window添加了一个fn属性，其值是一个匿名函数。因此 function fn(){} 等价于 window.fn = function(){};等价于 fn = function(){}.

　　JavaScript中，this究竟是什么？如果在顶层调用，this就代表window，如果在对象中调用（函数也是对象），this就指向当前对象。

　　静态方法和实例方法，先声明一个类 function staticClass(){};直接添加到类staticClass.fn()的方法为静态方法，可以直接调用；添加到类的prototype的方法staticClass.prototype.fn()为实例方法，需要先实例化var instance = new staticClass()才能调用。

　　3、JavaScript prototype

　　首先介绍三对概念：私有变量、函数；静态变量、函数；实例变量、函数；具体区别可以查看源文章，值得提到的一点是，只有实例变量、函数可以在实例化对象以后进行访问。

　　当创建了一个函数，改函数就会被创建一个prototype属性，这个prototype属性又具有一个constructor属性，这个属性是一个指向该函数的指针。

　　下一个结论：对于一个函数A，只要是赋给prototype的属性和方法，都会被A的所有实例共享。看如下代码：

　　function Person(name){
                this.name=name;
            }

            Person.prototype.share=[];

            Person.prototype.printName=function(){
                alert(this.name);
            }

            var person1=new Person('Byron');
            var person2=new Person('Frank');

            person1.share.push(1);
            person2.share.push(2);
            console.log(person2.share); //输出[1,2]

　　因此在实际操作中，对象的方法（函数也是对象）一般赋给prototype成为实例函数，对象的属性（变量）一般直接声明，因为变量一般不需要共享。

　　4、JavaScript创建对象

　　如上所述，对象的方法（函数也是对象）一般赋给prototype成为实例函数，对象的属性（变量）一般直接声明，因为变量一般不需要共享。

　　5、JavaScript命名空间实现方式和模仿分析jQuery

　　JavaScript的命名空间，是利用立即执行的匿名函数，利用闭包。jQuery玩的也是这一套：

　　(function(){
                var _NS=function(){

                }
                _NS.prototype.alert=function(){
                    console.log('test');
                }
                window.NS=new _NS();
            })();

　　jQuery本质上是一个事先定义好的函数，换言之是window的一个属性。它内部定义了很多有用的函数可以直接调用，也可以接受选择器字符串以后，将结果保存到相关属性中，并且将自身返回，因此可以实现多次的循环调用。其最代码结构如下：

(function( window, undefined ) {

    var jQuery = (function() {
       // 构建jQuery对象
       var jQuery = function( selector, context ) {
           return new jQuery.fn.init( selector, context, rootjQuery );
       }

       // jQuery对象原型
       jQuery.fn = jQuery.prototype = {
           constructor: jQuery,
           init: function( selector, context, rootjQuery ) {
              // selector有以下7种分支情况：
              // DOM元素
              // body（优化）
              // 字符串：HTML标签、HTML字符串、#id、选择器表达式
              // 函数（作为ready回调函数）
              // 最后返回伪数组
           }
       };

      //把jQuery的prototype赋值给init方法的prototype
       jQuery.fn.init.prototype = jQuery.fn;

       // 合并内容到第一个参数中，后续大部分功能都通过该函数扩展
       // 通过jQuery.fn.extend扩展的函数，大部分都会调用通过jQuery.extend扩展的同名函数
       jQuery.extend = jQuery.fn.extend = function() {};

       // 在jQuery上扩展静态方法
       jQuery.extend({
           // ready bindReady
           // isPlainObject isEmptyObject
           // parseJSON parseXML
           // globalEval
           // each makeArray inArray merge grep map
           // proxy
           // access
           // uaMatch
           // sub
           // browser
       });

       return jQuery;

    })();

    window.jQuery = window.$ = jQuery;
})(window);

　　6、JavaScript闭包机制

　　等有了更加深刻的认识再来下结论。

　　有了这些积累，关于JavaScript和jQuery的理论知识基本上能有一个全局的了解，接下来就是要多阅读和多些代码，以加深理解。

原文章地址：

从零开始学jQuery

http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html

JavaScript番外

http://www.cnblogs.com/zhangziqiu/archive/2009/05/26/jQuery-Learn-javascript.html

JavaScript prototype

http://www.cnblogs.com/dolphinX/p/3286177.html

JavaScript创建对象

http://www.cnblogs.com/dolphinX/p/3288118.html

JavaScript命名空间实现方式和模仿分析jQuery

http://www.cnblogs.com/dolphinX/p/3269145.html

http://www.cnblogs.com/dolphinX/p/3270779.html

JavaScript比闭包机制

http://www.cnblogs.com/ximenxiazi/p/5276328.html

http://www.cnblogs.com/dolphinX/archive/2012/09/29/2708763.html