jQuery（ 三）——第三方插件引入和封装自定义插件

插件

常用插件

插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。

jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。

jquery.color.js

animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。

使用插件的步骤

1. 引入jQuery文件
2. 引入插件（如果有用到css的话，需要引入css）
3. 使用插件
​

jquery.lazyload.js

懒加载插件

jquery.ui.js插件

jQueryUI专指由jQuery官方维护的UI方向的插件。

官方API：http://api.jqueryui.com/category/all/

其他教程：jQueryUI教程

基本使用:

2.  1.  引入jQueryUI的样式文件
2.  引入jQuery
3.  引入jQueryUI的js文件
4.  使用jQueryUI功能

使用jquery.ui.js实现新闻模块的案例

制作jquery插件

原理：jquery插件其实说白了就是给jquery对象增加一个新的方法，让jquery对象拥有某一个功能。

//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() {};

/////////////////////////
一般会先在head标签中引入插件文件（首先被加载），执行插件文件代码最好写成自执行函数：
(function($){
    $.fn. pluginName = function() {};
})(window.jQuery);                        //window.jQuery为jQuery对象/$

【制作表格插件】

使用插件接口：
<script>
    $('#c').table(['序号', '姓名', '年龄', '工资'],[
      {n: 'xy', age: 20, s: 10},
      {n: 'wy', age: 10, s: 8},
      {n: 'pl', age: 11, s: 9}
    ]);
</script>

插件源码：
/**
 * Created by itcast on 2018 12/31.
 */
(function ($) {
  /**
   * 给$的原型添加table方法.
   * @param arrTableHead 生成表格表头的数组
   * @param arrTableBody 生成表格主体部分的数组
   */
  $.fn.table = function (arrTableHead,arrTableBody) {
    //console.log(this);//这里的this是一个jQuery对象,是调用这个table方法的jQuery对象.

    var list = [];
    list.push('<table>');
    //生成表头
    list.push("<thead>");
    list.push('<tr>');
    for(var i = 0 ; i < arrTableHead.length; i++){
    	list.push('<th>');
        list.push(arrTableHead[i]);
    	list.push('</th>');
    }
    list.push('</tr>');
    list.push("</thead>");
    //生成表格主体部分
    for(var i = 0 ; i < arrTableBody.length; i++){
    	list.push('<tr>')
        //生成一个序号td.
        list.push('<td>'+(i+1)+'</td>');
        //遍历arrTableBody这个数组的一个个的元素.
        for(var key in arrTableBody[i]){
          list.push('<td>');
          list.push(arrTableBody[i][key]);
          list.push('</td>');
        }
    	list.push('</tr>')
    }
    list.push('</table>');



    //console.log(list.join(""));
    this.html(list.join(""));

  }
}(window.jQuery));

【制作tab栏插件】

<script src="jQuery-tabs.js"></script>

<script>
    $(function () {

      $('#wrapper').tabs({
        tabHeads:'#tab-menu>li',
        tabHeadsClass:'active',
        tabBodys:'#tab-main>div',
        tabBodysClass:'selected'
      });

    });
</script>

插件源码：
/**
 * Created by itcast on 2018 12/31.
 */
(function ($) {
  /**
   * 给$的原型添加tabs方法
   * @param option.tabHeads          需要注册事件的页签们选择器
   * @param option.tabHeadsClass     触发事件的页面要添加的类
   * @param option.tabBodys          要显示的页面们选择器
   * @param option.tabBodysClass     索引一致要显示的页面要添加的类.
   */
  $.fn.tabs = function (option) {
    var $bigDiv = this; //把this先存进$bigDiv变量中.

    //通过参数传递过来的页签选择器,获取到这些页签. 给这些页面注册点击事件.
    $bigDiv.find(option.tabHeads).on('click', function () {
      //给当前鼠标点击的这个页签添加option.tabHeadsClass类,其他的兄弟页签移除这个类.
      $(this).addClass(option.tabHeadsClass).siblings().removeClass(option.tabHeadsClass);

      //获取当前点击的页面的索引
      var idx = $(this).index();

      //获取索引一致的页面,给他添加option.tabBodysClass, 其他的兄弟页面移除这个类.
      $bigDiv.find(option.tabBodys).eq(idx).addClass(option.tabBodysClass).siblings().removeClass(option.tabBodysClass);

    });

    //返回值.
    return $bigDiv;

  }
}(window.jQuery));