Jquery插件（經常使用的插件庫）

時間 2020-05-06

原文原文鏈接

隨着Jquery知識點的結束，我也開始接觸到框架來了。javascript

開始的時候，老是聽到插件和框架等詞，我疑惑框架和插件是啥有啥區別？？css

插件能夠說有無數種，在網頁中任何一種功能均可以被叫作插件，單獨提取出來，能夠供別人使用，而框架是一個超大號的的插件，它將各類方法融合成一體，使用者可使用它來構造不一樣的功能。插件則專一於一種，每每只有一種功能。打個比方好比前面學習的jquery，jquery就是一個框架，在jquery插件庫裏http://www.jq22.com/有數不勝數的插件，這些插件絕大部分基於jq框架來編寫。html

理解完插件和框架的區別，下面來寫一寫這幾天初步學習的插件庫java

1.jquery 對於我而言確定是一個熟悉的框架了官網網址：https://jquery.com/ 插件庫：http://www.jq22.com/ jquery

這裏簡單的介紹一下jquery ：jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype以後又一個優秀的JavaScript代碼庫（或JavaScript框架）。css3

2.Select2 官網網址：https://select2.org/git

3.Fullpage 官網網址：https://alvarotrigo.com/fullPage/#page1github

4.lazyload 官網網址：https://appelsiini.net/projects/lazyload/編程

5.Swiper 官網網址：https://www.swiper.com.cn/api

6.nice-validator 官網網址：https://validator.niceue.com/docs/getting-started.html

以上說起的都是插件庫，每個有着不一樣的功能，jquery在這裏我就不在贅述了。我就從Select2開始寫

一.Select2 插件庫

select2是一款基於jquery的功能豐富的下拉列表插件。這就說明了使用select2必需要有jquery依賴，就是要先導入jquery庫，而後在導入select2插件庫，而後這是一款關於下拉列表的插件。

使用方法：首先去下載壓縮包文件下載地址：https://codeload.github.com/select2/select2/zip/develop下載完成解壓後在文件中咱們須要找到相關的js文件和css文件，咱們所須要的的就是這兩個文件：在dist文件夾下有css和js，js有.js文件和min.js文件，css也是同樣的。以下圖所示

min.js是壓縮版，沒有逗號空格等等，體積小傳輸效率快，但可讀性較差能夠自行想象一下js代碼就一行的場景 .js是沒壓縮的俗稱開發版，可讀性較好，易於debug調試和更改；可是體積相比較而言大一些，效率低。我採用壓縮版的我不改bugQAQ 這段話或許就解決了心中的疑問

咱們將css和js文件複製到咱們的項目中就能夠開始使用這個插件了。

這個是一個案例效果圖接下來就根據這個案列來編寫。

首先一點也是重中之重，導入css和js文件，jquery插件庫優先導入，js cs就是咱們上面複製到項目的文件，以下

在body裏面寫上一個普通的下拉列表：

我把js註釋一下看看效果如何：

這個與和咱們的效果圖有着很大的區別，如何使用這個插件呢，咱們不妨看看文檔（雖然全是英文）

在基本語法上有着這樣的語句（咱們把他定義到咱們的案例中去）：.js-example-basic-multiple是一個選擇器

在案例中咱們以下編寫（效果如右）：

這就是select2的威力，咱們就使用了一行js代碼就將一個普通的下拉列表變成了這樣子的一個視覺效果不錯的下拉列表（寬度能夠修改，select2內置了不少的屬性能夠查看文檔）。

例如給下拉列表設置寬度只須要以下寫（使用大括號編寫屬性，用逗號分隔每一個屬性）

在select2文檔的第三項中的Options裏面有一張配置表裏面涵蓋了select2全部的屬性（英文差的我看的有點吃力）

案列中簡單的寫了兩個屬性

插件的出現就是爲了簡單化代碼，讓咱們少些了不少代碼。使用起來方便簡潔，就是這樣select2的簡單案列完成了，select2專一於選框，不少屬性，能夠去文檔一一查閱我這裏的介紹就結束了。

2、Fullpage插件庫

Fullpage 翻譯過來就是全屏的意思，我想已經猜出來了，這是一款全屏的插件，整個頁面簡潔大方，整個屏幕就是一張頁面，它的官網就是一個很好的實例 https://alvarotrigo.com/fullPage/#page1。這樣的頁面展現很受人喜歡，我相信大部分人都曾見過。

使用方法一樣下載壓縮提取js 、css文件下載地址 https://codeload.github.com/alvarotrigo/fullPage.js/zip/master

這個官網有一點優點emmmmmm他有中文模式左上角能夠選擇

將css js複製進本身的項目裏面引入js css 一樣注意的依賴jquery優先導入jquery庫以下：

咱們能夠查看文檔編寫（文檔中有這樣的一句話也就是在html文件中必須有着個聲明，因此複製代碼是要仔細不要複製掉了）

將這段代碼複製到body裏開始編寫頁面在div的class值，section 以及後面的slide是不能更改的，咱們必須按照fillpage的規則來但最外層div的id能夠直接設置，用於js代碼中的選擇

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

在js中以下編寫（首先咱們就用上了sectionsColor屬性定義背景顏色，一一對應）

當想定義橫向切換時，這時候slide就登場了，將下面代碼嵌套到<div class = "section"></div>中

<div class="section">
    <div class="slide"> slide 1 </div>
    <div class="slide"> slide 2 </div>
    <div class="slide"> slide 3 </div>
    <div class="slide"> slide 4 </div>
</div>

它將會產生一個橫向輪播圖注意 slide section 不能夠更改 以下圖所寫:

效果以下：

固然插件也並非萬能的，fullpage沒法設置字體大小因此須要本身定義大小下面是自定義樣式

在fullpage文檔上有着不少屬性（往下翻的話有對這些屬性一一的解釋）

在個人案列中寫了幾個案例js代碼以下：

$("#fullpage").fullpage({
                      sectionsColor: ['#c3c3c3', '#aa55ff', '#aaffff', '#ffaaff'],//背景顏色
                      /* scrollingSpeed:2000, */   //滾動時長
                      css3:true,
                      easingcss3:"linear",    //頁面過分效果，只有當css3定義爲true時纔會有效果
                      loopHorizontal:false, //默認爲 true 定義水平滑塊是否在到達上一張或下一張後循環 當爲第一張時，上一張的箭頭隱藏 下一張同義。
                    /*loopBottom:true, */   //上下滑動時，當爲最後一張時，返回第一張  反之同義   默認值爲flase
                    /*loopTop:true, */     //上下滑動時，當爲最後一張時，返回第一張  反之同義    默認值爲flase
                      keyboardScrolling:true,   //定義是否能夠經過鍵盤來進行滾動，默認爲true
                      navigation:true,          //縱向導航欄        默認flase
                      slidesNavigation:true,   //橫向導航欄         默認flase
                      navigationTooltips:["一","二","三","四"],   //小黑點導航提示
                      /* anchors:['firstPage', 'secondPage','sss','aaaa'], */       //設置錨點
                  });

文檔的屬性還算寫的清晰，因此能夠一點點編寫這一節的效果圖很差截我把代碼結構寫上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>fullpage全屏滾動案例</title>
    </head>
      <link rel="stylesheet" type="text/css" href="fullpage/fullpage.min.css"/>
      <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
      <script src="fullpage/fullpage.min.js" type="text/javascript" charset="utf-8"></script>
      <style type="text/css">
            #fullpage{text-align: center;font-size: 1.875rem} /* 設置居中 字體大小 */
           
          .fp-controlArrow.fp-next{   /* 設置下一頁箭頭離右邊3.1875rem */
              right:3.1875rem;
          }
          .fp-controlArrow.fp-prev{    /* 設置上一頁箭頭離左邊3.1875rem */
              left:3.1875rem;
          }
      </style>
    <body>
        <div id="fullpage">
            <div class="section">                      <!-- //class必須爲section  插件標準 -->
                <div class="slide"> slide 1 </div>     <!-- //class必須爲slide -->
                <div class="slide"> slide 2 </div>
                <div class="slide"> slide 3 </div>
                <div class="slide"> slide 4 </div>
            </div>
            <div class="section">Some section</div>
            <div class="section">Some section</div>
            <div class="section">Some section</div>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
                  $("#fullpage").fullpage({
                      sectionsColor: ['#c3c3c3', '#aa55ff', '#aaffff', '#ffaaff'],//背景顏色
                      /* scrollingSpeed:2000, */   //滾動時長
                      css3:true,
                      easingcss3:"linear",    //頁面過分效果，只有當css3定義爲true時纔會有效果
                      loopHorizontal:false, //默認爲 true 定義水平滑塊是否在到達上一張或下一張後循環 當爲第一張時，上一張的箭頭隱藏 下一張同義。
                    /*loopBottom:true, */   //上下滑動時，當爲最後一張時，返回第一張  反之同義   默認值爲flase
                    /*loopTop:true, */     //上下滑動時，當爲最後一張時，返回第一張  反之同義    默認值爲flase
                      keyboardScrolling:true,   //定義是否能夠經過鍵盤來進行滾動，默認爲true
                      navigation:true,          //縱向導航欄        默認flase
                      slidesNavigation:true,   //橫向導航欄         默認flase
                      navigationTooltips:["一","二","三","四"],   //小黑點導航提示
                      /* anchors:['firstPage', 'secondPage','sss','aaaa'], */       //設置錨點
                  });
            });
        </script>
    </body>
</html>

這樣子fullpage的案列就完結了，跟官網頁面類似能夠試着運行一會兒。

3、lazyload 插件庫

lazyload 譯爲延遲加載，又叫懶加載在這個流量的時代，懶加載的出現是很是nice的，它爲用戶節省流量的消耗，提升性能，當一個高清圖片網站一張頁面幾十張甚至上百張圖片時，沒有懶加載，它將會將全部的圖片都加載出來，這就致使流量的浪費，下降性能，影響了用戶的體驗，而懶加載的做用是當用戶看到這張圖片時，它纔開始加載出來，這樣子就節省了大量的流量，並且優化了性能，提升了用戶體驗。

使用方法和上面同樣下載lazyload插件包：https://codeload.github.com/tuupola/lazyload/zip/2.x

使用方法很簡單，由於它只有一個功能就是延遲加載，因此我就直接上代碼了 (注意在下載文件中找到對應的css，js文件複製到本身的項目中) lazyload沒有css文件

    <head>
        <meta charset="utf-8">
        <title>lazyload懶加載案例</title>
        <!-- 由於lazyload插件沒有css樣式因此這裏咱們本身寫樣式已圖片形式來演示 -->
        <style type="text/css">
            /* 修飾一下img */
              *{
                  padding: 0;
                  margin: 0;
              }
              img{
                  width:1366px;
                  height:671px;
                  border: 3px solid #ccc;
                  border-radius: 8px;
              }
              .f_div{
                  width: 1366px;
                  height:671px;
                  display: flexbox;
              }
              
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <script src="lazyload/lazyload.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="f_div">
              <img class="lazyload" data-src="img/動物01.jpg" >
              <img class="lazyload" data-src="img/動物02.jpg" >
              <img class="lazyload" data-src="img/動物03.jpg" >
              <img class="lazyload" data-src="img/動物04.jpg" >
              <img class="lazyload" data-src="img/動物05.jpg" >
              <img class="lazyload" data-src="img/動物06.jpg" >
              <img class="lazyload" data-src="img/動物07.jpg" >
              <img class="lazyload" data-src="img/動物08.jpg" >
              <img class="lazyload" data-src="img/動物09.jpg" >
              <img class="lazyload" data-src="img/動物10.jpg" >
              <img class="lazyload" data-src="img/動物11.jpg" >
              <img class="lazyload" data-src="img/動物12.jpg" >
              
        </div>
        <script type="text/javascript">
                $(".f_div img").lazyload()
        </script>
    </body>

我使用了12張圖片而後js就一句，就能夠實現懶加載功能

要爲每一張圖片添加class = 「lazyload」，且不能使用src 必須使用data-src 下面就來寫一寫怎麼看二者的區別

普通加載：

懶加載：

懶加載的用法簡單，但它存在的意義不凡，有些框架也會內置懶加載功能列如上面介紹的fullpage插件

因此，懶加載的使用結束，或許如今感受不它的做用，可是之後的編程日子裏我想我百分百會和它再次的碰面。

4、Swiper 插件

Swiper 譯爲猛擊者，確實在視覺上它的確很吸引我，首先它是一款觸摸滑動插件它與fullpage類似又有着各自的特色。

用swiper來作輪播，導航我想是很好的選擇 swiper不依賴jq因此當項目中不須要jq時能夠不用到jquery庫

一樣先下載swiper的包：https://www.swiper.com.cn/download/swiper-5.3.7.zip 在文件中找到對應的js css文件，複製到本身的項目而後導入以下：

先上一張效果圖：

如圖所示一款很炫酷的輪播圖能夠說swiper的中文文檔很是的nice，思路清晰。就是emmmm屬性有點多一時半會看完我如今想着，根據以上的插件庫案列

這個插件的使用就應該不用我來再作贅述了，我就直接粘貼代碼代碼以下：

<html>
    <head>
        <meta charset="utf-8">
        <title>Swiper輪播案例</title>
        <link rel="stylesheet" type="text/css" href="Swiper/swiper.min.css"/>
        <script src="Swiper/swiper.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            /* .swiper-container{width: 61.25rem; height: 43.75rem; text-align: center;} */  /* 設置輪播寬高字體居中 */
            .swiper-wrapper{
                text-align: center;        /* 水平居中 */
                line-height: 31.25rem;   /* 利用字體行高將div撐起來   上下居中*/
                font-size: 2.5rem;        /* 字體大小 */
            }
        </style>
    </head>
    <body>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-color: #aaaafe;">slider1</div>
        <div class="swiper-slide" style="background-color: #aaffff;">slider2</div>
        <div class="swiper-slide" style="background-color: #21fead;">slider3</div>
      </div>
      <div class="swiper-pagination"></div>
          
          <!-- 導航欄  小黑點-->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
          
          <!-- 滾動條  -->
          <div class="swiper-scrollbar"></div>
    </div>
         
    <script type="text/javascript">
     var mySwiper = new Swiper('.swiper-container', {
          direction: "horizontal",    //horizontal橫向切換  vertical縱向切換，默認爲horizontal
          autoplay: true,//可選選項，自動滑動
          speed:2000, //圖片滑動時所需時間
          grabCursor:true,//設置鼠標樣式，懸浮時的樣式根據用戶瀏覽器不一樣而定，默認爲flase
         /* virtualTranslate:true, *///虛擬的位移。當你啓用這個參數，Slide不會移動，可是Swiper仍是在運行，輪播沒有動可是，指示器，導航按鈕都動了
          preventInteractionOnTransition :true, // 默認爲flase，當你的Swiper在過渡時將沒法滑動
          keyboard : true,            //鍵盤左右鍵控制切換
          
         //3d流效果
         effect : 'coverflow',    //定義滑動效果   swiper內置了幾種滑動效果  https://www.swiper.com.cn/api/effects/193.html
         slidesPerView: 2,
         centeredSlides: true,    //默認的是默認爲「幻燈片」(位移切換) 其餘 ：幻燈片’(普通切換、默認)，「淡出」(淡入)「立方體」(方塊)「覆蓋流」(3D流)「翻轉」(3D翻轉)
         
           autoplay: {
               delay: 1000,//定義切換時間
             },
            pagination: {
              el: '.swiper-pagination',   //添加指示器小黑點
            },
            
            //上一頁，下一頁
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            
            // 滾動條指示
            scrollbar: {
              el: '.swiper-scrollbar',
            },
    });
    </script>
    </body>
</html>