使用原生 JavaScript 编码存在问题
1 选择器功能弱
2 DOM 操作繁琐之极
3 浏览器兼容性不好
4 动画功能弱
jQuery 的优点
1 强大的选择器
2 出色的 DOM 封装
3 出色的浏览器兼容性
4 强大的动画功能
5 体积小，压缩后只有 100KB 左右
6 可靠的事件处理机制
7 使用隐式迭代简化编程
8 丰富的插件支持
什么是 jQuery?
目前最流行的 JavaScript 函数库之一，对 JavaScript 进行了封装。并不是
一门新语言。将常用的、复杂的操作进行函数化封装，直接调用，大大降低了使
用 JavaScript 的难度，改变了使用 JavaScript 的习惯。jQuery 能做的 JavaScript
也能做，但使用 jQuery 能大幅提高开发效率,由美国人 John Resig 在 2006 年
推出，目前最新版本是 v3.5.1。宗旨：Write less，do more（写更少代码，
做更多事情）。官方网址 http://jquery.com/
关于 jQuery 的使用需要先导入 jQuery 的 js 文件,jQuery 本身就是一个 JS
文件。jQuery.min.js 是 jQuery 文件的压缩版,生产环境下推荐压缩版,$是
jQuery 是使用最多的符号，它有多个作用。这个示例中就使用了$的两个作用。
作用 1：页面加载函数
jQuery(document).ready(function(){}); 和
$(document).ready(function({})); 简 写 为 $(function(){}), 相 当 于
window.οnlοad=function(){} 但 是 功 能 比 window.onload 更 强 大
window.onload 一 个 页 面 只 能 写 一 个 , 但 是 可 以 写 多 个 $() 而 不 冲
突,window.onload 要等整个页面加载完后再执行(包括图片、超链接、音视频
等)，但是$()的执行时间要早
作用 2：选择器标志 $(selector)
选择器。jQuery 具有强大的选择器功能，后面会有专门章节进行介绍
2_jQuery 选择器
2_1 基本选择器
jQuery 提供了丰富的选择器功能，这个是 jQuery 相比 JavaScript 的一大
优势。我们先来看一下 jQuery API。可以看到提供了众多的选择器，可以非常
方便简单的获取要选择的内容。
问题：JavaScript 是如何直接获取要选择的内容的
getElementById( ) ：返回一个节点对象
getElementsByName( )：返回多个（节点数组）
getElementsByTagName( ) ：返回多个（节点数组）
jQuery 的选择器功能要强大的多
基本选择器
标签选择器 $("a")
ID 选择器 $("#id") $("p#id")
类选择器 $(".class") $("h2.class")
通配选择器 $("*")
并集选择器$("elem1,elem2,elem3")
后代选择器$(ul li)
父子选择器 $(ul>li)
后面第一个兄弟元素 prev + next
后面所有的兄弟元素 prev ~ next
这些选择器其实我们并不陌生，因为在讲解 CSS 样式中都有类似的选择器，
并且其含义也是一样的。不同的在 CSS 中是对选择的内容定义 CSS 样式，在
jQuery 中用来选择内容并后续进行更多的下步操作。
JSP 全名为 Java Server Pages，中文名叫 java 服务器
页面，
43. 其根本是一个简化的<span>Servlet</span>
设计， 它[1] 是
44. 由 Sun Microsystems 公司倡导、许多公司参
与一起建立的一种
45. 动态网页技术标准。JSP 技术有点类似 ASP 技
术，它是在传统的网
46. 页<em><span>HTML</span></em>（标准通用
标记语言的子集）
47. 文件(*.htm,*.html) 中插入 Java 程序段
(Scriptlet)和 JSP
48. 标记(tag)，从而形成 JSP 文件，后缀名为
(*.jsp)。 用 JSP 开发
49. 的 Web 应用是跨平台的，既能在 Linux 下运
行，也能在其他操作系
50. 统上运行。
2_2 属性选择器
属性选择器
[attribute] 匹配包含给定属性的元素
[attribute1][attribute2] 复合属性选择器，需要同时满足多个属性
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有属性不等于特定值的元素
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
位置选择器
位置选择器
针对整个页面而言的位置选择器
:first 获取第一个元素
:last 获取最后一个元素
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:eq(n) 匹配一个给定索引值的元素
:gt(n) 匹配所有大于给定索引值的元素
:lt(n) 匹配所有小于给定索引值的元素
针对上级标签而言的位置选择器
:first-child 匹配第一个子元素
:last-child 匹配最后一个子元素
:only-child 如果某个元素是父元素中唯一的子元素，将会被匹配
:nth-child(n) :nth-child(odd|even) :nth-child(xn+y) 匹配其父元素下的第
N 个子或奇偶元素
注意：nth-child()选择器编号是从 1 开始，而其他选择器从 0 开始
2_4 表单选择器
表单选择器
关于表单项的选择器
:text :password :radio :checkbox :hidden :file :submit
:input 匹配所有 input, textarea, select 和 button 元素
关于表单项状态的选择器
:selected :checked :enabled :disabled :hidden :visible
注意$("input")和$(":input")的区别
$("input")：标签选择器，只匹配 input 标签,$(":input")： 匹配所有 input,
textarea, select 和 button 元素
jQuery 操作属性和样式
jQuery 操作属性和样式
操作属性
原生 js 中的通过元素.属性名或者元素.setAttribute()方式操作元素属
性,jQuery 给我们封装了 attr() 和 removeAttr(),更加便捷的操作属性
原生 js 中的通过元素.style.样式名=’样式值’的方式操作元素样式,jQuery 给
我们封装了 css()方法,便于我们操作样式,多数情况样式选择器使用类选择器,所
以 jQuery 针对于这一情况,给我们封装了 addClass removeClass
toggleClass 三个方法
jQuery 操作文本和增删元素
jQuery 操作文本和增删元素
操作文本
原生 js 中的通过元素.innerText 和 innerHTML 和.value 属性操作标签内部
文本和内容,jQuery 给我们封装了 text(),html()和 val()三个方法
DOM 对象和 jQuery 对象转换
jQuery 对象和 DOM 对象的转换
使用原生 JS 方式获得的页面结点对象我们可以简称为 DOM 对象,使用 jQuery
核心函数获得的对象我们可以简称为 jQuery 对象,这两种方式获得的对象即是
是页面上同一个元素,那么也是不一样的,二者之间的 API 是不通用的.而在某些情
况下,我们往往无法选择接收的对象,只能被动使用,那么这个时候我们可以让二
者实现转换,以达到可以调用 API 实现功能的目的
1.对于表单的提交，要给 form 标签绑定 onSubmit 事件，而不是给 submit
按钮绑定 onClick 事件,onsubmit 绑定的方法时要有 return 关键字,绑定的方
法要返回 true/false
2.表单项内容不管输入的是字符串、数字、日期，js、jQuery、JSP 接收后
都是 String 类型
3.表单的验证和 String 对象有密切关系 length charAt(i) indexOf("@")
4.如果表单项内容为空，js 收到的不是 null，而是空字符串。判断条件不能
写 username == null，而要写 username==""或 username.length ==0
5. 验 证 出 错 要 return false ， 验 证 无 错 要 return true ， 并 且
οnsubmit="return checkForm()
6.该示例的缺点主要在于对于邮箱如果采用传统方式进行验证，代码繁
琐并且不能保证严谨性,过度依赖 String 的 API。对于邮箱、手机号码、邮政编
码等验证，可以使用正则表达式进行验证，严谨而且简单。
什么是正则表达式
Regular Expression，在代码中常简写为 regex,正则表达式使用单个字符
串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里，正则
表达式通常被用来检索、替换那些符合某个模式的文本。正则表达式是对字符串
（包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”））
操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组
合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过
滤逻辑。正则表达式是一种文本模式，该模式描述在搜索文本时要匹配的一个或
多个字符串。
为什么使用正则表达式
正则表达式可以是文本的校验的代码更加简洁
正则表达式可以实现更加严谨细致的校验
正则表达式举例
匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}
匹配腾讯 QQ 号：[1-9][0-9]{4,}
匹配中国邮政编码：\d{6}
匹配身份证：\d{15}|\d{18}
匹配由数字和 26 个英文字母组成的字符串 ^[A-Za-z0-9]+$
匹配 Email 地址：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
匹配中文字符的正则表达式： [\u4e00-\u9fa5] [a-zA-Z]
如何创建正则表达式
正则表达式在 JS 中创建的语法为:
var reg=/china/;
var reg=new RegExp("china");
ootstrap 介绍
Bootstrap 是美国 Twitter 公司的设计师 Mark Otto 和 Jacob Thornton 合作
基于 HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得
Web 开发更加快捷。Bootstrap 提供了优雅的 HTML 和 CSS 规范，它即是由
动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上
的热门开源项目，包括 NASA 的 MSNBC（微软全国广播公司）的 Breaking
News 都使用了该项目。国内一些移动开发者较为熟悉的框架，如 WeX5 前端
开源框架等，也是基于 Bootstrap 源码进行性能优化而来.
版本情况:
目前使用较广的是版本 2、3 和 4，其中 2 的最新版本的是 2.3.2，3 的最新版本
是 3.4.1，4 的最新版本是 4.5.1,在 2018 年 1 月下旬，Bootstrap 团队发布了
Bootstrap 4 正式版，4 的最主要变化包括以下方面：
从 Less 迁移到 Sass
改进网格系统
缺省弹性框支持
Dropped wells, thumbnails, and panels for cards
合并所有 HTML resets 到一个新的模块中：Reboot
全新自定义选项
不再支持 IE8
重写所有的 JavaScript 插件
改进工具提示和 popovers 的自动定位
改进文档
其他大量改进
bootstrap 有什么优点?
移动设备优先：
自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：
容易上手:
只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
快速开发:
bootstrap 给我提供了大量的样式,布局解决方案和插件库,可以让程序员从基
本的样式设计和调试上解放,快速搭建项目.同时 bootstrap 还给我们提供了大
量的常用网页组件,可以让我们直接复制代码后,简单修改即可使
用.ctrl-c ctrl-v
响应式设计：
Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
除此之外：
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。
bootstrap 怎么用?
接下来我们下载 bootstrap,认识一下它的目录结构,搭建一个使用 bootstrap
的项目
所有的主流浏览器都支持 Bootstrap。
6_2Bootstrap 项目搭建
boostrap 中文网:https://www.bootcss.com/
boostrap4 下载地
址:https://v4.bootcss.com/docs/getting-started/download/
生产环境下选择预编译的 CSS 和 JS 文件,这是压缩处理之后的文件,体积小,学习
阶段可以选择源码文件,包含构建工具等,我们这里选择预编译即可
搭建 bootstrap 项目
创建项目,将 bootstrap 中的 css 下的文件复制进项目的 css 目录中,bootstrap js
目录中的文件复制进入项目的 js 目录中,截图如下
创建 HTML 文件,在 HTML 文件中引入 bootstrap 中的 css 样式文件和 JS 文件
如果不想下载 bootstrap,可以使用在线资源加载 bootstrap,但是会受限于网络
环境
从 boostrap 中文网中,选择组件,将代码复制粘贴进入我们的网页即可
如果出现下图,说明 bootstrap 项目搭建成功
总结:
1 bootstrap 是一款优秀的前端框架,它能够让我们快速搭建项目,现有大量样式
库可以供我们使用,可以帮助我们实现快速开发,使用 bootstrap 的感受基本上就
是 ctrl+c 然后 ctrl+v ,修改一下就可以实现前端页面的快速开发
2 bootstrap 在导入 js 文件时,要求顺序是先导入 jQuery,然后是 popper.js(包含
于 bootstrap.bundle.min.js 中),最后是 bootstrap.min.js
3 不同的版本对于 jQuery 版本的要求时不一致的,导入时要注意 jQuery 的版本
<h1 style="background-color: gainsboro;">我的第一个 Bootstrap 页面</h1>
<p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p>
</div>
二者区别:
固定容器的响应式布局规则是当窗口大小变化时,在指定的宽度范围内使用固定
的宽度,
流容器的响应式布局规则是随着窗口大小的变化一同变化,横向全部占满
固定容器的阈值如下图:
6_4 栅格系统
Bootstrap 栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视
口（viewport）尺寸的增加，系统会自动分为最多 12 列。我们也可以根据自
己的需要定义列数.
网格类
Bootstrap 4 网格系统有以下 5 个类:
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
网格系统规则
Bootstrap4 网格系统规则:
1 网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全
屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
2 使用行来创建水平的列组 class=row。
3 内容需要放置在列中，并且只有列可以是行的直接子节点。
4 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
5 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边
距设置第一行和最后一列的偏移。
6 网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，
需要使用三个.col-sm-4 来设置。
7 Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用
flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽
度的网格列将自动设置为等宽与等高列 。 如果您想了解有关 Flexbox 的更
多信息，可以阅读我们的 CSS Flexbox 教程。
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title></title>
6. <!--移动端优先的配置-->
7. <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
8. <!--bootstrap 的样式库-->
9. <link rel="stylesheet"
href="css/bootstrap.min.css" >
10. <!--jQuery-->
11. <script src="js/jquery-3.5.1.min.js"></script>
12. <!--popper-->
13. <script
src="js/bootstrap.bundle.min.js" ></script>
14. <!--核心 js 文件-->
15. <script src="js/bootstrap.min.js" ></script>
16. </head>
17. <body>
18. <div class="container">
19. <div class="row">
20. <div class="col-sm-2"
style="background-color: lavender;border:1px solid #117A8B;">
21. One of three columns
22. </div>
23. <div class="col-sm-8"
style="background-color: lavender;border:1px solid #117A8B;">
24. One of three columns
25. </div>
26. <div class="col-sm-2"
style="background-color: lavender;border:1px solid #117A8B;">
27. One of three columns
28. </div>
29. </div>
30.
31. <div class="row">
32. <div class="col-sm-1"
style="background-color: lavender;border:1px solid #117A8B;">
33. One of three columns
34. </div>
35. <div class="col-sm-4"
style="background-color: lavender;border:1px solid #117A8B;">
36. One of three columns
37. </div>
38. <div class="col-sm-7"
style="background-color: lavender;border:1px solid #117A8B;">
39. One of three columns
40. </div>
41. </div>
42. </div>
43.
44.
45. </body>
46. </html>
47.
6_5 案例开发之导航栏
Bootstrap 案例开发之导航栏
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title></title>
6. <!--移动端优先的配置-->
7. <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
8. <!--bootstrap 的样式库-->
9. <link rel="stylesheet"
href="css/bootstrap.min.css" >
10. <!--jQuery-->
11. <script src="js/jquery-3.5.1.min.js"></script>
12. <!--popper-->
13. <script
src="js/bootstrap.bundle.min.js" ></script>
14. <!--核心 js 文件-->
15. <script src="js/bootstrap.min.js" ></script>
16. </head>
17. <body>
18. <div class="container">
19. <h2>欢迎进入马士兵教育</h2>
20. <br>
21. <!-- Nav pills -->
22. <ul class="nav nav-pills"
role="tablist">
23. <li class="nav-item">
24. <a class="nav-link
active" data-toggle="pill" href="#home">主页</a>
25. </li>
26. <li class="nav-item">
27. <a class="nav-link"
data-toggle="pill" href="#menu1">讲师介绍</a>
28. </li>
29. <li class="nav-item">
30. <a class="nav-link"
data-toggle="pill" href="#menu2">课程介绍</a>
31. </li>
32. <li class="nav-item">
33. <a class="nav-link"
data-toggle="pill" href="#menu3">优秀学员</a>
34. </li>
35. </ul>
36.
37. <!-- Tab panes -->
38. <div class="tab-content">
39. <div id="home"
class="container tab-pane active" style="border: 10px solid
red;"><br>
40. <h3>我们公司</h3>
41. <p>Lorem ipsum dolor
sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
42. </div>
43. <div id="menu1"
class="container tab-pane fade" style="border: 10px solid
green;"><br>
44. <h3>我们的优秀讲师
</h3>
45. <p>Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
46. </div>
47. <div id="menu2"
class="container tab-pane fade" style="border: 10px solid
yellow;"><br>
48. <h3>我们的课程</h3>
49. <p>Sed ut perspiciatis
unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam.</p>
50. </div>
51. <div id="menu3"
class="container tab-pane fade" style="border: 10px solid
blueviolet;"><br>
52. <h3>优秀学员</h3>
53. <p>Sed ut perspiciatis
unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam.</p>
54. </div>
55. </div>
56. </div>
57. </body>
58. </html>
