jquery插件基本格式

1.jquery中$是神马？$.fn又是神马？

稍微有jquery经验的都知道在jquery中$等价于jQuery，在控制台一试便知：

$ === jQuery
true

在jquery源码中也能找到下面代码：

window.jQuery = window.$ = jQuery;

$.fn就是$的原型，，在源码中我们也能找到：

jQuery.fn = jQuery.prototype

插件的写法

一个常见的插件的基本样式应该如下（注释写的很详细，就不再一一赘述）：

/*
插件名：
作者：
日期：等信息
*/
//一个匿名自执行函数，划分一个独立的作用域，不至于插件中的变量干扰jquery
;(function($){  //开始写上; 为防止代码压缩出错
//为jquery扩展方法，也就是插件的主体
$.fn.extend({

    //方法名
    "method" : function(opts){
        //定义插件的默认参数
        var default = {
            width : //定义默认宽度
            height : //定义默认高度
            speed : //定义默认速度
            //等等各种默认参数
        }
        //有些参数用户直接使用默认，有些参数用户要使用自己定义的
        //自定义参数替换默认参数
        //var option = $.extend(default,opts); //为什么不用此行代码？为了保护默认参数
        //extend方法中opts会永久取代default，所以新加一个空对象{}来保存本次所使用的参数，下次使用default依然不变
        var option = $.extend({},default,opts);

        this.each(function(){ //用each处理选择器选中的一个或多个dom节点
            /*
                此处是插件处理过程代码
            */
        });

        //最后别忘了保持jquery的链式操作（视情况而定）
        return this; //返回被选中的元素节点，以供后续操作。
    }

});
})(jQuery)//传入jQuery是为更快查找，避免沿作用域链往上层查找，提高性能

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!