jquery编写插件的方法-对象级别的插件开发

插件的框架代码：

;(function($){
    $.fn.extend({         // **$.fn.extend表示要创建一个对象级别的插件**
        "border":function(value){
            //这里写插件代码
         }
    });
})(jquery)

HTML：

   
      
      
      
      
      
   

   
      
这个示例演示了自定义对象级别的插件的使用方法
   

jquery.border.js：

模板要点：

1.函数全部放在闭包里，外面的函数就调用不到里面的参数了,比较安全
2.前面加分号,避免不必要的麻烦


;(function ($) {
    $.fn.extend({
        //为jquery添加一个实例级别的border插件
       "border": function (options) {
            //设置属性
           options = $.extend({
             width: "1px",
             line: "solid",
             color: "#090"
             }, options);
            this.css("border", options.width + ' ' + options.line + ' ' + options.color);
            //设置样式
           return this;
       }
 }) 
})(jQuery)

result：

image.png