jQuery开发插件的简单语法

对象级别的插件开发

编写框架代码

$.fn.extend创建一个对象级别的插件

;(function($){
    $.fn.extend({
        "border":function(options){
            //插件代码处
        }
    });
})(jQuery)

填充代码内容

;(function($){
    $.fn.extend({
        "border":function(options){
            //插件代码处
            options = $.extend({
                width:"1px",
                line:"solid",
                color:"#eee"
            },options);
            this.css("border",options.width+' '+options.line+' '+options.color);
            return this;//方便链式表达式语法
        }
    });
})(jQuery)

border方法接收一个options参数，传入的是一个json对象。

使用方法

$("#nav").border({
    width:"10px",
    color:"red"
    });

传入的json对象会按照属性一个个地去替换默认值

类级别的插件开发

类似于$.trim()或者是$.ajax()，他们不需要先获得jQuery选择器的实例。

语法框架和对象级别的一模一样，只需要将功能实体返回即可，如下：

;(function($){
    $.fn.extend({
        "border":function(options){
            //插件代码处
            options = $.extend({
                content:"default"
            },options);
                        //功能函数处，最后返回它的引用
            var retVal = alert(options.content);
            return retVal;
        }
    });
})(jQuery)