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等技术综合起来解决这一问题的，实现过程复杂，在团体开发中难以保证统一性，而且代码的复用性也不够理想。基于jQuery的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表示
    关闭弹窗
        }）
    }）