第3章
Web客户端进阶
本章学习目标
了解jQuery
了解Bootstrap
通过HTML、CSS、JavaScript原生代码编写Web客户端会出现代码量大、杂乱等缺点，因此Web客户端还可以通过jQuery和Bootstrap两个框架来简化开发，从而提高开发效率。本章主要讲解jQuery和Bootstrap的内容。
3.1jQuery
在Web客户端开发中直接使用JavaScript进行开发，虽然工作都能完成，但效率明显不高。jQuery将一些常用的JavaScript内容进行了封装，因此使用jQuery可以轻松、高效地对Web客户端进行开发。
3.1.1jQuery简介与使用
jQuery提供一种简便的JavaScript设计模式来实现HTML文档操作、事件处理、动画设计和Ajax交互的优化。jQuery的设计宗旨是“Write Less;Do More”，即“用最少的代码，完成更多的事情”。
jQuery的使用步骤如下：
(1) 下载jQuery，并放在项目的static文件夹中。
(2) 在文件中引入jquery3.2.1.min.js文件。
(3) 使用其中封装的函数，直接编写代码。
接下来演示jQuery的使用，如例31所示。
【例31】jQuery的使用
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>jquery 使用</title>
6<script src="static/js/jquery-3.2.1.min.js"></script>
7<script type="text/JavaScript">
8$(document).ready(function () {
9$("p").click(function () {
10$(this).hide();
11});
12});
13</script>
14</head>
15<body>
16<div>
17<span>单击千锋或1000phone，立即隐藏，单击好程序员不隐藏</span>
18</div>
19<div>
20<p>千锋</p>
21<p>1000phone</p>
22</div>
23<div>
24<span>好程序员</span>
25</div>
26</body>
27</html>
例31运行结果如图3.1所示。
图3.1例31运行结果图
单击【千锋】，运行结果如图3.2所示。
图3.2单击【千锋】运行结果
再单击【1000phone】，运行结果如图3.3所示。
图3.3单击【1000phone】运行结果
单击【好程序员】则没有变化。
例31代码是jQuery的简单使用，使<p>标签内的内容单击以后隐藏，其他内容不作任何处理。
3.1.2jQuery选择器
jQuery中的选择器与CSS中类似，只是jQuery中使用更丰富，具体如表3.1所示。
表3.1jQuery选择器
选择器
举例
作用
*
$("*")
所有元素
#id
$("#lastname")
id="lastname"的元素
.class
$(".intro")
所有class="intro"的元素
element
$("p")
所有<p>元素
.class.class
$(".intro.demo")
所有class="intro"且class="demo"的元素
:first
$("p:first")
第一个<p>元素
:last
$("p:last")
最后一个<p>元素
:even
$("tr:even")
所有偶数<tr>元素
:odd
$("tr:odd")
所有奇数<tr>元素
:eq(index)
$("ul li:eq(3)")
列表中的第四个元素(index从0开始)
:gt(no)
$("ul li:gt(3)")
列出index大于3的元素
:lt(no)
$("ul li:lt(3)")
列出index小于3的元素
:not(selector)
$("input:not(:empty)")
所有不为空的input元素
:header
$(":header")
所有标题元素<h1> <h6>
:contains(text)
$(":contains('W3School')")
包含指定字符串的所有元素
:empty
$(":empty")
无子(元素)节点的所有元素
:hidden
$("p:hidden")
所有隐藏的<p>元素
:visible
$("table:visible")
所有可见的表格
s1,s2,s3
$("th,td,.intro")
所有带有匹配选择的元素
［attribute］
$("［href］")
所有带有href属性的元素
3.1.3jQuery action
jQuery action实质上指的是jQuery的行为，即通过某些方法使整个网站实现动态效果，增加美感，最终达到开发要求。
1. jQuery效果
jQuery封装了实现网页动态效果的一些方法，具体如表3.2所示。
表3.2jQuery效果方法
方法
描述
举例
hide(speed,callback)
隐藏id为hide的<p>元素内的内容
$("#hide").click(function(){
$("p").hide();});
show(speed,callback)
显示id为show的<p>元素内的内容
$("#show").click(function(){
$("p").show();});
toggle(speed,callback)
显示被隐藏的元素，并隐藏已显示的元素
$("button").click(function(){
$("p").toggle();});
fadeIn(speed,callback)
淡入已隐藏的元素
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn(1000);});
fadeOut(speed,callback)
淡出可见元素
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut(1000);});
fadeToggle(speed,callback)
元素已淡出，则fadeToggle()会向元素添加淡入效果； 元素已淡入，则fadeToggle()会向元素添加淡出效果
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);});
fadeTo(speed,opacity,callback)
允许渐变为给定的不透明度(值介于0与1之间)
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);});
slideDown(speed,callback)
向下滑动元素
$("#flip").click(function(){
$("#panel").slideDown();});
slideUp(speed,callback)
向上滑动元素
$("#flip").click(function(){
$("#panel").slideUp();});
slideToggle(speed,callback)
元素向下滑动，则可向上滑动它们，
元素向上滑动，则可向下滑动它们
$("#flip").click(function(){
$("#panel").slideToggle();});
jQuery中还有很多实现动画的方法，可以极大地丰富网页内容。
接下来以hide()与show()方法为例来演示jQuery的效果实现，如例32所示。
【例32】jQuery的效果实现
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<script src="static/js/jquery-3.2.1.min.js"></script>
6<script>
7$(document).ready(function(){
8$("#hide").click(function(){
9$("p").hide();
10});
11$("#show").click(function(){
12$("p").show();
13});
14});
15</script>
16</head>
17<body>
18<p>如果单击"隐藏" 按钮，内容将会被隐藏。</p>
19<button id="hide">隐藏</button>
20<button id="show">显示</button>
21</body>
22</html>
例32运行结果如图3.4所示。
图3.4例32运行结果
单击【隐藏】按钮之后运行结果如图3.5所示。
图3.5单击【隐藏】按钮运行结果
再单击【显示】按钮显示结果如图3.6所示。
图3.6再单击【显示】按钮运行结果
例32是实现单击不同的按钮显示不同效果的功能。第5行是引入jQuery。第8~10行是当id为hide的按钮单击以后将<p>标签内容进行隐藏。第11~13行是当id为show的按钮单击以后将<p>标签中隐藏的内容显示出来。
同理，大家可以自己动手尝试编写实现其他效果。
2. jQuery操作DOM
上一节JavaScript内容中讲解了对DOM对象的操作方法，而jQuery对这些操作方法都进行了封装，从而使得操作也更丰富，常用的操作方法如表3.3所示。
表3.3jQuery操作DOM常用方法
方法
描述
.addClass(元素)
为每个匹配的元素添加指定的样式类名
.after(元素)
在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
.append(元素)
在每个匹配元素里面的末尾处插入参数内容
.attr(元素)
获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性
.appendTo(元素)
将匹配的元素插入到目标元素的最后面(内部插入)
.css(元素)
获取匹配元素集合中的第一个元素的样式属性的值。设置每个匹配元素的一个或多个CSS属性
.empty(元素)
从DOM中移除集合中匹配元素的所有子节点
.html()
获取集合中第一个匹配元素的HTML内容。设置每一个匹配元素的html内容
.position()
获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标
.remove(元素)
将匹配元素集合从DOM中删除
.text(元素)
得到匹配元素集合中每个元素的合并文本，包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容
接下来以append()方法为例来演示jQuery操作DOM，如例33所示。
【例33】jQuery操作DOM
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<script src="static/js/jquery-3.2.1.min.js"></script>
6<script>
7$(document).ready(function(){
8$("p").append("<b>用良心做教育</b>");
9});
10</script>
11</head>
12<body>
13<p>千锋教育： </p>
14</body>
15</html>
例33运行结果如图3.7所示。
图3.7例33运行结果
例33是实现在文档末尾添加内容的功能。第5行是引入jQuery。第7~9行是在<p>标签的内容后添加字体加粗的“用良心做教育”。第13行是<body>中的<p>标签，内容是“千锋教育： ”。
同理，大家可以自己动手尝试编写实现其他操作方法。
jQuery框架可以很好地丰富网页，原因是它封装了许多操作网页的方法，大家可以通过jQuery官网对其进行深入的研究学习。
3.1.4jQuery事件
事件是页面对不同访问者的响应。事件处理程序指的是当HTML中发生某些事件时所调用的方法。接下来讲解jQuery事件方法，具体如表3.4所示。
表3.4jQuery事件方法
方法
描述
blur(［［data］,fn］)
触发或将函数绑定到指定元素的blur事件
ready(fn)
文档就绪事件(当HTML文档就绪可用时)
on(eve,［selector］,［data］,fn)
在选择元素上绑定一个或多个事件的事件处理函数
off(eve,［selector］,［fn］)
在选择元素上移除一个或多个事件的事件处理函数
one(type,［data］,fn)
向匹配元素添加事件处理器。每个元素只能触发一次该处理器
trigger(type,［data］)
所有匹配元素的指定事件
triggerHandler(type, ［data］)
第一个被匹配元素的指定事件
hover(［over,］out)
模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态
load()
触发或将函数绑定到指定元素的load事件
toggle(［speed］,［easing］,［fn］)
绑定两个或多个事件处理器函数，当发生轮流的click事件时执行
change(［［data］,fn］)
触发或将函数绑定到指定元素的change事件
click(［［data］,fn］)
触发或将函数绑定到指定元素的click事件
dblclick(［［data］,fn］)
触发或将函数绑定到指定元素的double click事件
error(［［data］,fn］)
触发或将函数绑定到指定元素的error事件
focus(［［data］,fn］)
触发或将函数绑定到指定元素的focus事件
focusin(［data］,fn)
当元素获得焦点时，触发focusin事件
focusout(［data］,fn)
当元素失去焦点时触发focusout事件
keydown(［［data］,fn］)
触发或将函数绑定到指定元素的key down事件
keypress(［［data］,fn］)
触发或将函数绑定到指定元素的key press事件
keyup(［［data］,fn］)
触发或将函数绑定到指定元素的key up事件
mousedown(［［data］,fn］)
触发或将函数绑定到指定元素的mouse down事件
mouseenter(［［data］,fn］)
触发或将函数绑定到指定元素的mouse enter事件
mouseleave(［［data］,fn］)
触发或将函数绑定到指定元素的mouse leave事件
mousemove(［［data］,fn］)
触发或将函数绑定到指定元素的mouse move事件
mouseout(［［data］,fn］)
触发或将函数绑定到指定元素的mouse out事件
mouseover(［［data］,fn］)
触发或将函数绑定到指定元素的mouse over事件
mouseup(［［data］,fn］)
触发或将函数绑定到指定元素的mouse up事件
resize(［［data］,fn］)
触发或将函数绑定到指定元素的resize事件
续表
方法
描述
scroll(［［data］,fn］)
触发或将函数绑定到指定元素的scroll事件
select(［［data］,fn］)
触发或将函数绑定到指定元素的select事件
submit(［［data］,fn］)
触发或将函数绑定到指定元素的submit事件
unload(［［data］,fn］)
触发或将函数绑定到指定元素的unload事件
接下来以on ()方法为例来演示jQuery事件操作，如例34所示。
【例34】jQuery事件操作
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<script src="static/js/jquery-3.2.1.min.js"></script>
6<script>
7$(document).ready(function() {
8$("p").on("click", function () {
9alert($(this).text());
10});
11});
12</script>
13</head>
14<body>
15<p>千锋教育</p>
16<p>好程序员</p>
17<p>扣丁学堂</p>
18</body>
19</html>
例34运行结果如图3.8所示。
图3.8例34运行结果
单击【千锋教育】，运行结果如图3.9所示。
图3.9单击“千锋教育”运行结果
单击“好程序员”，运行结果如图3.10所示。
图3.10单击“好程序员”运行结果
单击“扣丁学堂”，运行结果如图3.11所示。
图3.11单击“扣丁学堂”运行结果
例34是使用on()函数实现事件绑定的功能。第5行是引入jQuery。第7~11行是使用on()函数绑定<p>标签的click事件，单击<p>标签，则弹出标签<p>中的内容。第15~17行是<body>中的<p>标签。
同理，大家可以自己动手尝试编写实现其他事件绑定方法。
3.1.5jQuery Ajax
异步的JavaScript和XML(Asynchronous JavaScript and XML，Ajax)是用来实现异步传输数据的技术，即在网页不刷新的情况下进行数据传送。jQuery中主要使用函数$.ajax()来实现Ajax技术，$.ajax()函数包含很多参数。接下来讲解$.ajax()函数中常用参数的作用及jQuery中Ajax技术的使用。
1. 回调函数
Web中，Ajax技术主要是进行数据的传送，若要处理Ajax得到的数据，需要使用以下几种回调函数：
beforeSend： 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error： 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象(如果存在异常情况)。
dataFilter： 在请求成功之后调用。传入返回的数据以及dataType参数的值，并且必须返回新的数据(可能是处理后的)传递给success回调函数。
success： 在请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete： 在请求完成之后调用，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。
2. 数据类型
参数dataType是指定服务器返回的数据类型，参数类型为String。如果未指定类型，jQuery将自动根据http包mime的信息返回responseXML或responseText，并作为回调函数的参数进行传递。
其中可指定的类型有以下6种：
xml： 返回XML文档，可用jQuery处理。
html： 返回纯文本HTML信息； 包含的script标签会在插入DOM时执行。
script： 返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意： 在远程请求时(不在同一个域下)，所有post请求都将转为get请求。
json： 返回JSON数据。
jsonp： JSONP格式。使用JSONP形式调用函数时，例如myurl?callback=?，jQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text： 返回纯文本字符串。
3. 其他常用参数
url： 发送请求的地址(默认为当前页地址)，参数类型为String。
type： 请求方式(post或get)默认为get，参数类型为String。其他http请求方法，如put和delete也可使用，但仅部分浏览器支持。
data： 发送到服务器的数据，参数类型为Object或String。如果不是字符串，将自动转换为字符串。get请求将data附加在url后。对象必须为key/value格式，如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，jQuery将自动将不同值对应同一个名称，如{foo:［"bar1","bar2"］}转换为&foo=bar1&foo=bar2。
4. 使用
$.ajax()函数的使用示例如下：
$.ajax({
type: "POST",
url: "test.py",
data: {name: "1000phone",location: "BeiJing" },
success: function(msg){
alert( "Data Saved: " + msg );
}
});
上述示例是通过$.ajax()函数实现使用POST方式请求test.py文件并将data中的数据保存到服务器中，成功之后显示保存的数据的功能。
3.2Bootstrap
3.2.1Bootstrap简介
Bootstrap是Twitter设计师Mark Otto和Jacob Thornton合作开发的前端框架，也是目前最受欢迎的前端框架。Bootstrap基于HTML、CSS、JavaScript，它简洁灵活，使Web开发更加快捷。
Bootstrap之所以如此受欢迎，是因为它有以下优点：
适配移动端和PC端，并以移动设备优先。
所有主流浏览器都支持Bootstrap。
容易上手。
响应式设计。
为开发人员创建接口提供了一个简洁统一的解决方案。
包含了功能强大的内置组件，易于定制。
提供了基于Web的定制。
开源。
Bootstrap的安装及使用都非常简单，接下来分步骤讲解Bootstrap的安装与使用。
1. 下载Bootstrap
下载地址： http://www.bootcss.com/，即Bootstrap中文网首页，如图3.12所示。
图3.12Bootstrap中文网首页
单击【Bootstrap3中文文档(v3.3.7)】按钮，进入下载接入页如图3.13所示。
图3.13下载接入页
单击【下载Bootstrap】进入下载页面，如图3.14所示。
图3.14Bootstrap下载页
在图3.14中，有三种形式的Bootstrap，本书选择第一种下载，即单击【下载Bootstrap】即可下载。
2. 解压下载文件
解压后文件如图3.15所示。
bootstrap
├─css
│bootstrap.css
│bootstrap.css.map
│bootstrap.min.css
│bootstrap.min.css.map
│bootstraptheme.css
│bootstraptheme.css.map
│bootstraptheme.min.css
│bootstraptheme.min.css.map
│
├─fonts
│glyphiconshalflingsregular.eot
│glyphiconshalflingsregular.svg
│glyphiconshalflingsregular.ttf
│glyphiconshalflingsregular.woff
│glyphiconshalflingsregular.woff2
│
└─js
bootstrap.js
bootstrap.min.js
图3.15解压后文件
其中css文件夹中常用的两个文件是bootstrap.css和bootstrap.min.css； js文件夹中常用的两个文件是bootstrap.js和bootstrap.min.js。
3. 复制解压后的文件
将解压后的文件夹复制到项目中即可使用。
4. Bootstrap使用
接下来以一个简单实例来讲解Bootstrap的使用，如例35所示。
【例35】Bootstrap的使用
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>Bootstrap测试</title>
6<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
7<script src="static/js/jquery.min.js"></script>
8<script src="bootstrap/js/bootstrap.min.js"></script>
9</head>
10<body>
11<h1>Hello, world!</h1>
12</body>
13</html>
Bootstrap和jQuery的相关文件需要导入项目，如图3.16所示。
图3.16导入Bootstrap和jQuery
例35运行结果如图3.17所示。
图3.17例35运行结果
图3.17是例35的运行结果图。第5行是链入Bootstrap中css文件，第6行是引入jQuery，第7行是引入Bootstrap中js文件，最终使<h1>标签中的内容更优美地显示在浏览器中。
Bootstrap的功能强大，内容较多，因此本章将讲解Bootstrap中较为重要的两部分内容——全局CSS样式和组件。
3.2.2Bootstrap全局CSS样式
一个网站的搭建，首先要对整个网站进行布局，Bootstrap提供了非常便利的响应式、移动设备优先的栅格系统来对网站进行布局，使网站不仅布局美观还可适配不同的屏幕大小。
栅格系统将整个网页分成最多12列，设计者可以根据内容来选择所占比例，其中栅格参数如表3.5所示。
表3.5栅格参数
超小屏幕
(<768px)
小屏幕
(≥768px)
中等屏幕
(≥992px)
大屏幕
(≥1200px)
栅格系统行为
总是水平排列
开始堆叠在一起，当大于这些阈值时将变为水平排列
.container容器最大宽度
None(自动)
750px
970px
1170px
类前缀
.colxs
.colsm
.colmd
.collg
续表
超小屏幕
(<768px)
小屏幕
(≥768px)
中等屏幕
(≥992px)
大屏幕
(≥1200px)
列(column)数
12
最大列(column)宽
自动
~62px
~82px
~97px
槽(gutter)宽
30px(每列左右均有15px)
可嵌套
是
偏移(Offsets)
是
列排序
是
接下来以一个简单的实例来讲解响应式栅格系统的使用，如例36所示。
【例36】响应式栅格系统的使用
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>栅格系统测试</title>
6<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
7<script src="bootstrap/js/bootstrap.min.js"></script>
8</head>
9<body>
10<div class="row">
11<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
12<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
13</div>
14</body>
15</html>
例36运行结果如图3.18所示。
图3.18例36运行结果
当页面变为手机端时显示结果如图3.19所示。
图3.19手机端显示
例36是实现使用响应式的栅格系统来设计网页。第6行是链入Bootstrap中css文件； 第7行是引入Bootstrap中js文件； 第11行是当页面大于768px时<div>标签中内容占8列，当页面小于768px时<div>标签中内容占12列； 第12行是当页面大于768px时<div>标签中内容占4列，当页面小于768px时<div>标签中内容占6列。
注意： Bootstrap全局CSS样式中还有其他丰富的内容，可以借助官网进行学习。
3.2.3Bootstrap组件
1. 导航栏
导航栏是每个网站必备的内容，接下来以一个简单的实例来讲解Bootstrap中导航栏的实现，如例37所示。
【例37】Bootstrap中导航栏的实现
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>导航栏</title>
6<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
7<script src="static/js/jquery-3.2.1.min.js"></script>
8<script src="bootstrap/js/bootstrap.min.js"></script>
9</head>
10<body>
11<nav class="navbar navbar-expand-md bg-dark navbar-dark">
12<!-- Brand -->
13<a class="navbar-brand" href="#">千锋教育</a>
14<!-- Toggler/collapsibe Button -->
15<button class="navbar-toggler" type="button"
16data-toggle="collapse" data-target="#collapsibleNavbar">
17<span class="navbar-toggler-icon"></span>
18</button>
19<!-- Navbar links -->
20<div class="collapse navbar-collapse" id="collapsibleNavbar">
21<ul class="navbar-nav">
22<li class="nav-item">
23<a class="nav-link" href="#">好程序员</a>
24</li>
25<li class="nav-item">
26<a class="nav-link" href="#">扣丁学堂</a>
27</li>
28<li class="nav-item">
29<a class="nav-link" href="#">IT培训</a>
30</li>
31</ul>
32</div>
33</nav>
34</body>
35</html>
例37运行结果如图3.20所示。
图3.20例37运行结果
当页面小于768px时显示界面如图3.21所示。
图3.21页面小于768px界面
单击右侧“三根横线”按钮显示结果如图3.22所示。
图3.22单击右侧按钮显示结果
例37实现了使用Bootstrap编写网站导航栏。第11行是包含整个导航栏的<nav>标签； 第13行一般是网站所特有的商标，此处以文字“千锋教育”代替； 第15~18行是当页面小于768px时页面显示的如图3.21所示右侧的按钮； 第20~32行是整个导航栏的主体内容，包括“好程序员”“扣丁学堂”“IT培训”。
2. 分页
当网站需要显示的数据量比较大时，需要进行分页展示，Bootstrap提供了样式更优美的分页功能。接下来以一个简单的实例讲解分页的实现，如例38所示。
【例38】分页的实现
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>分页</title>
6<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
7<script src="bootstrap/js/bootstrap.min.js"></script>
8<script src="static/js/jquery-3.2.1.min.js"></script>
9</head>
10<body>
11<nav aria-label="Page navigation">
12<div class="container">
13<h2>分页</h2>
14<ul class="pagination">
15<li class="page-item"><a class="page-link" href="#">«</a></li>
16<li class="page-item"><a class="page-link" href="#">1</a></li>
17<li class="page-item"><a class="page-link" href="#">2</a></li>
18<li class="page-item"><a class="page-link" href="#">3</a></li>
19<li class="page-item"><a class="page-link" href="#">»</a></li>
20</ul>
21</div>
22</nav>
23</body>
24</html>
例38运行结果如图3.23所示。
图3.23例38运行结果
例38是实现分页功能。第14行是整个分页的开始，标签<ul>中pagination类是标注分页的； 第15~19行是分页的页数及链接内容。
注意： Bootstrap中还有其他丰富的组件内容，可以借助官网进行学习测试，并最终运用到实际开发中。Bootstrap可能在不同的浏览器中适配情况不太一致，本书选用的是火狐浏览器。
3.3本 章 小 结
本章主要是讲解Web客户端进阶的内容，包括jQuery和Bootstrap框架。在开发过程中合理运用以上两个框架可达到事半功倍的效果。jQuery和Bootstrap框架还有很多丰富的内容，需要大家多掌握应用。
3.4习题
1. 填空题
(1) Web客户端常用的两个框架是和。
(2) jQuery action实质上指的是。
(3) JavaScript中最常用的框架是。
(4) 是用来实现异步传输数据的技术，即在网页不刷新的情况下进行数据传送。
(5) 栅格系统将整个网页分成最多列。
2. 选择题
(1) 下列选项中，()不属于jQuery选择器。
A. #idB. .class
C. 。D. *
(2) 当屏幕小于768px时，栅格系统的()类前缀起作用。
A. colmdB. colsm
C. colxsD. collg
(3) 下列回调函数中，()是在请求出错时调用。
A. errorB. success
C. completeD. dataFilter
(4) jQuery的设计宗旨是()。
A. “Life is short, I use Python”B. “stay hungry stay foolish”
C. “Write Less，Do More”D. “talk is cheap, show me your code”
(5) 下列选项中，()不属于jQuery事件。
A. on()B. trigger()
C. click()D. toggle()
3. 思考题
(1) 简述jQuery的概念，并简要讲解jQuery的使用步骤?
(2) 简述Ajax的概念？
4. 编程题
使用jQuery和Bootstrap编写一个动态网页，包括导航栏和jQuery的事件操作。