插件的使用

學習以及面試過程中，都會著重原生的東西，但實際開發過程中，很少會用原生寫項目，一線城市就是vue、react、以及Angular 的使用比較多，jQuery也有，但相對二線城市來說會少一些，但也不是沒有。

以前的jQuery就是王者，現在jQuery是入門。以前可能需要花很大的精力去學習jQuery，現在知道怎麼用即可。

市面上有很多基於jQuery的插件，比如輪播圖，分頁，cookie等插件，這邊推薦一個很好用的網站：http://www.jq22.com，裡面有很多插件，很多都是連佈局，樣式都寫好的，直接拿就可以了。但有時找不到自己心中想要的那個，或者說功能上跟自己的需求相差一些，就需要自己動手寫一個了。不僅要會用插件，還要會寫插件。

表單驗證插件的使用：$('選擇器').validate()    

     插件的使用規則

cookie插件的使用：

• 創建：$.cookie(‘cookieName’,'cookieValue’);
• 獲取：$.cookie(‘cookieName’); 
• 刪除：$.cookie(‘cookieName’,null);

分頁插件的使用：$("#pagination").pagination();

參數表：

 別人的插件有時候確實很好用，但也有用不順手的時候，這時候就需要自己動手啦！

1. 文件命名
    jquery.banner.1.0.0.js
    jquery.banner.js
2. 添加匿名函數
3. 給匿名函數傳入jQuery
   ;(function($){})(jQuery);
4. 給插件中jQuery綁定適用的方法
5. 開發功能

下麵的代碼是我封裝的一個輪播圖的插件，簡易版！

; (function ($) {
    $.fn.extend({
        fade(options) {
            var obj = {
                imgs: options.imgs,
                prev: options.prev,
                next: options.next,
                points: options.points,
                autoplay: options.autoplay === false ? false : true,
                delay: options.delay || 3000,
                current: options.current || 0,
                duration: options.duration || 500,
                len: options.imgs.length
            };
            obj.next.on('click', function () {
                obj.current++;
                if (obj.current === obj.len) {
                    obj.current = 0;
                }
                ani(obj.current);
            });
            obj.prev.on('click', function () {
                obj.current--;
                if (obj.current === -1) {
                    obj.current = obj.len - 1;
                }
                ani(obj.current);
            });
            for (var i = 0; i < obj.len; i++) {
                obj.points.append('<span></span>');
            }
            ani(obj.current);
            obj.points.find('span').on('mouseenter', function () {
                var index = $(this).index();
                obj.current = index;
                ani(obj.current);
            });
            var timer = null;
            if (obj.autoplay) {
                timer = setInterval(function () {
                    obj.next.click();
                }, obj.delay);
            }
            if (obj.autoplay) {
                $(this).hover(function () {
                    clearInterval(timer);
                }, function () {
                    timer = setInterval(function () {
                        obj.next.click();
                    }, obj.delay);
                })
            }
            function ani(current) {
                obj.points.find('span').eq(current).addClass('active').siblings().removeClass('active');
                obj.imgs.eq(current).stop().fadeIn(obj.duration).siblings().stop().fadeOut(obj.duration);
            }
        }
    });
})(jQuery)

　　如有問題，歡迎評論哦！