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);