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));