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

作者: 欢乐时光欢乐你我 | 来源:发表于2019-04-29 10:49 被阅读0次

jQuery对象插件编写方法
jQuery开发插件的简单语法
jquery编写插件的方法-对象级别的插件开发
JS 插件开发
jQuery扩展插件
jQuery插件
jQuery插件
jQuery面试题（一）
jquery插件教程
jQuery插件编写模板

插件的框架代码：

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

HTML：

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <script src="js/jquery-2.2.2.min.js"></script>
      <script src="jquery.border.js"></script>
      <script type="text/javascript">
         $(function() {
            $("#test").border({
               width: "5px",
               "line": "dotted",
               color: "blue"
 }).css("background", "green");
         });
      </script>
      <style type="text/css">
         body {
            margin: 20px;
         }

         #test {
            font-size: 9pt;
            width: 300px;
            height: 50px;
            line-height: 50px;
            font-weight: bold;
            color: snow;
            padding-left: 20px;
         }
      </style>
   </head>

   <body>
      <div id="test">这个示例演示了自定义对象级别的插件的使用方法</div>
   </body>

</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：