如今做web开发，jquery几乎是必不可少的，就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了，用过的都知道。

编写插件的两种方式:

1、类级别开发插件(1%)

2、对象级别开发(99%)

类级别的静态开发就是给jquery添加静态方法，三种方式

1、添加新的全局函数

 2、使用$.extend(obj)

3、使用命名空间

类级别开发插件（用的非常少，1%）

  分别举例：

//1.直接给jquer添加全局函数  jQuery.myAlert=function (str) {      alert(str);  };    //2.用extend()方法。extend是jquery提供的一个方法，把多个对象合并起来，参数是object  jQuery.extend({      myAlert2:function (str1) {          alert(str1);      },      myAlert3:function () {          alert(11111);      }  });    //一定要注意两种类级别编写插件方式书写的区别。    //3.使用命名空间(如果不使用命名空间容易和其他引入的JS库里面的同名方法冲突)  jQuery.yuqing={      myAlert4:function (str) {          alert(str);      },      centerWindow:function (obj) {          obj.css({              'top':($(window).height()-obj.height())/2,              'left':($(window).width()-obj.width())/2          });          //必须进行返回对象的操作，否则就不能继续往下进行链式操作了。。          return obj;      }  };

调用部分：

//调用自定义插件方法    $('#btn').click(function () {        $.myAlert('我是调用jquery编写的插件弹出的警告框');        $.myAlert2('我是调用jquery的extend()方法编写的插件弹出的警告框');        $.myAlert3();        $.yuqing.myAlert4("调用使用了命名空间编写的插件方法");    });   $.yuqing.centerWindow($('#div1')).css('background','red');

注意：jquery文件要一并引入。

对象级别开发插件（常用99%）

jquery官方给了一套对象级别开发插件的模板：

;(function ($) {      $.fn.plugin=function (options) {          var defaults={              //各种参数、各种属性          };          //options合并到defaults上,defaults继承了options上的各种属性和方法,将所有的赋值给endOptions          var endOptions=$.extend(defaults,options);                    this.each(function () {              //实现功能的代码          });      };  })(jQuery);

模板要点：

1、函数全部放在闭包里，外面的函数就调用不到里面的参数了,比较安全

2、前面加分号,避免不必要的麻烦

举个栗子：

需求：开发一个插件，要求奇数行颜色是yellow，偶数行颜色是green，鼠标移到的行变为blue，移除变为原来的颜色

HTML布局：

<table id="tab">      <tr>          <th>姓名</th>          <th>年龄</th>          <th>身高</th>          <th>体重</th>      </tr>      <tr>          <td>张三</td>          <td>22</td>          <td>178cm</td>          <td>79kg</td>      </tr>      <tr>          <td>美美</td>          <td>34</td>          <td>167cm</td>          <td>60kg</td>      </tr>      <tr>          <td>小青</td>          <td>23</td>          <td>170cm</td>          <td>55kg</td>      </tr>      <tr>          <td>张三</td>          <td>22</td>          <td>178cm</td>          <td>79kg</td>      </tr>      <tr>          <td>美美</td>          <td>34</td>          <td>167cm</td>          <td>60kg</td>      </tr>      <tr>          <td>小青</td>          <td>23</td>          <td>170cm</td>          <td>55kg</td>      </tr>      <tr>          <td>张三</td>          <td>22</td>          <td>178cm</td>          <td>79kg</td>      </tr>      <tr>          <td>美美</td>          <td>34</td>          <td>167cm</td>          <td>60kg</td>      </tr>      <tr>          <td>小青</td>          <td>23</td>          <td>170cm</td>          <td>55kg</td>      </tr>  </table>

css样式

table{      width: 100%;      border-collapse: collapse;      border: 1px solid palevioletred;  }  th,td{      height: 30px;      text-align: center;      border: 1px solid deeppink;  }  .evenRow1{background: yellow;}  .oddRow1{background: green;}  .curRow1{background: blue;}

 jquery调用代码：

$('#tab').table({      evenRowClass:'evenRow1',      oddRowClass:'oddRow1',      curRowClass:'curRow1',      eventType1:'click'  });

jquery插件代码：

;(function ($) {      $.fn.table=function (options) {          var defaults={              //各种参数、各种属性              evenRowClass:'evenRow',              oddRowClass:'oddRow',              curRowClass:'curRow',              eventType1:'mouseover',              eventType2:'mouseout'          };                    var endOptions=$.extend(defaults,options);                    this.each(function () {              var _this = $( this );              _this.find('tr:even').addClass(endOptions.evenRowClass);              _this.find('tr:odd').addClass(endOptions.oddRowClass);              //鼠标移入和移出，但实际开发中不直接使用mouseover这种方法              /*$(this).find('tr').mouseover(function () {                  $(this).addClass(endOptions.curRowClass);              }).mouseout(function () {                  $(this).removeClass(endOptions.curRowClass);              });*/                            //实际开发中要用bian()方法绑定              //因为用bind()方法绑定非常灵活，事件可以自己定义              //mouseover mouseout...事件底层都是用bind()去实现的，mouseout 等只是快捷方式              _this.find('tr').bind(endOptions.eventType1,function () {                  $(this).addClass(endOptions.curRowClass);              });              _this.find('tr').bind(endOptions.eventType2,function () {                  $(this).removeClass(endOptions.curRowClass);              })          });      };  })(jQuery);

插件注释：

15行：var _this = this;  变量存储，因为很多地方用到$(this);所以将其存储为变量使用更加的方便，也提高了运行效率。

19-23行与28-33行实现的功能是相同的，但是推荐使用28-33行的写法，使用bian()进行事件的绑定，因为使用会非常的灵活。

可变的地方，如样式名称等最好写在defaults里，方便用户自行配置。

再来一个对象级别实现jquery插件的栗子(⊙o⊙)哦！！实现选项卡功能~~

HTML布局

<div id="tab">      <ul id="nav">          <li class="active">HTML</li>          <li>CSS</li>          <li>JAVASCRIPT</li>      </ul>      <div id="cont">          <div style="display: block;">HTML</div>          <div>CSS</div>          <div>JAVASCRIPT</div>      </div>  </div>

css样式：

* {      margin: 0;      padding: 0;  }    #nav li {      list-style: none;      float: left;      height: 25px;      line-height: 25px;      border: 1px solid #0000FF;      border-bottom: none;      padding: 5px;      margin: 10px;      margin-bottom: 0;  }    #cont div {      width: 210px;      height: 150px;      border: 1px solid #0000FF;      margin-left: 10px;      clear: both;      display: none;  }    .active {      background: #AFEEEE;  }

调用的JS代码

<script type="text/javascript">      $('#tab').tab({          tabType: 'mouseover'      });  </script>

注意哦：不要忘记先引入jquery.js文件喔，然后在引入我们编写的插件tab.js，才能正确调用到tab()方法。。。

插件tab.js

;(function($) {      $.fn.tab = function(options) {          var defaults = {              tabActiveClass: 'active',              tabNav: '#nav>li',              tabCont: '#cont>div',              tabType: 'click'          };            var endOptions = $.extend(defaults, options);          $(this).each(function() {              var _this = $(this);              _this.find(endOptions.tabNav).bind(endOptions.tabType, function() {                  $(this).addClass(endOptions.tabActiveClass).siblings().removeClass(endOptions.tabActiveClass);                  var index = $(this).index();                  _this.find(endOptions.tabCont).eq(index).show().siblings().hide();              });          });      };  })(jQuery);

这个小栗子和上一个表格插件的栗子相似度是很高的，多敲几遍，理解意思，其实jquery扩展插件并不难哦~~

如有不对的地方，还请各路大神赐教！

什么是成功？就是所有失败的路都走过了，只剩下一条路还没有走，这条路就叫成功！

本文转载：https://www.cnblogs.com/yuqingfamily/p/5813270.html

原文链接：https://www.qiquanji.com/post/7485.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。