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

原文地址:https://www.cnblogs.com/ximenxiazi/p/5280593.html