目录

    1. jQuery特征

    • jQuery消除了浏览器的兼容问题
    • 遍历DOM树、选择元素
    • 大量的插件库
    • 工具函数库,$.type()、$.extent()等

    jQuery的核心函数,通常指的是一个工厂对象,即jQuery()函数,或者更为常用的别名$()函数。

    jQuery除了jQuery和$之外,不会污染全局名称空间。

    jQuery插件的命名: 通常采用jquery.pluginName.js命名,min版也采用与之类似的命名规范jquery.pluginName.min.js

    2. jQuery扩展方式

    2.1 jQuery函数prototype属性的别名(jquery.fn)进行扩展

    fn/prototype 是实时的。无论何时,新增的属性和方法,任何从该类型创建的对象都可以立即访问这些属性和方法。

    jQuery.fn.newFunction = function(){
        console.log("This is a simple case");
    }
    

    2.2 jQuery.extend()方法

    $.extend方法最基本的功能是合并两个对象。调用 $.extend方法时,如果只传入一个参数,那么该参数将被合并到jQuery中。

    jQuery.extend({
        newFunction:function(){
        console.log("This is a simple case");
       }
    });
    

    2.3 jQuery UI Widget Factory扩展

    Widget Factory是一个jQuery方法,接受两个或者三个参数:第一个参数是名称空间,第二个参数是一个已有的widget原型,它将从该原型继承,第三个参数是可选的对象字面量,作为新widget原型。

    jQuery.widget('namespace.newFunction',{});
    

    3. 需要关注的地方

    • this。在jQuery插件的上下文中,this指的是jQuery本身,而不是当前操作的DOM。唯一的例外是$.each循环体内,this才指向DOM。
    • 确保$指向jQuery。(function($){ })(jQuery)。
    • 不要省略分号。 避免最小化时,异常。
    • 尽可能返回jQuery对象,支持链式语法。

    4. 最佳实践

    • 使用jQuery插件模式
    • 在只为插件声明单个名称,对外暴露唯一接口
    • 插件只接受一个Options参数