1.5 前端插件與框架

通過學習上述知識，我們不難發現，利用原生的JavaScript語言操作時，過程較為復雜，尤其是當涉及DOM操作、改變樣式、內容提交等方面時更復雜。為了簡化JavaScript語言的使用流程，提高編程效率、提升程序的性能，JavaScript語言衍生出了許多插件與框架。本節將著重介紹jQuery、Bootstrap和Vue.js三種前端框架。

1.5.1 jQuery

jQuery是一個快速、簡潔的JavaScript框架，其設計哲學是倡導寫更少的代碼做更多的事情。jQuery的核心特性為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的選擇器；大大簡化了Ajax技術的應用過程；擁有便捷的插件擴展機制和豐富的插件，并且具有較好的瀏覽器兼容性。目前最新的版本是jQuery3.3.1。

默認情況下，jQuery的程序代碼是待網頁中DOM結構加載完畢后執行，類似于將程序放在原生JavaScript中的onload事件中。

在頁面中需要首先通過＜script src=＂＂＞標簽將jQuery文件引入進來（jQuery下載地址：http://jquery.com/download/），之后才能進行基于jQuery的編程。另外，jQuery程序必須放在以下結構中：

    $（document）. ready（function（）{
      你的jQuery程序。
    }）；
    可簡寫為：
    $（function（）{
      你的jQuery程序。
    }）

1.5.1.1 jQuery選擇器

與CSS中的選擇器的作用類似，jQuery中選擇器的作用也是確定操作對象。jQuery中選擇器的具體寫法與CSS中選擇器的寫法基本一致，但是豐富了許多新的寫法。jQuery選擇器必須放在$（）中。如：

$（＂div＂）：選擇所有＜div＞標簽。

$（＂#abc＂）：選擇id屬性值為abc的標簽。

$（＂. def＂）：選擇class屬性值為def的所有標簽。

$（＂input [type=′text′]＂）：選擇type屬性值為text的所有＜input＞標簽。

1.5.1.2 對象的屬性與方法

我們利用選擇器確定了對象后，可以通過豐富的屬性與方法對對象進行多種操作。常用的屬性與方法有：

.text（）; //獲取或設置非表單標簽內容，如果內容中有html代碼，不解析，原樣顯示。

.html（）; //獲取或設置非表單標簽內容，如果內容中有html代碼，解析顯示。

.val（）; //獲取或設置表單標簽的值。

.prop（）; //獲取或設置標簽的固有屬性值。

.append（）; //在操作對象內添加內容。

.remove（）; //刪除對象。

.empty（）; //刪除對象中所有子標簽。

.css（）; //獲取或設置標簽的css樣式。

.addClass（）; //為對象添加一種類樣式。

.removeClass（）; //為對象刪除一種類樣式。

.width（）; //獲取或設置標簽的寬度。

.height（）; //獲取或設置標簽的高度。

.hide（）; //隱藏對象。

.show（）; //顯示對象。

.toggle（）; //在hide（）和show（）之間自動切換。

fadeIn（）; //淡入。

fadeOut（）; //淡出。

.fadeToggle（）; //在fadeIn（）和fadeOut（）之間自動切換。

slideDown（）; //滑動出現。

slideUp（）; //滑動隱藏。

.slideToggle（）; //在slideDown（）和slideUp（）之間自動切換。

.attr（）; //獲取或設置標簽的自定義屬性值。

1.5.1.3 jQuery事件

jQuery重新定義了事件的創建應用方法，實現過程更為簡化。其基本結構為：

    $（＂選擇器名＂）. 事件名（function（）{
      代碼；
    }）

我們仍以上述簡單表單驗證為例，來了解一下該事件在jQuery中的實現過程。

    ＜script src=＂https://unpkg.com/jquery@3.3.1/dist/jquery.min.js＂＞＜/script＞
        ＜script＞
            $（function（）{
                $（＂#submitBtn＂）. click（function（）{
                  var username = $（＂#username＂）. val（）；
                  if（username == ＂＂）{
                      alert（＂內容不能為空＂）；
                  }
                  else if（username. length ＜ 6）{
                      alert（＂內容長度不能少于6位＂）
                  }
                  else if（username. length ＞ 15）{
                      alert（＂內容長度不能多于15位＂）；
                  }
                  else {
                      alert（＂通過＂）；
                      $（＂#myForm＂）. submit（）；
                  }
              }）
          }）
        ＜/script＞
        ＜form action=＂http://www.xynun.edu.cn＂ method=＂get＂ id=＂myForm＂＞
            ＜input type=＂text＂ name=＂＂ id=＂username＂＞
            ＜input type=＂button＂ value=＂提交＂ id=＂submitBtn＂＞
        ＜/form＞

1.5.1.4 jQuery中的Ajax技術

Ajax（Asynchronous Javascript And XML，異步JavaScript和XML）是一種創建交互式網頁應用的網頁開發技術，可用于創建快速動態網頁，在無須重新加載整個網頁的情況下，能夠更新部分網頁，其本質就是實現異步加載。利用原生JavaScript實現Ajax的過程十分復雜，而jQuery則大大簡化了其實現過程，提升了Web開發中前端與后端進行異步數據交換的效率。jQuery內置十多種Ajax函數，常用的有ajax（）、getJSON（）、post（）和load（）等，下面逐一介紹。

①$.ajax（）。

這是最為完整的執行異步Ajax請求的函數，其核心參數包括：

    $.ajax（{
        url:url; // 請求對象字符串，即后端程序頁面的url
        data:data; //附加的請求參數（JSON格式）
        type:＂get/post＂; //請求類型
      dataType:＂json/text/html/xm等＂; //請求返回值的類型
        success:function（data）{}; //請求成功后的回調函數，函數的參數data為后端
    程序的返回值
    }）；
      由于$.ajax（）函數的參數為標準的JSON格式，因此參數不分先后順序。如：
    $（function（）{
        $.ajax（{
          url:＂src/index. cs＂，
          data:{act:＂ajax＂}，
          type:＂get＂，
          dataType:＂json＂，
          success:function（data）{
              $（＂#div1＂）.html（data）
          }
        }）

上述示例的效果是異步從后端src/index.cs頁面獲取JSON數據，并顯示到當前頁面的id為div1的標簽中。此時要求后端程序的返回值必須為JSON格式，否則前端將不能識別解析。

②$.getJSON（）。

$.getJSON（）方法實際上是簡化的$.ajax（）方法之一，它相當于在$.ajax（）中將參數type設為get、dataType設為json。如：

    $（function（）{
        $.getJSON（＂src/index. cs＂, {act:＂ajax＂}, function（data）{
              $（＂#div1＂）.html（data）
          }
        }）

要注意，由于$.getJSON（）函數的參數不是標簽的JSON格式，因此參數順序不能隨意寫，只能按照示例中的順序來寫。

③$.post（）。

$.post（）方法實際上是簡化的$.ajax（）方法之一，它相當于在$.ajax（）中將參數type設為post，通常用于向服務器后端程序提交表單數據。其基本用法示例如下：

    $（function（）{
        $.post（＂src/index. cs＂, {act:＂ajax＂}, function（data）{
              $（＂#div1＂）.html（data）
          }
        }, ＂json＂）

要注意，$.post（）函數有四個基本參數，前三個參數與$.getJSON（）函數中的參數相同，第四個參數實際上相當于$.ajax（）函數中的dataType參數，即指定后端程序返回值的類型。$.post（）函數的參數順序也是固定的。

④load（url）。

load（）方法是簡單但強大的AJAX方法，它可從服務器加載數據，并把返回的數據放入HTML元素中。如$（＂#div1＂）. load（＂demo_test. txt＂）。

1.5.2 Bootstrap

在Web前端設計領域，如何快速搭建風格統一、布局合理且能夠自動適應不同用戶設備的頁面一直是一個重要問題，以往設計人員通常是將HTML5、CSS3和JavaScript等技術綜合起來解決這一問題的，實現過程復雜，在團體開發中難以保證統一性，而且代碼的復用性也不夠理想?；趈Query的Bootstrap框架正是為了解決上述問題而誕生的，它是最受歡迎的HTML、CSS和JavaScript框架之一，用于開發響應式布局、移動設備優先的WEB項目。其本質是定義了風格統一的、幾乎覆蓋前端開發涉及的所有領域的網格布局、基本樣式、布局組件、插件等，供前端開發人員根據需要直接選用。目前的最新版本是Bootstrap4.2.1。

在使用Bootstrap時，我們需要先引入jQuery文件，然后再引入Bootstrap的．js文件和.css樣式文件。

由于Bootstrap包含內容較多，限于篇幅本節僅介紹部分功能，讀者可通過其他途徑學習掌握更多相關知識。

1.5.2.1 網格布局

Bootstrap提供了一套響應式、移動設備優先的流式網格系統，它將頁面在水平方向上最多分為12列，允許開發人員設置某一標簽在某種窗口寬度下占幾列。我們結合一個具體需求案例來介紹其實現過程。

目標：頁面中有6個＜div＞標簽，在寬屏模式下每行顯示3個＜div＞，共2行；在中等寬度模式下每行顯示2個＜div＞，共3行；在窄屏模式下，每個＜div＞獨立占一行，共6行。

    代碼：
        ＜div class=＂container＂＞
            ＜div class=＂row＂＞
              ＜div class=＂col-lg-4 col-md-6 col-sm-12 col-xs-12＂＞1＜/div＞

              ＜div class=＂col-lg-4 col-md-6 col-sm-12 col-xs-12＂＞2＜/div＞
              ＜div class=＂col-lg-4 col-md-6 col-sm-12 col-xs-12＂＞3＜/div＞
              ＜div class=＂col-lg-4 col-md-6 col-sm-12 col-xs-12＂＞4＜/div＞
              ＜div class=＂col-lg-4 col-md-6 col-sm-12 col-xs-12＂＞5＜/div＞
              ＜div class=＂col-lg-4 col-md-6 col-sm-12 col-xs-12＂＞6＜/div＞
          ＜/div＞
      ＜/div＞

上述示例中，. container類提供一個最基本的布局容器，在網絡布局中不可缺少；.row類定義一個占滿一行的塊級標簽，而其包含的子標簽就是可以自適應布局的最小網絡單元（又被稱為柵格）。在這些網絡單元中，系統提供了在四種不同屏幕尺寸下的顯示方式，具體如下：

col-lg-*：指當前標簽在大屏幕中占一行12列中的*列。

col-md-*：指當前標簽在中午屏幕中占一行12列中的*列。

col-sm-*：指當前標簽在小屏幕中占一行12列中的*列。

col-xs-*：指當前標簽在超小屏幕中占一行12列中的*列。

開發人員可根據實際需求，靈活設置對應的數值，從而實現響應式布局。

1.5.2.2 常用的基本類樣式

常用的基本類樣式見表1.11

在使用上述類樣式時，直接將樣式名寫入標簽的class屬性即可，同一標簽可以根據需要同時設置多個類樣式，比如：＜div class=＂bg-dark text-white text-center font-weight-bold ＂＞興義民族師范學院＜/div＞。

1.5.2.3 布局組件

組件可理解為由多個標簽組成的功能較為簡單的代碼塊。Bootstrap內置了大量的組件，開發人員稍加修改即可使用。

例1：面包屑導航。

    ＜nav aria-label=＂breadcrumb＂＞
        ＜ol class=＂breadcrumb＂＞
            ＜li class=＂breadcrumb-item＂＞＜a href=＂#＂＞首頁＜/a＞＜/li＞
            ＜li class=＂breadcrumb-item＂＞＜a href=＂#＂＞新聞中心＜/a＞＜/li＞
            ＜li class=＂breadcrumb-item active＂ aria-current=＂page＂＞新聞列表＜/li＞
        ＜/ol＞
    ＜/nav＞

例2：卡片。

    ＜div class=＂card＂ style=＂width:1rem; ＂＞
        ＜img class=＂card-img-top＂ src=＂. . . ＂＞
        ＜div class=＂card-body＂＞
            ＜h5 class=＂card-title＂＞卡片標題＜/h5＞
            ＜p class=＂card-text＂＞卡片內容＜/p＞
        ＜/div＞
    ＜/div＞

例3：列表組。

    ＜ul class=＂list-group＂＞
        ＜li class=＂list-group-item＂＞教務處＜/li＞
        ＜li class=＂list-group-item＂＞人事處＜/li＞

      ＜li class=＂list-group-item＂＞信息技術學院＜/li＞
  ＜/ul＞

例4：響應式表單布局。

    ＜div class=＂input-group mb-3＂＞
        ＜div class=＂input-group-prepend＂＞
            ＜span class=＂input-group-text＂＞賬號＜/span＞
        ＜/div＞
        ＜input type=＂text＂ class=＂form-control＂ placeholder=＂賬號可為用戶名或電話。＂/＞
    ＜/div＞
    ＜div class=＂input-group mb-3＂＞
        ＜div class=＂input-group-prepend＂＞
            ＜span class=＂input-group-text＂＞密碼＜/span＞
        ＜/div＞
        ＜input type=＂password＂ placeholder=＂登錄密碼。＂ class=＂form-control＂/＞
    ＜/div＞
    ＜div class=＂text-center＂＞
    ＜button class=＂btn btn-primary＂ ＞登錄＜/button＞    ＜button class=＂btn＂＞
    重置＜/button＞
    ＜/div＞

例5：下拉菜單。

    ＜div class=＂dropdown＂＞
        ＜button type=＂button＂ class=＂btn dropdown-toggle＂ id=＂dropdownMenu1＂ data-
    toggle=＂dropdown＂＞主題＜span class=＂caret＂＞＜/span＞＜/button＞
        ＜ul class=＂dropdown-menu＂ role=＂menu＂ aria-labelledby=＂dropdownMenu1＂＞
            ＜li role=＂presentation＂＞＜a role=＂menuitem＂ tabindex=＂-1＂ href=＂#＂＞數據挖
    掘＜/a＞＜/li＞
            ＜li role=＂presentation＂＞＜a role=＂menuitem＂ tabindex=＂-1＂ href=＂#＂＞數據通
    信/網絡＜/a＞＜/li＞
            ＜li role=＂presentation＂ class=＂divider＂＞＜/li＞
            ＜li role=＂presentation＂＞＜a role=＂menuitem＂ tabindex=＂-1＂ href=＂#＂＞分離的
    鏈接＜/a＞＜/li＞
        ＜/ul＞
    ＜/div＞

1.5.2.4 插件

Bootstrap中的插件用于實現一些相對復雜的功能模塊，在非Bootstrap環境下，這些功能的實現往往需要額外的JavaScript代碼作支撐，但是借助Bootstrap插件其實現過程將大大簡化。本節介紹Tab頁、手風琴效果、輪播圖和模態框功能的實現。

例1: Tab頁（選項卡效果）。

    ＜ul id=＂myTab＂ class=＂nav nav-tabs＂＞

      ＜li class=＂active＂＞＜a href=＂#home＂ data-toggle=＂tab＂＞新聞＜/a＞＜/li＞
      ＜li＞＜a href=＂#ios＂ data-toggle=＂tab＂＞通知＜/a＞＜/li＞
  ＜/ul＞
  ＜div id=＂myTabContent＂ class=＂tab-content＂＞
  ＜div class=＂tab-pane fade in active＂ id=＂home＂＞
  ＜p＞新聞列表＜/p＞
      ＜/div＞
      ＜div class=＂tab-pane fade＂ id=＂ios＂＞
          ＜p＞通知列表＜/p＞
      ＜/div＞
  ＜/div＞

例2：手風琴效果。

    ＜div class=＂panel-group＂ id=＂panel-1＂＞
    ＜div class=＂panel panel-default＂＞
            ＜div class=＂panel-heading＂＞
            ＜a class=＂panel-title＂ data-toggle=＂collapse＂ data-parent=＂#panel-1＂ href=
    ＂#panel-element-1＂＞系統管理＜/a＞
        ＜/div＞
            ＜div id=＂panel-element-1＂ class=＂panel-collapse in＂＞
              ＜div class=＂panel-body＂＞關鍵參數設置＜/div＞
              ＜div class=＂panel-body＂＞用戶角色管理＜/div＞
            ＜/div＞
        ＜/div＞
        ＜div class=＂panel panel-default＂＞
    ＜div class=＂panel-heading＂＞
            ＜a class =＂ panel-title collapsed＂ data-toggle =＂ collapse＂ data-parent =
    ＂#panel-1＂ href=＂#panel-element-2＂＞新聞管理＜/a＞
        ＜/div＞
        ＜div id=＂panel-element-2＂ class=＂panel-collapse collapse＂＞
              ＜div class=＂panel-body＂＞新聞欄目管理＜/div＞
              ＜div class=＂panel-body＂＞新聞內容管理＜/div＞
    ＜/div＞
    ＜/div＞
    ＜/div＞

例3：輪播圖。

    ＜div class=＂carousel slide＂ data-ride=＂carousel＂＞
        ＜ul class=＂carousel-indicators＂＞＜! --指示符 --＞
            ＜li data-target=＂#demo＂ data-slide-to=＂0＂ class=＂active＂＞＜/li＞
            ＜li data-target=＂#demo＂ data-slide-to=＂1＂＞＜/li＞

      ＜/ul＞
      ＜div class=＂carousel-inner＂＞＜! --輪播圖片 --＞
          ＜div class=＂carousel-item active＂＞
              ＜img class=＂img-fluid＂ src=＂img/default1.jpg＂＞
          ＜/div＞
          ＜div class=＂carousel-item＂＞
              ＜img class=＂img-fluid＂ src=＂img/default2.jpg＂＞
          ＜/div＞
      ＜/div＞
      ＜! --左右切換按鈕 --＞
      ＜a class=＂carousel-control-prev＂ href=＂#demo＂ data-slide=＂prev＂＞
          ＜span class=＂carousel-control-prev-icon＂＞＜/span＞
      ＜/a＞
      ＜a class=＂carousel-control-next＂ href=＂#demo＂ data-slide=＂next＂＞
          ＜span class=＂carousel-control-next-icon＂＞＜/span＞
      ＜/a＞
  ＜/div＞

例4：模態框（全屏彈窗）。

    ＜button type=＂button＂ class=＂btn btn-primary＂data-toggle=＂modal＂ data-target=
    ＂#myModal＂＞
        打開全屏窗口
    ＜/button＞
    ＜! --模態框 --＞
    ＜div class=＂modal fade＂ id=＂myModal＂＞
        ＜div class=＂modal-dialog modal-lg＂＞
            ＜div class=＂modal-content＂＞
              ＜div class=＂modal-header＂＞
                  ＜h4 class=＂modal-title＂＞頭部＜/h4＞
                    ＜button type=＂button＂ class=＂close＂ data-dismiss=＂modal＂ ＞
    × ＜/button＞
              ＜/div＞
              ＜div class=＂modal-body＂＞
                  主體內容
              ＜/div＞
              ＜div class=＂modal-footer＂＞
                    ＜button type=＂button＂ class=＂btn btn-secondary＂ data-dismiss=
    ＂modal＂＞關閉＜/button＞
              ＜/div＞
            ＜/div＞

      ＜/div＞
  ＜/div＞

此例中，除了在按鈕中設置＂data-toggle=′modal′ data-target=′#myModal′ ＂來實現點擊之后出現彈窗外，還可以使用JavaScript代碼來手動控制彈窗的開關，具體如下：

    $（function（）{
        $（＂#btn＂）. click（function（）{
            $（＂#myModal＂）. modal（＂show/hide＂）; //show表示出現彈窗，hide表示
    關閉彈窗
        }）
    }）