Java

第三阶段模块一前端入门(HTML、CSS、JS)
第三阶段模块二前端高级(jQuery、ES6、Bootstrap)

第三阶段模块一前端入门(HTML、CSS、JS)

任务一 (HTML)

– 老孙

1、HTML 介绍与规范

介绍

HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language)
专门制作网页的计算机语言
普通的文本就是英文单词，英文字母一样的存在。
超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。
比如：我们都是普通人，但是有些人经过国家的选拔，穿上警服之后，他就被赋予了执法的特殊权利，普通人是没有执法权的。
标记/标签：字母img只是普通的字母，没什么特殊的含义。而<img>被加上尖括号后，在网页的世界中，就具备了显示图片的作用。

使用记事本开发第一个网页

在计算机任意的位置，创建一个空白的记事本
重点：文件的后缀名必须是 “htm” 或 “html”
鼠标右键文件，选择打开方式为"记事本"，输入下面代码

<html>
	<head>
		<title>拉钩有我</title>
	</head>
	<body>
		必须火！
	</body>
</html>

保存文件，双击文件会以计算机默认的浏览器运行，你的第一个网页就制作完成了！
注意：
1.<html>标签它代表当前页面是一个HTML
2.<head>标签中可以声明HTML页面的相关信息
3.<body>标签中它主要是用于显示页面信息
4.标签要有开始，有结束，成双成对
4.开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭<br/>
5.大多数标签它具有属性,属性值要使用引号引起来。
6.HTML它本身是不区分大小写的。

下载和安装 VSCode

记事本编写网页太难了，我们推荐一款编写网页的神器！

1. 下载地址

https://code.visualstudio.com/

2. 初始中文设置

安装vscode之后，在界面的左侧，选择安装中文插件。
点击安装后，右下角会弹出重启的窗口
重启之后，界面就是中文了。

3. 创建项目

vscode本身没有新建项目的选项，所以要先创建一个空的文件夹，如: vscode目录然后打开vscode软件，在vscode软件中选择 File -> Open Folder 打开刚才创建的文件夹右键目录，创建子目录lagou-html，在lagou-html目录下创建文件，输入Test1.html在代码编辑区，最上面输入！回车，就是见证奇迹的时刻

4. 运行页面

需要安装插件 “open in browser ”
安装完插件，右键想要运行的页面文件，或者使用快捷键 alt+b
推荐使用chrome谷歌浏览器，精简，速度快。
先安装好chrome浏览器
修改默认的浏览器：首页的设置
添加代码
"open-in-browser.default":"chrome"
保存成功后，使用默认浏览器打开页面就是chrome了，当然你也可以修改成自己喜欢的浏览器，比如火狐等

5. 修改软件主题颜色

文件 -> 首选项 -> 颜色主题
字体大小：文件 -> 首选项 -> 设置 -> 文本编辑器 -> 字体

2、HTML 的使用

文件标签

<html> 标签：代表当前书写的是一个HTML文档
<head> 标签：存储的本页面的一些重要的信息，它不会显示
<head> 标签：有一个子标签<title>它是用于定义页面的标题的
<body> 标签：书写的内容会显示出来
<body> 标签的属性
1.text 用于设置文字颜色
2.bgcolor 用于设置页面的背景色
3.background 用于设置页面的背景图片

排版标签

1. HTML注释

2. 换行标签

<br/> 标签就是一个换行（回车）功能标签，标签中的 / 可有可无的。
有/是html语言的标准化，但是html语言是一门不那么严谨的语言

3. 段落标签

在<p>标签中的内容,会在开始与结束之间产生一个空白行，并且它会自动换行.
常用属性 align 它的作用是设置段落中的内容对齐方式可取值有 left right cente

4. 水平线标签

<hr>标签会在页面上产生一个水平线
对于hr标签它有常用属性:
align：可取值有left right center 代表水平线位置
size：代表水平线厚度（粗细）
width：代表水平线宽度
color：水平线的颜色
单位：size=“5”，5是默认的单位，为"像素"/“像素点”，像素就是构成计算机图片的最小单位！
也可以使用百分比，size=“50%”

5. 分区标签

div是一个块标签，用来进行布局的
（透明衣柜，乱七八糟的衣服，整洁的放在衣柜里）
（块：这一块我站了，后面不允许有其他元素）
普通的div并没有什么效果，肉眼也看不见，但div与CSS结合，就会更好对页面进行排版
div与span都是“容器”的作用，具体区别:
▹ div会自动换行，我们也叫这样的标签为块级元素
▹ span标签它不会自动换行，我们也叫它为行内元素
▹ div：整体划分区块
▹ span：局部划分
上图，两个div的区别是显而易见的，后面我们再具体学习css语法

字体标签

1. 字体标签

<font>标签可以设置字体，字的大小及颜色，常用属性：
face:用于设置字体，例如宋体隶书楷体
size:用于设置字的大小（大小默认设置1-7，7最大，想更大，往后学css即可）
color:用于设置字的颜色
注：
我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。
（红色：分0~255种红色）
（绿色：分0~255种绿色）
（蓝色：分0~255种蓝色）
每一种颜色的饱和度和透明度都是可以变化的，用0～255的数值来表示。如纯红色表示为（255，0，0），十六进制表示为#FF0000。按这种表达方式，理论上我们可以得到256 * 256 * 256 = 16777216种颜色。

使用十六进制方式，取值范围 #000000 ~ #FFFFFF （黑色到白色）。当颜色值为#cc3300 时，可简化成 #c30 这种方式
<body bgcolor="#666">
RGB颜色表示法：RGB（x,y,z）。x、y、z是0 ～ 255之间的整数。rgb字母大小写无所谓
<body bgcolor="rgb(11,11,11)">

（在线颜色选择器： http://www.86y.org/code/colorpicker/color.html ）
百度搜索：字魂网，下载一个免费的字体，并安装到计算机中。在我们的网页中显示出来！

2. 标题标记

给一段文字起一个标题
<h1> ----- <h6>
h1最大 h6最小，它们代表的是标题，
自动换行，字体加粗，标题与标题之间产生一定的距离
注意:在HTML中允许标签进行嵌套的，但是一般都包裹嵌套，而不可以进行交叉嵌套

3. 格式化标签

<b>：字体加粗
<i>：字体倾斜
<del>：~~删除线~~
<u>：下划线

在这里插入图片描述

列表标记

ol：有序列表
type=‘A’：字母排序
type=‘I’：罗马排序
start=“3” 序列从几开始
ul：无序列表
type=“disc”：默认，实心圆
type=“square”：方块
type=“circle”：空心圆

在这里插入图片描述

图像标签

它可以让我们在网页引入一张图片，常用属性：

src 代表的图片的路径
width 图片的宽度 px
height 图片的高度 px
（宽高中只设置一个另外一个等比例变化）
border 用于设置图片的边框 px
alt 如果图片不可以显示时，默认显示的文本信息
title鼠标悬停图片上，默认显示的文本信息
align 图片附件文字的对齐方式，可取值有
left：把图像对齐到左边
right：把图像对齐到右边
middle：把图像与中央对齐
top：把图像与顶部对齐
bottom：把图像与底部对齐（默认）

在这里插入图片描述

超连接标签

<a>标签,可以实现跳转到其它页面操作.
超链接内容不仅可以是文本，也可以是图片等信息
常用属性:
1.href 代表的我们要跳转的路径
2.target 这个属性规定在何处打开这个链接文档，可取值：
_ blank 在新窗口中打开页面
_ self 默认。在本窗口打开页面

在这里插入图片描述

功能性连接：

1.发邮件
<a href="mailto:[email protected]">联系站长</a>
2.QQ聊天窗口
<a href="tencent://message/?uin=19998539&Menu=yes">
	<img border="0" src="http://wpa.qq.com/pa?p=1:615050000:7"/>
</a>

表格

<table>：定义一个表格
○ border：边框，取值是像素为单位
○ width 代表的表格的宽度
○ align 代表表格的对齐方式；取值
▸ left 左对齐表格
▸ right 右对齐表格
▸ center 居中对齐表格
○ cellspacing：单元格间距（通常设置0表示单线表格）
<tr>：表格中的行（Table Row）
○ align 代表表格的对齐方式；取值
▸ left 左对齐内容（默认值）
▸ right 右对齐内容
▸ center 居中对齐内容（th 元素的默认值）
<td>：表格中的数据单元格（Table DataCell）
○ colspan 指示列的合并
○ rowspan 指示行的合并

在这里插入图片描述

<table border="1" width="400px" align="center" cellspacing="0">
	<tr align="center">
		<td colspan="3">计划统计表</td>
	</tr>
	<tr>
		<td rowspan="3">收入金额</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>11</td>
		<td>12</td>
	</tr>
</table>

表单标签

表单可以让我们将录入信息携带到服务器端。
简单说，通过表单可以将要提交的数据提交到指定的位置。
但一个一个的提交，不方便。表单正好解决了这个问题，将所有的数据形成一个整体，一起提交给服务器。
常见的登录页面、注册页面都离不开表单的应用

1. form属性

action：整个表单提交的目的地（回家的地址）
method：表单提交的方式（回家的交通方式）
get：提交时，传输数据量少（传递普通文字信息，传递照片会失败），明文提交（在浏览器的url后面会显示提交的数据，不适合用于登录）
post：提交时，传输数据量大（传递文字和图片都行），密文提交（浏览器的url后面看不到提交的数据）

2. 表单中的元素(控件)

<input>元素的type属性
○ text：默认值，普通的文本输入框
• placeholder属性：提示文本
• maxlength属性：最多能输入字符数量
○ password：密码输入框
○ checkbox：多选框/复选框
• checked：默认被选中
○ radio：单选按钮
○ file：上传文件
○ reset：重置按钮
○ submit：提交按钮
○ button：普通按钮
<select>：下拉列表/下拉框
○ <option>：列表中的项
• selected：被选中
<textarea>：文本域（多行文本框）
○ 可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的height和 width 属性。
<button>：按钮
○ 在form表单中，作用和submit一样
○ 不在form表单中，就是普通按钮（配合后期的javascript，可扩展性更高）

<form action="baidu" method="GET">
	<p>帐号：<input name="a" type="text" placeholder="请输入帐号..." maxlength="5" ></p>
	<p>密码：<input name="b" type="password"></p>
	<p>爱好：
		<input name="hobby" type="checkbox"> 抽烟
		<input name="hobby" type="checkbox" checked="checked"> 喝酒
		<input name="hobby" type="checkbox"> 烫头
		<input name="hobby" type="checkbox"> 泡澡
	</p>
	<p>性别：
		<input type="radio" name="sex"> 男
		<input type="radio" name="sex" checked="checked"> 女
	</p>
	<p>身份：
		<input type="radio" name="role"> ceo
		<input type="radio" name="role"> cto
		<input type="radio" name="role"> coo
		<input type="radio" name="role" checked="checked"> ufo
	</p>
	<p>头像：
		<input type="file">
	</p>
	<p>血型：
		<select>
			<option>A型</option>
			<option>B型</option>
			<option>C型</option>
			<option selected="selected">O型</option>
		</select>
	</p>
	<p>个人简介：
		<textarea cols="10" rows="5"></textarea>
	</p>
	<p>
		<input type="reset" value="清空">
		<input type="submit" value="提交">
		<input type="button" value="取消">
		<button>保存</button>
	</p>
</form>
<button>测试</button>

注意事项：
1.所有表单中的元素都要具有名称（否则提交到服务器之后，服务器无法区识别多个元素之间的不同）
2.单选框要想可以一次只选择一个，要具有相同的name值
3.所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值

框架标签

通过<frameset>和<frame>框架标签可以定制HTML页面布局。可以理解为：用多个页面拼装成一个页面。（下图是经典的：121）
注意，框架标签和body标签不共存。“有你没我，有我没你”

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
	</head>
		<frameset rows="10%,*,13%">
			<frame src="top.html"></frame>
			<frameset cols="15%,*">
				<frame src="left.html"></frame>
				<frame src="right.html"></frame>
			</frameset>
			<frame src="foot.html"></frame>
		</frameset>
</html>

top.html、left.html、right.html、foot.html 四个页面内容一样，稍微改下文字而已，以top.html为例

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
	</head>
	<body>
		<h1>顶部导航区域</h1>
	</body>
</html>

其它标签与特殊字符

1. <meta>标签

<meta>标签必须写在<head>标签之间.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

charset=“UTF-8”
当前页面的字符编码
gbk：中文简体
name=“viewport” content=“width=device-width, initial-scale=1.0”
这里的名字是 viewport （显示窗口）
数据是文本内容 content="width=device-width, initial-scale=1.0"也就是显示窗口宽度是客户端的屏幕宽度（就是满屏！），显示的文字和图形的初始比例是1.0（针对移动设备的设置）
http-equiv=“X-UA-Compatible” content=“ie=edge”
每个电脑内置的IE版本是不一样的，为了兼容所有的版本以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染

通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面

<meta http-equiv="refresh" content="5; url=http://www.lagou.com">

注意：在html中如果跳转的互联网上的网站资源，那么我们在书写路径时，一定要带协议的路径。

2. <link>标签

后面我们会使用link标签来导入css
注意:link标签也必须写在<head>标签中。

3. 特殊字符
在这里插入图片描述

3、HTML5新特性

HTML4与HTML5的区别

H5包含H4

大小写不敏感
(1) 标签
(2) 属性
(3) 属性的值

<inPUT tYPe="pasSWord"/>

引号可省略

<input type="password">
<input type=password>

省略了结尾标签
说是省略，其实运行起来，查看源代码，html是自动帮我们补全了

<p>哈哈哈哈哈哈哈
<p>哈哈哈哈哈哈哈

新增语义化标签

html4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此
新增许多语义化标签，让div“见名知意”（是div只是换了个名）
▹ section标签：表示页面中的内容区域，部分，页面的主体部分
▹ article标签：文章
▹ aside标签：文章内容之外的，标题
▹ header标签：头部，页眉，页面的顶部
▹ hgroup标签：内容与标题的组合
▹ nav标签：导航
▹ figure标签：图文并茂
▹ foot：页脚，页面的底部

在这里插入图片描述

媒体标签

想在网页上播放视频，就要使用，属性有：
▹ src：媒体资源文件的位置
▹ controls：控制面板
▹ autoplay：自动播放（谷歌失效，360浏览器可以）
▹ loop：循环播放

<video src="img/html-css-js之间的关系.mp4" controls loop autoplay></video>

新增表单控件

表单的控件更加丰富了
○ <input>，修改type属性：
▸ color：调色板
▸ date：日历
▸ month：月历
▸ week：周历
▸ number：数值域
▹ min：最小值（默认值是1）
▹ max：最大值（默认值无上限）
▹ step：递增量
▸ range：滑块
▸ search：搜索框（带×号，可一键删除框中内容）
○ 进度条<progress/>
○ 高亮<mark>
○ 联想输入框<datalist> （模糊查询）
▸ 选项<option>

任务二 (CSS)

1、CSS介绍

什么是CSS？
在这里插入图片描述

CSS是指层叠样式表 cascading style sheets
通过CSS可以让我们定义HTML元素如何显示。
CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来。
通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率。
(html创造楼骨架，css设计装修)

2、CSS与HTML结合方式

第一种方式内联/行内样式

就是在我们的HTML标签上通过style属性来引用CSS代码。
优点:简单方便
缺点:只能对一个标签进行修饰。

在这里插入图片描述

第二种方式内部样式表

我们通过<style>标签来声明我们的CSS. 通常<style>标签我们推荐写在head和body之间，也就是“脖子”的位置
优点：可以通过多个标签进行统一的样式设置
缺点：它只能在本页面上进行修饰
语法：选择器 {属性:值;属性:值}
▹ 选择器：你要修饰的目标(我们班有10个同学，你要给张三化妆，这个选择器就应该是张三)
▹ 属性：画口红
▹ 值：红色口红

在这里插入图片描述

第三种方式外部样式表

我们需要单独定义一个CSS文件,注意CSS文件的后缀名就是.css
在项目根目录下，创建css目录，在css目录中创建css文件 css01.css
在<head>中使用<link>标签引用外部的css文件
▹ href=‘路径’
▹ rel=‘stylesheet’

在这里插入图片描述

还可以使用另一种引入css文件的方式：

<style>
@import 'css/css01.css'
</style>

关于外部导入css使用与@import的区别?
1.加载顺序不同
@import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面。
如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面；
2.@import方式导入css样式，它是不支持javascript的动态修改的。而link支持。(link对javascript的支持更加亲切，import对javascript就不太友好)
三种样式表的优先级：满足就近原则
内联 > 内部 > 外部

3、CSS的使用

css中选择器

1. 元素(标签)选择器

它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称.

在这里插入图片描述

2. 类选择器

类选择器在使用时使用"."来描述，它描述的是元素上的class属性值

在这里插入图片描述

3. id选择器

它只能选择一个元素，使用 “#” 引入，引用的是元素的id属性值。
id选择器，比类选择器更具有唯一性

在这里插入图片描述

4. 选择器组

逗号表示，谁和谁。
例如，我有手机，你有手机，他也有手机，一条一条写太麻烦，就可以合并编写

我,你,他{
	手机
}

在这里插入图片描述
5. 派生选择器

就是子类选择器
子代：父子关系（隔代不管）
div>p：（子p抚养（孙p不抚养））div的子集元素被选中，只读取一级
后代：父子孙，曾孙，从孙…
div p：（子孙p都抚养）div下的p标签都被选中，忽略层级

在这里插入图片描述

6. CSS伪类

CSS伪类可对css的选择器添加一些特殊效果
伪类属性列表：
▹ :active 向被激活的元素添加样式。
▹ :hover 当鼠标悬浮在元素上方时，向元素添加样式。
▹ :link 向未被访问的链接添加样式。
▹ :visited 向已被访问的链接添加样式。
▹ :first-child 向元素的第一个子元素添加样式。
超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha

a:link {
    
    color: #FF0000} /* 未访问的链接 */
a:visited {
    
    color: #00FF00} /* 已访问的链接 */
a:hover {
    
    color: #FF00FF} /* 鼠标移动到链接上 */
a:active {
    
    color: #0000FF} /* 选定的链接 */

在这里插入图片描述

CSS基本属性

1. 文本属性

指定字体：font-family : value;
字体大小：font-size : value;
▹ px：像素
▹ em：倍数
字体加粗：font-weight : normal/bold;
文本颜色：color : value;
文本排列：text-align : left/right/center;
文字修饰：text-decoration : none/underline;
行高：line-height : value;
首行文本缩进：text-indent : value （2em）;

在这里插入图片描述

2. 背景属性

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。

background-image: url('img/1.jpg');

background-repeat 设置背景图像的墙纸效果，是否及如何重复
▹ repeat：在垂直方向和水平方向重复，为重复值
▹ repeat-x：仅在水平方向重复
▹ repeat-y：仅在垂直方向重复
▹ no-repeat：仅显示一次
background-position 设置背景图像的起始位置
1：控制水平方向 x轴：正值，向右移动；负值，向左移动
2：控制垂直方向 y轴：正值，向下移动；负值，向上移动

/* 图片向左移动50px，向下移动100px （可以为负值） */
background-position:50px 100px;

background-attachment 背景图像是否固定或者随着页面的其余部分滚动
▹ 默认值是 scroll：默认情况下，背景会随文档滚动
▹ 可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像

background-attachment: fixed

3. 列表属性

CSS列表属性作用如下：
▹ 设置不同的列表项标记为有序列表
▹ 设置不同的列表项标记为无序列表
▹ 设置列表项标记为图像
有两种类型的列表：
▹ 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
▹ 有序列表 - 列表项的标记有数字或字母
使用CSS，可以列出进一步的样式，并可用图像作列表项标记。
▹ none：无标记。（去除标记）
▹ disc：默认。标记是实心圆。
▹ circle：标记是空心圆。
▹ square：标记是实心方块。
▹ decimal：标记是数字。
▹ decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)
▹ lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)
▹ upper-roman：大写罗马数字(I, II, III, IV, V, 等。)
▹ lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)
▹ upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<style>

    li{
     
     
        list-style-type: none;
        background-color: black;
        color: white;
        text-align: center;
        width: 150px;
        float: left;    /* li水平方向显示 */
        line-height: 40px;
        font-size: 1.3em;
        cursor: pointer;
    }

    li:hover{
     
     
        background-color: orange;
        line-height: 50px;
    }

</style>

<body>
    
    <ul>
        <li>罗马大陆</li>
        <li>烦人修仙传</li>
        <li>拉钩教育</li>
    </ul>

</body>
</html>

4. 边框属性

CSS边框属性允许你指定一个元素边框的样式和颜色。

在这里插入图片描述

<style>
	div{
    
    
		border-width: 20px;
		border-color: green;
		border-style: outset;
	}
</style>
<body>
	<div>hello</div>
</body>

border-style取值：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<style>
    div{
     
     
        width: 400px;
        height: 40px;
        margin: 10px;   /*div之间产生10像素的距离*/
    }
    .a{
     
     
        /* 设置四个边 */
        border-width: 2px;
        border-color: red;
        border-style: solid;

        border-right-color: green;    /*设置右边框的颜色*/
        border-bottom-style: dashed;    /*设置下边框的样子*/
    }
    .b1{
     
     
        border: 10px solid red;
    }
    .b2{
     
     
        border: 10px dotted red;
    }
    .b3{
     
     
        border: 10px dashed red;
    }
    .b4{
     
     
        border: 10px double red;
    }
    .b5{
     
     
        border: 10px groove red;
    }
    .b6{
     
     
        border: 10px ridge red;
    }
    .b7{
     
     
        border: 10px inset red;
    }
    .b8{
     
     
        border: 10px outset red;
    }
</style>

<body>
    <div class='a'></div>
    <div class='b1'>实心线</div>
    <div class='b2'>点线</div>
    <div class='b3'>虚线</div>
    <div class='b4'>双线</div>
    <div class='b5'>3D凹槽</div>
    <div class='b6'>3D脊边框</div>
    <div class='b7'></div>
    <div class='b8'></div>
</body>
</html>

在这里插入图片描述

5. 轮廓属性

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓和边框的区别：
▹ 边框 (border) 可以是围绕元素内容和内边距的一条或多条线；
▹ 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。

在这里插入图片描述

6. 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：

在这里插入图片描述

margin(外边距) - 盒子与盒子之间的距离
border(边框) - 盒子的保护壳
padding(内边距/填充) - 内填充，盒子边与内容之间的距离
content(内容) - 盒子的内容，显示的文本或图像

在这里插入图片描述

CSS定位

块级元素：h1~h6，p, div 等，自上而下，垂直排列（自动换行）；可以改变宽高
行内元素：a,b,span,等，从左向右，水平排列（不会换行）；不能改变宽高
行内块元素：input,img等，从左向右，水平排列（自动换行）；可以改变宽高

2. 浮动定位

让元素“飞”起来。不仅可以靠着左边或右边。还可以消除“块级”的霸道特性（独自占一行）。
float取值：
▹ none ：不浮动
▹ left：贴着左边浮动
▹ right：贴着右边浮动

3. 相对定位

和原来的位置进行比较，进行移动定位（偏移）

4. 绝对定位

本元素与已定位的祖先元素的距离
▹ 如果父级元素定位了，就以父级为参照物；
▹ 如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物。
▹ 如果爷爷没定位，继续向上找，都没定位的话，body是最终选择。

<div class="yeye">
	<div class="father">
		<div class="a">1</div>
		<div class="b">2</div>
		<div class="c">3</div>
	</div>
</div>

以父节点作为参照物
以爷爷节点作为参照物

5. 固定定位

将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动

6. z-index

如果有重叠元素，使用z轴属性，定义上下层次。
注意：
▹ z轴属性，要配合相对或绝对定位来使用。
▹ z值没有额定数值（整型就可以，具体用数字几，悉听尊便）

4、CSS3新特性

圆角

border-radius：左上右上右下左下;
border-radius：四个角;
border-radius：50%; 圆形

在这里插入图片描述

盒子阴影

box-shadow：1 2 3 4 5;
1：水平偏移
2：垂直偏移
3：模糊半径
4：扩张半径
5：颜色

渐变

1. 线性渐变

background:linear-gradient([方向/角度]，颜色列表)；

<style>
	div{
     
     
		width: 200px;
		height: 60px;
		margin: 10px;
	}
	.a1 {
     
     
		background: linear-gradient(red,black);
	}
	.a2 {
     
     
		background: linear-gradient(red,black,pink, green);
	}
	.a3 {
     
     
		background: linear-gradient(to left,red,black);
	}
	.a4 {
     
     
		background: linear-gradient(to top left,red,black);
	}
	.a5 {
     
     
		background: linear-gradient(30deg,red,black);
	}
</style>
<body>
	<div class="a1"></div>
	<div class="a2"></div>
	<div class="a3"></div>
	<div class="a4"></div>
	<div class="a5"></div>
</body>

在这里插入图片描述

2. 径向渐变

以圆心向外发散

background: radial-gradient(颜色列表);

<style>
	div {
     
     
		width: 200px;
		height: 200px;
		margin: 10px;
	}
	.a1 {
     
     
		background: radial-gradient(red, black);
	}
	.a2 {
     
     
		background: radial-gradient(red, black, pink, green);
	}
	.a3 {
     
     
		border-radius: 50%;
		background: radial-gradient(red, black);
	}
</style>
<body>
	<div class="a1"></div>
	<div class="a2"></div>
	<div class="a3"></div>
</body>

在这里插入图片描述

背景

1. 背景位置

background-origin：指定了背景图像的位置区域
▹ border-box : 背景贴边框的边
▹ padding-box : 背景贴内边框的边
▹ content-box : 背景贴内容的边

<style>
	div {
     
     
		background: url("img/1.jpg") no-repeat;
		width: 200px;
		height: 80px;
		margin: 20px;
		border: 10px dashed black;
		padding: 20px;
	}
	.a {
     
     
		background-origin: border-box;
	}
	.b {
     
     
		background-origin: padding-box;
	}
	.c {
     
     
		background-origin: content-box;
	}
</style>
<body>
	<div class="a"></div>
	<div class="b"></div>
	<div class="c"></div>
</body>

在这里插入图片描述

2. 背景裁切

background-clip:
▹ border-box 边框开切
▹ padding-box 内边距开切
▹ content-box 内容开切

<style>
	div {
     
     
		width: 200px;
		height: 80px;
		border: 10px dashed red;
		background-color: darkcyan;
		margin: 20px;
		padding: 20px;
	}
	.a {
     
     
		background-clip: border-box;
	}
	.b {
     
     
		background-clip: padding-box;
	}
	.c {
     
     
		background-clip: content-box;
	}
</style>
<body>
	<div class="a"></div>
	<div class="b"></div>
	<div class="c"></div>
</body>

在这里插入图片描述

3. 背景大小

background-size:
▹ cover 缩放成完全覆盖背景区域最小大小
▹ contain 缩放成完全适应背景区域最大大小

<style>
	div {
     
     
		background: url("img/1.jpg") no-repeat;
		width: 200px;
		height: 100px;
		border: 2px solid red;
		margin: 20px;
	}
	.a {
     
     
		background-size: cover; /* 完全覆盖 */
	}
	.b {
     
     
		background-size: contain; /* 完全适应 */
	}
</style>
<body>
	<div class="a"></div>
	<div class="b"></div>
</body>

在这里插入图片描述

过渡动画

1. 过渡

从一个状态到另一个状态，中间的“缓慢”过程；
缺点是，控制不了中间某个时间点。
transition｛1 2 3 4｝

过渡或动画模拟的css属性
完成过渡所使用的时间（2s内完成）
过渡函数。。。
过渡开始出现的延迟时间
transition: width 2s ease 1s;
目前，css3只开发出部分的过渡属性，下图所示：

<style>
	div{
     
     
		width: 100px;
		height: 50px;
		border: 2px solid red;
	}
	.a{
     
     
		transition: width 2s linear 1s; /*1秒过后，div在2秒内匀速缓慢的变宽*/
	}
	div:hover{
     
      width: 300px;} /*触发div变宽*/
</style>
<body>
	<div class="a">Hello,拉勾</div>
</body>

2. 动画

从一个状态到另一个状态，过程中每个时间点都可以控制。
关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}… }
动画属性：animation{ 1 , 2 , 3 , 4 , 5 }
1：动画帧
2：执行时间
3：过渡函数
4：动画执行的延迟（可省略）
5：动画执行的次数
需求1：一个元素从左向右移动，3秒内执行2次

<style>
div{
     
     
width: 700px;
border: 1px solid red;
}
@keyframes x{
     
     
from{
     
      margin-left: 0px;}
to{
     
      margin-left: 550px;}
}
img{
     
     
animation: x 3s linear 2;
}
</style>
<body>
<div>
<img src="img/cat.gif">
</div>
</body>

需求2：一个元素从左向右移动，3秒内执行完成。无限次交替执行
infinite：无限次
alternate：来回执行（交替，一去一回）

<style>
	.wai{
     
     
		width: 600px;
		height: 100px;
		border: 2px solid red;
	}
	.nei{
     
     
		width: 40px;
		height: 80px;
		margin: 5px;
		background: red;
	}
	.nei{
     
     
		animation: x 3s linear infinite alternate;
	}
	@keyframes x{
     
     
		0%{
     
      margin-left: 0px; }
		25%{
     
      background: yellowgreen; }
		50%{
     
      background: goldenrod; }
		75%{
     
      background: palevioletred;}
		100%{
     
     
			background: coral;
			margin-left: 550px;
		}
	}
</style>
<body>
	<div class="wai">
		<div class="nei"></div>
	</div>
</body>

任务三 (JavaScript)

1、JavaScript介绍

虽然是java作为前缀，但java和javascript的关系，就像老婆和老婆饼之间的关系，没有一毛钱关系！
网景公司在Netscape2.0首先推出了JavaScript
JavaScript 的正式名称是 “ECMAScript”，此标准由 ECMA 组织发展和维护，简称“js”
JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为
JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释执行代码，不进行预编译。

js的特点

可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序（后面会学习不用浏览器也能运行）
解释执行：事先不编译，逐行执行
基于对象：内置大量现成对象（不需要new）
适宜：
▹ 客户端数据计算（客户端可以做到的事加减乘除让客户端做，就不给服务器加负担了）
▹ 客户端表单合法性验证（密码是否为8位数，客户端判断完之后发给服务端）
▹ 浏览器事件的触发
▹ 网页特殊显示效果制作（网页游戏）

js的组成

ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。
BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准。
▹ 弹出新的浏览器窗口
▹ 移动、关闭浏览器窗口以及调整窗口大小
▹ 提供 Web 浏览器详细信息的定位对象
▹ 提供用户屏幕分辨率详细信息的屏幕对象
▹ 对 cookie 的支持
▹ IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX对象，进而实现ajax局部刷新技术

2、HTML和JavaScript结合方式

使用js的三种方式

行内脚本

点击按钮（触发）
弹框（具体的操作）

<button onclick="alert('弹框测试')">点我一下</button>

<!-- 
    on: 绑定 
    click: 点击事件
    alert: 弹框

    在h2标签上绑定一个点击事件，弹框
-->
<h2 onclick="alert('hello');">点我试试</h2>

内部脚本

使用
标准是写在head和body之间（脖子位置），但其实只要写在html文件内部就可以，无论什么位置
<html>外，<p></p>内部，都可以。

<body>
	<script>
		alert("弹框");
	</script>
</body>

外部脚本

在项目根目录下创建一个目录js
在js目录中创建一个文件，后缀名是.js
在html页面中，使用

<script src="js/xx.js"></script>

以上使用脚本的三种方式的优先级，谁在上，谁先执行。因为是解释性语言。

3、JavaScript的使用

变量

因为js是弱类型语言，所以，在定义变量的时候，所有的数据类型都是var
声明变量： var x ; var x,y;
数值类型：number
▹ 不区分整型数值和浮点型数值
▹ 所有数字都采用 64 位浮点格式存储，类似于double 格式
字符串：string
▹ 首尾由单引号或双引号括起
var aa="欢迎来到\"JavaScript世界";
布尔类型：
▹ 仅有两个值：true和false也代表1和0
▹ 实际运算中true=1,false=0

1. 自动类型转换

数字 + 字符串：数字转换为字符串 			10+’a’ -> 10a
数字 + 布尔值：true转换为1，false转换为0 	true+5->6
字符串 + 布尔值：布尔值转换为字符串true或false true+’a’->truea
布尔值 + 布尔值：布尔值转换为数值1或0 			true+true->2

2. 数据类型转换函数

parseInt：强制转换成整数
▹ 如果不能转换，则返回 NaN （NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字）
▹ 例如：parseInt(“6.32”)=6
parseFloat：强制转换成浮点数
▹ 如果不能转换，则返回 NaN
▹ 例如：parseFloat(“6.32”)=6.32
typeof：查询数值当前类型，返回 string / number / boolean / object
▹ 例如：typeof(“test”+3)==“string”

3. null 与 undefined

null 在程序中代表“无值”或者“无对象”
▹ 可以通过给一个变量赋值 null 来清除变量的内容
undefined
▹ 声明了变量但从未赋值或者对象属性不存在

4. 算术运算

加(＋)、减(－)、乘( * ) 、除( / ) 、余数( % )
▹ - 可以表示减号，也可以表示负号，如：x = -y
▹ + 可以表示加法，也可以用于字符串的连接
递增( ++ ) 、递减( – )
▹ i++ 相当于 i=i+1
▹ i-- 相当于 i=i-1

5. 关系运算

严格相等：===
▹ 类型相同
▹ 数值相同
非严格相等：!==

var a = "10";
var b = 10;
if (a == b)
	alert("equal");
if (a === b)
	alert("same");

6. 逻辑运算

逻辑非（!）、逻辑与（&&）、逻辑或（||）
逻辑运算的操作数均为 boolean 表达式
我要吃两碗拉面或者10个包子才能吃饱！问题是，我只吃两碗面，饱了！我只吃10个包子，饱了
我要吃两碗拉面并且10个包子才能吃饱！问题是，我只吃两碗面，没饱！我只吃10个包子，没饱，

7. 控制语句

if（关系表达式） {
    
    
	// 语句块 1
}else {
    
    
	// 语句块 2
}

if (表达式1) {
    
    
	// 语句1;
}else if (表达式2){
    
    
	// 语句2;
}else if (表达式3){
    
    
	// 语句3;
} else{
    
    
	// 语句4;
}

switch (表达式) {
    
    
	case 值1:
		// 语句1;
		break;
	case 值2:
		// 语句2;
		break;
	default:
		// 语句4;
}

for (var i=1 ; i<=5 ; i++){
    
    
	alert(i);
}

while (条件){
    
    
	// 语句1;
	...
}

常用字符串API

length:获取字符串的长度（字符串中字符的个数）属性，没有小括号

var str = "hello";
console.log( str.length );

toUpperCase/toLowerCase :转大小写

var name = "AngierSun";
console.log( "大写："+name.toUpperCase() );
console.log( "小写："+name.toLowerCase() );

charAt(下标) ：返回某个下标上的字符

var str1 = "javascript网页教程";
var str2 = str1.charAt(12); // 下标12上的字符
console.log(str2); //教
var str3 = str1.charCodeAt(12);
console.log(str3); //25945:（汉字“教”在unicode编码中的编号）

indexof(字符)：查找字符串中字符出现的首次下标
lastIndexof(字符)：查找字符串中字符最后一次出现的下标

var str1 = "javascript网页教程";
var str2 = str1.indexOf("a");
console.log(str2); // 1 , a字符在str1中第一次出现的下标
var str3 = str1.lastIndexOf("a"); //3,a字符在str1中最后一次出现的下标
console.log(str3);

substring(开始,结束)：截取字符串中一部分（结束是不包含的）

var str1 = "abcdefgh";
var str2 = str1.substring(2,4);
console.log(str2); //cd，从2开始（包含），4结束（不包含）

replace(旧的,新的)：将字符串中的旧字符替换成新字符

var str1 = "abcde";
var str2 = str1.replace("cd","XXX");
console.log(str2); // abXXXe，将str1中的cd替换成XXX

split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型

var str1 = "一,二,三,四,五";
var arr = str1.split(","); // 将str1 以逗号进行分割，分割成N份，所以返回的结果一定是数组结构
console.log( "共分割成："+arr.length+"份" );
console.log( "第三份是：" + arr[2] ); // 三

数组

1. 创建数组

var arr1 = new Array();

2. 初始化数组的三种方式

// 第一种
var arr1 = new Array();
arr1[0] = 110;
arr1[1] = 119;
arr1[2] = 120;
// 第二种
var arr1 = new Array(10,"a",true);
// 第三种
var arr1 = [10,"a",true];
for (var i = 0; i < arr1.length; i++) {
    
    
	console.log(arr1[i]);
}

3. 数组的常用方法

tostring()：将数组转换成字符串

var arr = [1,2,3,4];
console.log("类型为：" + typeof( arr ) );
var str = arr.toString(); // 将数组转换成字符串
console.log( str +",类型为：" + typeof( str ) );

join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串。

var arr = [1,2,3,4];
var str = arr.join("-"); // 将数组中每个元素用-进行连接，并形成一个全新的字符串
console.log( str +",类型为：" + typeof( str ) );

concat(新元素)：将原来的数组连接新元素，原数组不变。

var arr = [1,2,3,4];
var arrnew = arr.concat(5,6); // 在arr数组的后面添加新的元素，形成一个新数组，但是原数组是不变的
console.log( arrnew +",类型为：" + typeof( arrnew ) );
console.log("原数组：" + arr);

slice(开始，结束)：在数组中提取一部分，形成新的数组。
▹ 1,2,3,4,5 slice(2,4) 结果：3,4

var arr = ['a','b','c','d','e','f','g','h'];
var arrnew = arr.slice( 2,4 ); // 在arr数组中截取，从2开始（包含），4结束（不包含）
console.log( arrnew ); // cd

reverse()：数组的反转（倒序）

var arr = [31,12,111,444];
console.log( arr.toString() );
arr.reverse(); // 将数组中的元素倒置
console.log( arr.toString() );

sort()：数组排序
▹ arr.sort() 字符排序
▹ arr.sort(func) 数值排序

var arr = [31,12,111,444];
arr.sort(); // 字符排序（不会按照字面量的大小）
console.log( arr );

var arr = [31,12,111,444];
arr.sort( laosun ); // 数字排序（会按照字面量的大小）
console.log( arr );
// 定义排序函数
function laosun(a,b){
    
    
	return a-b;
}

Math数学对象

Math 对象用于执行数学任务
没有构造函数 Math()
无需创建，直接把 Math 作为对象使用就可以调用其所有属性和方法

在这里插入图片描述

// 返回0-9之间任意一个随机数字
var i = Math.random() * 10;
var j = Math.floor(i);
console.log(j);

Number对象

Number.toFixed(2); 自带四舍五入技能

var n = new Number( 12.345 );
var n1 = n.toFixed(2); // 12.35，固定两位小数，第三位小数四舍五入
console.log( n1 );
var x = new Number( 12.3 );
var n2 = x.toFixed(2); // 12.30，固定两位小数，位数不够，0来补齐
console.log( n2 );

正则表达式

对字符串执行模式匹配的强大工具

var reg1 = /^\d{3,6}$/; // 匹配纯数字3-6个
var reg2 = new RegExp(“^\\d{
    
    3,6}$");

在这里插入图片描述

// 方式1
var age = "18"; // 判断：1-3位纯数字
var reg = /^\d{1,3}$/; // 以/^开始，中间写正则内容，以$/结束
var b = reg.test(age); // 验证age变量的是否符合reg的匹配
if (b == true) {
    
    
	console.log("验证通过！");
} else {
    
    
	console.log("格式错误");
}
// 方式2
var name = "abc123"; // 大小写字母和数字的组合（特殊字符不能出现）, 5~8位
var reg = new RegExp("^[a-zA-Z0-9]{5,8}$"); // 以^开始，中间写正则内容，以$结束
if (reg.test(name)) {
    
    
	console.log("验证通过！");
} else {
    
    
	console.log("格式错误");
}

日期对象

var time = new Date();
console.log( time ); // Tue Jul 14 2020 11:09:46 GMT+0800 (中国标准时间)
var year = time.getFullYear(); // 年份
var month = time.getMonth() + 1; //月份从0开始，11结束，所以国内习惯要+1
var day = time.getDate(); // 几号
var hour = time.getHours(); // 几点
var mm = time.getMinutes(); // 分钟
var s = time.getSeconds(); //秒
var ms = time.getMilliseconds(); // 毫秒， 1000毫秒 = 1秒
var timestr = year+"年"+month+"月"+day+"号 "+hour+"点"+mm+"分"+s+"秒"+ms+"毫秒";
console.log( timestr );

函数

使用关键字 function 定义函数

function 函数名( 形参列表 ){
    
    
	// 函数体
	return 返回值;
}

函数声明后不会立即执行，会在我们需要的时候调用到，才会执行。
注意：
▹ 形参：一定不要带数据类型
▹ 分号;是用来分隔可执行JavaScript语句。由于函数声明不是一个可执行语句，所以不以分号结束。

1. 无返回值

function qiuhe(a, b) {
    
    
	var he = a + b;
	console.log("两数之和：" + he);
}
qiuhe(3,4);

2. 有返回值

function qiuhe(a, b) {
    
    
	var he = a + b;
	return "两数之和：" + he;
}
var s = qiuhe(3,4);
console.log( s );

3. 参数对象

在函数内部，调用参数列表的属性

function func(a,b,c){
    
    
	console.log( arguments.length ); // 获得参数的个数
	console.log( arguments[1] ); // 获得下标为1的参数
}

4. 构造函数

函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
console.log(x);

注：上述函数以分号结尾，因为它是一个执行语句。

5. 匿名函数

没有名称的函数

var fn = function(a, b) {
    
    // 没有名字的函数，应该用一个变量来接收
	return a * 10 + b;
};
console.log( fn(3, 4) );

6. 全局函数

isNaN：检查其参数是否是非数字值

console.log( isNaN( 123 ) ); // 数字，false
console.log( isNaN( "hello" ) ); // 非数字，true
console.log( isNaN( 4-1 ) ); // 数字，false
console.log( isNaN( 123 ) ); // 数字，false
console.log( isNaN( -10 ) ); // 数字，false
console.log( isNaN( "123" ) ); // 数字，false
console.log( isNaN( "1a23" ) ); // 非数字，true

eval：用来转换字符串中的运算

var str = "1+3";
console.log( str ); // 1+3 , +会认定为一种字符符号而已，没有加法的作用
console.log( eval( str ) ); // 让字符串中的运算符号生效

encodeURI 与 decodeURI

var name = "拉勾网";
console.log( "转码前：" + name );
name = encodeURI(name);
console.log( "转码后：" + name );
name = decodeURI(name);
console.log( "解码后：" + name );

7. 闭包

闭包的概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数。
闭包的作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理；
简单地说：就是在函数的局部范围内声明一个封闭的环境，此环境不会被垃圾回收探测到。保证了数据的安全唯一性

想了解闭包，首先要了解什么是全局变量，什么是局部变量

	a = 10; // 全局变量，声明的时候可以不使用var
	function test1(){
    
    
		b = 20; // 不适用var声明的变量，就是全局变量
		var c = 30; // 用var声明，并且在函数的内部。这样的变量叫做局部变量，有效范围只能
		在其声明的函数内部
		console.log(c);
	}
	function test2(){
    
    
		console.log(c); //c is not defined (c变量没有定义)
	}
	test1();
	test2();

需求：统计方法执行了多少次

	var count = 0; // 总次数
	function test1(){
    
    
		count++; // 自增+1
	}
	test1();
	test1();
	test1();
	console.log( count );

谁都可以访问count，所以count变量并不安全，因为是全局变量。
如何才能安全呢？将count声明为局部变量

	function test1(){
    
    
		var count = 0; //局部变量
		return count++; //外部无法访问count，只能通过return才能将count变量返回，并输出
	}
	test1();
	test1();
	test1();
	console.log( test1() ); // 每次调用方法，首先就是将变量还原为0

结果一直是0，因为每次调用test1()，方法体的第一句代码就是还原，无论曾经的值是多少。
突发奇想，如果在test1()函数里面，再嵌套一个函数，js是支持函数嵌套的

	function test1(){
    
    
		var count = 0; //局部变量
		function jia(){
    
    
			return count++;
		}
		jia();
		return count;
	}
test1();
test1();
test1();
console.log( test1() ); // 每次调用方法，首先就是将变量还原为0

如果每次只调用test1()里面的jia()就好了。ok，闭包帮你解决此问题！

function test1(){
    
    
	var count = 0; //局部变量
	function jia(){
    
    
		return count+=1;
	}
	return jia;
}
var fn = test1(); // fn => function jia(){return count+=1; }
fn();
fn();
console.log( fn() ); // 每次调用方法，首先就是将变量还原为0

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。
直观的说就是形成一个不销毁的栈环境。
▹ 闭包的优点：方便调用上下文中声明的局部变量逻辑紧密，可以在一个函数中再创建个函数，避免了传参的问题
▹ 闭包的缺点：因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭包就会造成内存泄露，内存消耗很大

弹框输出

普通弹框 alert(“hello，拉勾”);
控制台日志输出 console.log(“谷歌浏览器按F12进入控制台”);
页面输出 document.write("<h2>我爱你中国"); 将<h2>元素输出到中
确认框 confirm(“确定删除吗？”);

var b = confirm("确定删除吗？");
if(b){
    
    
	document.write( "<h1>删除成功！</h1>" );
}else{
    
    
	document.write( "<h1>你取消了操作</h1>" );
}

输入框 prompt(“请输入姓名：”);

var name = prompt("请输入你的名字：");
document.write( "<h1>大名："+name+"！</h1>" );

4、DOM操作

在一个html页面中，会使用很多标签来规划制作页面。
每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找到这个标签元素
如何查找到这个元素是个难题，W3C组织的工程师们，突然看到了一棵大树。我要是想找到某一片叶子，应该怎么做？
“顺藤摸瓜”，主树干有分支，每个分支还有许多小分支，只要把这个分支的结构整理清楚，任何一片叶子都不是难事了
叶子和大树的一些启发，工程师们开会讨论就定了这个理论**“文档对象模型”**，
文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了
▹ 在节点树中，顶端节点就是根节点（root）
▹ 每个节点都有父节点（除了根节点）
▹ 任何一个节点都可以拥有任意数量的子节点
▹ 同胞是拥有相同父节点的节点

<html>
	<head>
		<meta charset="utf-8">
		<title>DOM 教程</title>
	</head>
	<body>
		<h1>第一节：HTML DOM</h1>
		<p>Hello world!</p>
	</body>
</html>

从上面的 HTML 中：
▹ <html> 节点没有父节点；它是根节点
▹ <head> 和 <body> 的父节点是 <html> 节点
▹ 文本节点 “Hello world!” 的父节点是 <p> 节点
并且：
▹ <html> 节点拥有两个子节点：<head> 和 <body>
▹ <head> 节点拥有两个子节点：<meta> 与 <title> 节点
▹ <title> 节点也拥有一个子节点：文本节点 “DOM 教程”<h1> 和 <p> 节点是同胞节点，同时也是<body> 的子节点
并且：
▹ <head> 元素是 <html> 元素的首个子节点
▹ <body> 元素是 <html> 元素的最后一个子节点
▹ <h1> 元素是 <body> 元素的首个子节点
▹ <p> 元素是 <body> 元素的最后一个子节点
js为我们提供了很多种方法来实现在页面找查找某个元素节点

DOM访问
在这里插入图片描述

getElementById：通过id属性获得元素节点对象
▹ 案例：当帐号为空时，阻止表单提交

<body>
	<form action="xxx" onsubmit="return login()">
		<p>帐号：<input id="username"/></p>
		<p>电话：<input id="phone"/></p>
		<p><button>登录</button></p>
	</form>
	<script>
		function login() {
     
     
			var name = document.getElementById("username").value ;
			if(name == ""){
     
     
				alert("帐号不能为空！");
				return false; // 阻止表单的提交
			}
			return true; // 放行，让表单提交
		}
	</script>
</body>

getElementsByName：通过name属性获得元素节点对象集
▹ 案例：购物车全选效果

在这里插入图片描述

<body>
	<h2>我的购物车</h2>
	<table border="1" cellspacing="0">
		<tr>
			<td><input type="checkbox" onchange="quan(this)" /> 全选</td>
			<td>名称</td>
			<td>单价</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="one" />1</td>
			<td>功能性饮料-尖叫</td>
			<td>4.0</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="one" />2</td>
			<td>火腿肠</td>
			<td>2.0</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="one" />3</td>
			<td>包子</td>
			<td>1.5</td>
		</tr>
	</table>
	<p>
		<button>提交订单</button>
	</p>
	<script>
		function quan(all) {
     
     
			var arr = document.getElementsByName("one");
			for (var i = 0; i < arr.length; i++) {
     
     
				arr[i].checked = all.checked; // 将全选框的状态，赋值给每一个复选框
			}
		}
	</script>
</body>

getElementsByTagName：通过标签名称获得元素节点对象集
▹ 案例：表格隔行变色

<body>
	<table border="1" cellspacing="0">
		<tr>
			<td><input type="checkbox" onchange="quan(this)" /> 全选</td>
			<td>名称</td>
			<td>单价</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="one" />1</td>
			<td>功能性饮料-尖叫</td>
			<td>4.0</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="one" />2</td>
			<td>火腿肠</td>
			<td>2.0</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="one" />3</td>
			<td>包子</td>
			<td>1.5</td>
	</table>
	<script>
		var rows = document.getElementsByTagName("tr"); //通过标签名获得元素对象集合
		for (var i = 0; i < rows.length; i++) {
     
     
			if(i % 2 == 1){
     
      // 奇数
				rows[i].style.backgroundColor = "pink";
			}
		}
	</script>
</body>

DOM修改

修改 HTML DOM 意味着许多不同的方面：
▹ 改变 HTML 内容
▹ 改变 CSS 样式
▹ 改变 HTML 属性
▹ 创建新的 HTML 元素
▹ 删除已有的 HTML 元素
▹ 改变事件（处理程序）

改变一个 <h2> 元素的 HTML 内容 :

<body>
	<button onclick="test()">点我试试</button>
	<script>
		function test(){
     
     
			document.getElementById("hello").innerHTML = "走哇，喝点去~！";
		}
	</script>
	<h2 id="hello">你好！</h2>
</body>

改变一个<h2>的 HTML 样式

<body>
	<button onclick="chou()">你瞅啥</button>
	<script>
		function chou(){
     
     
			document.getElementById("hello").style.color = "red";
			document.getElementById("hello").style.fontFamily = "华文彩云";
		}
	</script>
	<h2 id="hello">你好！</h2>
</body>

1. 添加节点

点击按钮，在页面中创建一张图片

<body>
	<button onclick="add()">添加</button>
	<div></div>
	<script>
		function add(){
     
     
			var img = document.createElement("img"); // <img>
			img.setAttribute("src","../lagou-html/img/cat.gif"); // <img src="../lagou-html/img/cat.gif">
			img.setAttribute("title","小猫咪"); // <img src="../lagouhtml/img/cat.gif" title="小猫咪">
			img.setAttribute("id","cat"); // <img src="../lagouhtml/img/cat.gif" title="小猫咪" id="cat">
			var divs = document.getElementsByTagName("div");
			divs[0].appendChild(img);
		}
	</script>
</body>

2. 删除节点

点击按钮，把上面刚创建的图片从页面上删除

<body>
	<button onclick="add()">添加</button>
	<button onclick="del()">删除</button>
	<div>
	</div>
	<script>
		function add(){
     
     
			。。。略。。。
		}
		function del(){
     
     
			var img = document.getElementById("cat");
			img.parentNode.removeChild(img); // 必须通过父节点，才能删除子节点
		}
	</script>
</body>

3. 替换节点

点击按钮，把上面刚创建的图片替换成另一张

<body>
	<button onclick="add()">添加</button>
	<button onclick="del()">删除</button>
	<button onclick="rep()">替换</button>
	<div>
	</div>
	<script>
		function add(){
     
     
			。。。略。。。
		}
		function del(){
     
     
			。。。略。。。
		}
		function rep(){
     
     
			var imgold = document.getElementById("cat");
			// 通过修改元素的属性，做的替换
			// img.setAttribute("src","../lagou-html/img/2.jpg");
			var imgnew = document.createElement("img");
			imgnew.setAttribute("src","../lagou-html/img/1.jpg");
			imgold.parentNode.replaceChild( imgnew, imgold );
		}
	</script>
</body>

事件

js捕获某个动作而做出的反馈
HTML 事件的例子：
▹ 当用户点击鼠标时
▹ 当网页已加载时
▹ 当图片已加载时
▹ 当鼠标移动到元素上时
▹ 当输入字段被改变时
▹ 当 HTML 表单被提交时
▹ 当用户触发按键时

1. 窗口事件 (Window Events)

仅在 body 和 frameset 元素中有效。
▹ onload 当文档被载入时执行脚本

<body onload="test()">
<script>
function test() {
     
     
document.write("哈哈哈哈");
}
</script>
</body>

在这里插入图片描述

2. 表单元素事件 (Form Element Events)

仅在表单元素中有效。
▹ onblur 当元素失去焦点时执行脚本
▹ onfocus 当元素获得焦点时执行脚本(被激活)

在这里插入图片描述

<body>
<script>
function a() {
     
     
console.log("获得焦点==被激活");
}
function b() {
     
     
console.log("失去焦点");
}
</script>
<form action="">
<p>帐号：<input onfocus="a()" onblur="b()" /></p>
<p>密码：<input /></p>
</form>
</body>

3. 鼠标事件 (Mouse Events)

onclick 当鼠标被单击时执行脚本
ondblclick 当鼠标被双击时执行脚本
onmouseout 当鼠标指针移出某元素时执行脚本
onmouseover 当鼠标指针悬停于某元素之上时执行脚本

<style>
	img{
     
     
		width: 30%;
		border: 5px solid white;
	}
</style>
<body>
	<img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" onclick="dan()">
	<img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" ondblclick="shuang()">
	<img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" >
	<script>
		function dan(){
     
     
			alert("点了一下");
		}
		function shuang(){
     
     
			alert("连续快读点两下");
		}
		function shang(img){
     
     
			img.style.border = "5px solid red";
		}
		function xia(img){
     
     
			img.style.border = "5px solid white";
		}
	</script>
</body>

4. 键盘事件

onkeydown 按下去
onkeyup 弹上来

<script>
	// window: 当前浏览器窗口
	window.onkeydown = function(){
     
     
		// event：事件源（按键）
		// console.log( "按键编码："+event.keyCode );
		if(event.keyCode == "13"){
     
      // 回车键
			alert("登录成功！");
		}
	}
	window.onkeyup = function(){
     
     
		console.log(event.keyCode); // 按住按键不松手是不会触发的。当松手时，按键回弹则触发
	}
</script>

5. 事件冒泡

创建两个div，一个大一些，一个小一些

<style>
	#father {
     
     
		width: 200px;
		height: 200px;
		background: black;
		padding: 10px;
	}
	#child {
     
     
		width: 100px;
		height: 100px;
		background: greenyellow;
	}
</style>
<body>
	<div id="father">
	<div id="child"></div>
	</div>
	<script>
		// 代码不重要，重要是知道这个事件发生，是正常现象
		document.getElementById("father").addEventListener("click", function() {
     
     
			alert("父级元素的事件被触发：" + this.id);
		});
		document.getElementById("child").addEventListener("click", function(e) {
     
     
			e.stopPropagation() //取消事件的冒泡机制
			alert("子级元素的事件被触发：" + this.id);
		});
	</script>
</body>

先子，后父。事件的触发顺序自内向外，这就是事件冒泡；

在这里插入图片描述

6. 事件捕获

还是刚才创建两个div，一个大一些，一个小一些

<style>
	#father {
     
     
		width: 200px;
		height: 200px;
		background: black;
		padding: 10px;
	}
	#child {
     
     
		width: 100px;
		height: 100px;
		background: greenyellow;
	}
</style>
<body>
	<div id="father">
	<div id="child"></div>
	</div>
	<script>
		document.getElementById("father").addEventListener("click",function(){
     
     
			alert("父级：" + this.id);
		},true);
		document.getElementById("child").addEventListener("click",function(){
     
     
			alert("子级：" + this.id);
		},true);
	</script>
</body>

先父,后子。事件触发顺序变更为自外向内，这就是事件捕获；

在这里插入图片描述

面向对象OOP

使用Object创建通用对象

var user = new Object();
user.name = "吕布";
user.age = 21;
user.say = function(){
    
    
	console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！");
}
user.say();
var dog = new Object();
dog.nickname = "屎尿多";
dog.wang = function(){
    
    
	console.log("我饿了，我要拆家了！");
}
dog.wang();

使用构造函数

function userinfo(name , age){
    
    
	this.name = name;
	this.age = age;
	this.say = function(){
    
    
		console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！");
	}
}
var user = new userinfo("詹姆斯",35);
user.say();

使用直接量

var user = {
    
    
	username : "孙悟空",
	age : 527,
	say : function(){
    
    
		console.log("大家好，我叫："+this.username+"，我今年"+this.age+"岁了！");
	}
};
user.say();

JSON

大家在互联网上来回传递数据，如果没有一个统一的格式，解析起来的难度很大（每个人的编码喜好不一样）
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
易于人阅读和编写，同时也易于机器解析和生成

{
	属性1：值1，
	属性2：值2，
	。。。。
}

<script>
	var json1 = {
     
      username: "吕布", age: 31 };
	console.log("姓名：" + json1.username + "，年龄：" + json1.age + "岁");
	// json数组
	var josnarr = [{
     
      name: "貂蝉", age: 18 }, {
     
      name: "小乔", age: 17 }];
	console.log("貂蝉" + josnarr[0].age + "岁了");
	console.log("小乔" + josnarr[1].age + "岁了");
	// 复杂的json对象
	var long = {
     
     
		name: "赵云",
		sex: "男",
		hobby: ["玉兰白龙驹", "龙胆亮银枪", "青釭剑"]
	};
	console.log(long.name + "的主攻武器：" + long.hobby[1]);
</script>

5、BOM操作

就是javascript对浏览器的一些常规操作的方法
(B:browser)

window对象
在这里插入图片描述

<button onclick="kai()">极速入职</button>
<script>
	function kai(){
     
     
		window.open("http://lagou.com" , "拉勾网" ,
		"width=500,height=300,left=400");
		// window.open("http://lagou.com" , "拉勾网" , "fullscreen=yes"); // IE才生效
	}
</script>

1. screen屏幕对象

我想知道我的电脑屏幕多大？实际上，得到的就是分辨率

<body>
	<button onclick="kai()">求大小</button>
</body>
<script>
	function kai() {
     
     
		alert(window.screen.width + "|" + window.screen.height);
	}
</script>

2. location定位

包含有关当前 URL 的信息，通常用来做页面跳转

<button onclick="test()">测试</button>
<script>
	function test(){
     
     
		console.log( "当前页面的URL路径地址："+ location.href );
		location.reload(); // 重新加载当前页面（刷新）
		location.href = "http://lagou.com"; // 跳转页面
	}
</script>

3. history浏览器历史

history对象会记录浏览器的痕迹
a.html

<a href="b.html">去b页面</a>

b.html

<button onclick="hui()">返回</button>
<script>
	function hui(){
     
     
		//history.go(-1); //上一级页面
		history.back(); // 与go(-1)是等价的
	}
</script>

4. navigator 导航（了解）

window.navigator 对象包含有关访问者浏览器的信息;

<script>
	var str = "";
	str += "<p>浏览器的代号："+ navigator.appCodeName +"</p>";
	str += "<p>浏览器的名称："+ navigator.appName+"</p>";
	str += "<p>浏览器的版本："+ navigator.appVersion+"</p>";
	str += "<p>硬件平台："+ navigator.platform+"</p>";
	str += "<p>用户代理："+ navigator.userAgent +"</p>";
	str += "<p>启用Cookies："+navigator.cookieEnabled+"</p>";
	document.write(str);
</script>

5. 存储对象

用起来和我们在java中map很相似，都是键值对的方式存数据
本地存储 localStorage

在关闭窗口或标签页之后将会删除这些数据
- 保存数据
localStorage.setItem("name","curry");
- 提取数据
localStorage.getItem("name");
- 删除数据
localStorage.removeItem("name");

- 多样化操作
// 三种方式保存数据
localStorage["a"] = 1;
localStorage.b = 2;
localStorage.setItem("c",3);
// 查看数据类型
console.log( typeof localStorage["a"] )
console.log( typeof localStorage["b"] )
console.log( typeof localStorage["c"] )
// 第一种方式读取
var a = localStorage.a;
console.log(a);
// 第二种方式读取
var b = localStorage["b"];
console.log(b);
// 第三种方式读取
var c = localStorage.getItem("c");
console.log(c);

会话存储 sessionStorage

会话，就是保持浏览器别关闭。
关闭浏览就等于结束了一次会话。
开启浏览器就意味着创建了一次会话。
- 保存数据
sessionStorage.setItem("name", "klay");
- 提取数据
var lastname = sessionStorage.getItem("name");
- 删除指定键的数据
sessionStorage.removeItem("name");
- 删除所有数据
sessionStorage.clear();

- 案例：记录点击了几下按钮
<button onclick="dian()">点我</button>
<h3 id="result"></h3>
<script>
	function dian(){
     
     
		if( sessionStorage.getItem("clickCount") ){
     
     
			sessionStorage.setItem("clickCount",
			Number(sessionStorage.getItem("clickCount")) + 1);
		}else{
     
     
			sessionStorage.setItem("clickCount", 1);
		}
		document.getElementById("result").innerHTML = "已经点击了"+
		sessionStorage.getItem("clickCount") +"次！"
	}
</script>

计时操作

1. 周期性定时器 setInterval

setInterval(1,2)：周期性触发代码exp （常用）
1：执行语句（函数）
2：时间周期，单位为毫秒
案例：闪烁的字体（1秒1变色）

<body>
	<h1 id="title">拉勾网：极速入职</h1>
	<script>
		var colors = ["red","blue","yellow","pink","orange","black"];
		var i = 0;
		function bian(){
     
     
			document.getElementById("title").style.color = colors[i++];
			if(i == colors.length){
     
     
				i = 0; // 颜色重新开始
			}
		}
		setInterval(bian,100); // 每隔0.1秒，执行一次bian函数
	</script>
</body>

案例：在闪烁字体的基础上扩展，闪烁的电子时钟

<body>
	<h1 id="title"></h1>
	<script>
		var colors = ["red","blue","yellow","pink","orange","black"];
		var i = 0;
		function bian(){
     
     
			document.getElementById("title").style.color = colors[i++];
			if(i == colors.length){
     
     
				i = 0; // 颜色重新开始
			}
		}
		function time(){
     
     
			var d = new Date();
			var str = d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"号"+d.getHours()+"点"+d.getMinutes()+"分"+d.getSeconds()+"秒";
			document.getElementById("title").innerHTML = str;
		}
		setInterval(bian,100); // 每隔1秒，执行一次变色函数bian
		setInterval(time,1000); // 每隔1秒，执行一次时间函数time
	</script>
</body>

2. 停止定时器 clearInterval

案例：模拟年会抽奖

<body>
	<img id="tu" src="../lagou-html/img/1.jpg" width="50%" />
	<br />
	<button onclick="begin()">开始</button>
	<button onclick="stop()">停止</button>
	<script>
		var arr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
		function begin() {
     
     
			timer = setInterval(bian, 100); // 没有使用var，所以timer是全局变量
		}
		function stop() {
     
     
			clearInterval(timer); // 停止定时器
		}
		function bian() {
     
     
			var i = Math.floor(Math.random() * arr.length); // 0-4
			document.getElementById("tu").src = "../lagou-html/img/" + arr[i];
		}
	</script>
</body>

3. 一次性定时器 setTimeout

相当于延迟的效果，只执行一次

<script>
	function bian(){
     
     
		document.body.style.backgroundColor = "red";
	}
	//3秒之后调用
	setTimeout(bian,3000);
</script>

模块一作业

编写一个注册用户信息页面，需求如下：
▹表单中包括：用户名，密码，性别，学历（本科，专科），自我介绍；
▹输入完用户名后校验只能是"admin"，否则弹框提示错误
▹点击提交执行后执行事件，把自我介绍的内容弹框提示出来；
使用html+css完成效果图（素材见课件）

第三阶段模块二前端高级(jQuery、ES6、Bootstrap)

任务四 (jQuery)

1. jQuery介绍

jQuery由美国人John Resig（约翰·莱西格）于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more
实现隔行变色效果，JavaScript要循环加判断，而jQuery只需一句关键代码

$("tr:even").css("background-color","#ccc");

在这里插入图片描述

1.1 jQuery能做什么?

访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

其实，jQuery和JavaScript的之间关系，可以理解为“成语”和“白话文”之间的关系。成语是对白话文的高度压缩，而jQuery也是对JavaScript的高度压缩库

1.2 jQuery的优势

体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性

1.3 jQuery下载

进入jQuery官网：http://jQuery.com
在这里插入图片描述

我们使用压缩版就可以。体积更小，内容已经通过算法进行压缩，不会浪费资源空间！
而开发版就针对修改jQuery源码的专业前端开发者的。

2. jQuery的使用

jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突
在页面中使用传统引入js文件的方式引入即可。

<script src="js/jquery-3.4.1.min.js"></script>

2.1 基本的语法介绍

<script>
	$(selector).action();
</script>

说明：
工厂函数 $() ：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素（没错，用法基本上和css一致）
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法“$”等同于“ jQuery ”
例如：

<body>
	<p>hello</p>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	alert( $("p").text() );
</script>

2.2 jQuery对象与DOM对象

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

$("#title").html();
// 等同于
document.getELementById("title").innerHTML;

想混用，要转换
DOM对象转jQuery对象
jQuery对象转DOM对象

//DOM对象转jQuery对象
var a = document.getElementById("name"); // a是DOM对象
var b = $(a); // b是jQuery对象

//jQuery对象转DOM对象
var a = $("#name"); // a是jQuery对象
var b = jqObject.get(0); // b是DOM对象

2.3 选择器

2.3.1 基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$(“h2” )选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(" .title")选取所有class为title的元素
ID选择器	#id	根据给定的id匹配元素	$(" #title")选取id为title的元素
并集选择器	selector1,selector2,…,selectorN	将每一个选择器匹配的元素合并后一起返回	$(“div,p,.title” )选取所有div、p和拥有class为title的元素
交集选择器	element.class或element#id	匹配指定class或id的某元素或元素集合	$(“h2.title”)选取所有拥有class为title的h2元素

<p>中国</p>
<p>武汉</p>
<p class="jy">加油</p>
<p id="wan">祖国万岁</p>
<h3 class="jy">祖国万岁</h3>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//$("p").css("color","red"); // 标签选择器，获得所有的p
//$(".jy").css("color","red"); //类选择器
//$("#wan").css("color","red"); //ID选择器,更具备唯一性
//$(".jy,#wan").css("color","red"); // 并集选择器，.jy和#wan
$("h3.jy").css("color","red"); // 交集选择器，既是h3标签，又拥有.jy的元素
</script>

2.3.2 层次选择器

名称	语法构成	描述	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素	$("#menu span" )选取#menu下的元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取#menu的子元素
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻元素之后的同辈元素
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )选取元素之后所有的同辈元素

<h3>000</h3>
<div id="x">
	111
	<p>p1</p>
	<div>
		<p>p2</p>
	</div>
</div>
<h3>222</h3>
<h3>333</h3>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	//$("#x p").css("color","red"); // 后代选择器，忽略层级
	//$("#x>p").css("color","red"); // 子代选择器，只负责子级
	//$("#x+h3").css("color","red"); // 相邻元素选择器，下一个紧邻的兄弟h3
	$("#x~h3").css("color","red"); // 同辈元素选择器，下面的所有兄弟h3
</script>

2.3.3 属性选择器

名称	语法构成	描述	示例
属性选择器	[attribute]	选取包含给定属性的元素	$(" [href]" )选取含有href属性的元素
	[attribute=value]	选取等于给定属性是某个特定值的元素	$(" [href =’#’]" )选取href属性值为“#”的元素
	[attribute !=value]	选取不等于给定属性是某个特定值的元素	$(" [href !=’#’]" )选取href属性值不为“#”的元素
	[attribute^=value]	选取给定属性是以某些特定值开始的元素	$(" [href^=‘en’]" )选取href属性值以en开头的元素
	[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$(" [href$=’.jpg’]" )选取href属性值以.jpg结尾的元素
	[attribute*=value]	选取给定属性是以包含某些值的元素	$(" [href* =‘txt’]" )选取href属性值中含有txt的元素
	[s1] [s2] [sN]	选取满足多个条件的复合属性的元素	$(“li[id][title=新闻]” )选取含有id和title属性为新闻的元素

<a href="www.lagou.com">拉勾网</a>
<a href="www.sina.com.cn">新浪网</a>
<a href="http://www.163.com">网易</a>
<p href="x">哈哈1</p>
<p href="x" title="x">哈哈2</p>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	//$("[href]").css("color","red"); // 选取拥有href属性的元素
	//$("[href='x']").css("color","red"); // 选取拥有href=x的元素
	//$("a[href!='x']").css("color","red"); // 选取a标签中href不等于x的元素
	//$("[href^='www']").css("color","red"); // 选取href属性以www开头的元素
	//$("[href$='com']").css("color","red"); // 选取href属性以com结尾的元素
	//$("[href*='a']").css("color","red"); // 选取href属性包含a的元素
	$("p[href][title='x']").css("color","red"); // 选取拥有href属性和title属性，并且title=x的p元素
</script>

2.3.4 过滤选择器

语法构成	描述	示例
:first	选取第一个元素	$(" li:first" )选取所有元素中的第一个元素
:last	选取最后一个元素	$(" li:last" )选取所有元素中的最后一个元素
:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有元素
:eq(index)	选取索引等于index的元素（index从0开始）	$(“li:eq(1)” )选取索引等于1的元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的元素（注：小于1，不包括1）

<h2 id="h2#x">修仙小说</h2>
<ul>
	<li>凡人修仙传</li>
	<li>遮天</li>
	<li>神墓</li>
	<li>残袍</li>
	<li>大主宰</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	//$("li:first").css("color","red"); // 第一个li
	//$("li:last").css("color","red"); // 最后一个li
	//$("li:even").css("color","red"); // 偶数行的li
	//$("li:odd").css("color","red"); // 奇数行的li
	//$("li:eq(2)").css("color","red"); // 下标为2的li
	//$("li:gt(1)").css("color","red"); // 下标大于1的li
	//$("li:lt(2)").css("color","red"); // 下标小于2的li
	$("#h2\\#x").css("color","red"); // 使用转义符
</script>

2.4 事件

2.4.1 鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouse over事件	鼠标移过时
mouseout( )	触发或将函数绑定到指定元素的mouse out事件	鼠标移出时

<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	$("img").click( function(){
     
     
		//点击一下，换照片
		$(this).attr( "src","img/2.jpg" ); //this就是事件触发的源头
	} );
	$("img").mouseover( function(){
     
      //移动到元素上
		$(this).css( "border","2px solid red" );
	} );
	$("img").mouseout( function(){
     
      //离开元素
		$(this).css( "border","2px solid white" );
	} );
</script>

2.4.2 键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有：

方法	描述	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时

<input>
<h3></h3>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	$("input").keyup( function(){
     
     
		var str = $(this).val(); // 获取框中的值
		$("h3").text( str ); // 将h3元素中的文本内容更改为str
	} );
</script>

在这里插入图片描述

2.4.3 表单事件

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表：

方法	描述	执行时机
focus( )	触发或将函数绑定到指定元素的focus事件	获得焦点
blur( )	触发或将函数绑定到指定元素的blur事件	失去焦点

<form action="">
	<p>帐号: <input id="a" value="请输入帐号..."> </p>
	<p>电话: <input id="b"> </p>
</form>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	//获得焦点（激活/点击一下）
	$("#a").focus(function(){
     
     
		$(this).val("");
	});
	//失去焦点（未激活/未点击）
	$("#a").blur(function(){
     
     
		$(this).val("请输入帐号...");
	});
</script>

2.4.4 鼠标悬停复合事件

hover()方法相当于mouseover与mouseout事件的组合

<img src="img/3.jpg" width="400">
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	$("img").hover(
		function(){
     
     
			$(this).css("border","5px solid red");
		},
		function(){
     
     
			$(this).css("border","5px solid white");
		}
	);
</script>

2.4.5 连续点击复合事件

toggle()除了可以模拟鼠标的连续单击事件

<h2>修仙小说</h2>
<ul>
	<li>凡人修仙传</li>
	<li>遮天</li>
	<li>神墓</li>
	<li>残袍</li>
	<li>大主宰</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	$("h2").click(function(){
     
     
		$("ul").toggle(); // 连续点击，ul的可见和隐藏进行切换
	});
</script>

2.4.6 事件的动态绑定

对dom元素绑定事件的另一种写法

绑定一个事件

$(".del").on('click', function() {
    
    
	alert('hello');
})

绑定多个事件

$(".del").on('click mouseover', function() {
    
    
	alert('hello');
})

2.5 元素的隐藏和显示

2.5.1 改变元素的宽和高（带动画效果）

show( speed )：显示
hide( speed )：隐藏
toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<style>
	div{
     
     
		width: 200px;
		height: 200px;
		background-color: black;
	}
</style>
<body>
	<button id="btn1">显示</button>
	<button id="btn2">隐藏</button>
	<button id="btn3">切换</button>
	<div></div>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script>
		$("#btn2").click(function(){
     
     
			//fast:快速的
			//slow:缓慢的
			//毫秒：自定义
			$("div").hide(2000);
		});
		$("#btn1").click(function(){
     
     
			$("div").show('slow');
		});
		$("#btn3").click(function(){
     
     
			$("div").toggle(1000);
		});
	</script>
</body>

2.5.2 改变元素的高（拉伸效果）

slideDown( speed ) ：显示
slideUp( speed )：隐藏
slideToggle( speed )等价于slideDown+slideUp

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<script>
	$("#btn2").click(function(){
     
     
		$("div").slideUp(1000); //向上收缩
	});
	$("#btn1").click(function(){
     
     
		$("div").slideDown(1000); //向下伸展
	});
	$("#btn3").click(function(){
     
     
		$("div").slideToggle(1000); //切换
	});
</script>

2.5.3 不改变元素的大小（淡入淡出效果）

fadeIn( speed ) 显示
fadeOut( speed ) 隐藏
fadeToggle( speed ) 等价于fadeIn+fadeOut动画
fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<script>
	$("#btn2").click(function(){
     
     
		$("div").fadeOut(1000); // 隐藏：淡出我的视线
	});
	$("#btn1").click(function(){
     
     
		$("div").fadeIn(1000); // 显示：映入眼帘
	});
	$("#btn3").click(function(){
     
     
		$("div").fadeToggle(1000); // 切换
	});
	$("#btn4").click(function(){
     
     
		$("div").fadeTo(1000,0.5); // 1秒内变成50%的透明度
	});
</script>

2.5.4 链

链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起；
例如：点击一次按钮，让div完成4个指定动作
1. 背景变粉
2. 字体变绿
3. 收缩
4. 拉伸

<style>
	div{
     
     
		width: 200px;
		height: 200px;
		background-color: black;
		color:white;
		font-size: 3em;
	}
</style>
<body>
	<button>试试</button>
	<div>hello</div>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script>
		$("button").click(function(){
     
     
			$("div").css("backgroundcolor","pink").css("color","green").slideUp(1000).slideDown(1000);
		});
	</script>
</body>

2.6 DOM和CSS的操作

2.6.1 属性函数

attr( “属性” ); 获得元素的属性值
○ attr( “属性” , “新值” ); 修改元素的属性值
○ attr( 样式参数 ) ：样式参数可以写成json格式

<body>
	<button id="btn1">点我试试</button>
	<hr>
	<img src="img/1.jpg" title="美女大图" width="300">
	<script src="js/jquery-3.4.1.min.js"></script>
	<script>
		$("#btn1").click(function(){
     
     
			$("img").attr("src","img/2.jpg");
			$("img").attr("title","高清无码");
			$("img").attr( {
     
     width:"200",height:"200"} );
		});
	</script>
</body>

val() ; 获得表单元素中的value值
○ val(“x”) 修改表单元素中的value值
html(); 获得元素中的内容（标签+文本）
○ html(“x”) 修改元素中的内容（标签+文本）
text(); 获得元素中的文本
○ text(“x”) 修改元素中的文本（包括标签）

<button>试试</button>
<hr>
<input id="username">
<div>
	<h1><i>中国加油！</i></h1>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	$("button").click(function(){
     
     
		//alert($("input").val()); //input框中的值
		//$("input").val("哈哈哈"); //修改input框中的值
		//alert( $("div").html() ); //获得div中的内容（包含标签信息）
		//alert( $("div").text() ); //获得div中的内容（不包含标签信息，只包含文本内容）
		$("div").text("祖国万岁！"); //修改div中的内容（全部内容都覆盖）
	});
</script>

2.6.2 样式函数

css( “属性”); 获得该属性值
css( “属性”,“值”); 设置属性的值
css( { json} ); 设置多个属性的值

<style>
	div{
     
     
		width: 150px;
		height: 150px;
		background-color: #000;
	}
</style>
<body>
	<button>试试</button>
	<hr>
	<div></div>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script>
		$("button").click(function(){
     
     
			//var w = $("div").css("width"); // 获取css属性，width的值
			//1.一个键值对
			//$("div").css("background-color","pink");
			//2.链式编程
			//$("div").css("background-color","pink").css("borderradius","50%");
			//3.json为参数
			$("div").css({
     
     
				opacity:"0.4",
				background:"orange",
				borderRadius:"50%"
			} );
		});
	</script>
</body>

width(); 获得元素的宽度
width( number ); 修改元素的宽度
height(); 获得元素的高度
height( number ); 修改元素的高度

<style>
	div{
     
     
		width: 150px;
		height: 150px;
		background-color: #000;
	}
</style>
<body>
	<button>试试</button>
	<hr>
	<div></div>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script>
		$("button").click(function(){
     
     
			var w = $("div").width(); // （无参）获取宽度
			var h = $("div").height();// （无参）获取高度
			// alert("宽:"+w+"px，高:"+h+"px");
			$("div").width("300"); // （传参）修改宽度
			$("div").height("300"); //（传参）修改高度
		});
	</script>
</body>

2.6.3 类样式函数

addClass(); 为元素添加类样式
removeClass(); 将元素的类样式移除
toggleClass(); 样式的切换（有->无，无->有）

<style>
	div{
     
     
		width: 100px;
		height: 100px;
		background-color: #000;
	}
	.a{
     
     
		background: palevioletred;
		border-radius: 50%;
	}
	.b{
     
     
		border:5px dashed darkcyan;
		opacity: 0.6;
	}
	.cn{
     
     
		background: #000;
		color:#FFF;
		font-family: 字魂49号-逍遥行书;
	}
</style>
<body>
	<button id="btn1">试试</button>
	<button id="btn2">取消透明度</button>
	<button id="btn3">样式切换</button>
	<hr>
	<div></div>
	<h1>中华人民共和国，万岁！</h1>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script>
		$("#btn1").click(function(){
     
     
			// $("div").addClass("a");
			$("div").addClass("a b");
		});
		$("#btn2").click(function(){
     
     
			$("div").removeClass("b");
		});
		$("#btn3").click(function(){
     
     
			$("h1").toggleClass("cn");
		});
	</script>
</body>

2.6.4 节点操作

创建节点
○ 工厂函数$()用于获取或创建节点
插入节点
○ 插入子节点

语法	功能
append(content)	$(A).append(B)表示将B追加到A中，如：$(“ul”).append($newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中，如：$newNode1.appendTo(“ul”);
prepend(content)	$(A). prepend (B)表示将B前置插入到A中，如：$(“ul”). prepend($newNode1);
prependTo(content)	$(A). prependTo (B)表示将A前置插入到B中，如：$newNode1.prependTo (“ul”);

插入同辈节点

语法	功能
after(content)	$(A).after (B)表示将B插入到A之后，如：$(“ul”).after($newNode1);
insertAfter(content)	$(A). insertAfter (B)表示将A插入到B之后，如：$newNode1.insertAfter(“ul”);
before(content)	$(A). before (B)表示将B插入至A之前，如：$(“ul”).before($newNode1);
insertBefore(content)	$(A). insertBefore (B)表示将A插入到B之前，如：$newNode1.insertBefore(“ul”);

替换节点
○ replaceWith()
○ replaceAll()
复制节点
○ clone()
删除节点
○ remove()删除整个节点
○ empty()清空节点内容

<input> <button id="test">测试</button>
<ul>
	<li>金瓶梅</li>
	<li>貂蝉往事</li>
	<li>东京热不热</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	$("#test").click(function(){
     
     
		var bookname = $("input").val();
		var newli = $("<li>"+bookname+"</li>"); //通过工厂函数，创建新的li节点
		/*添加子节点*/
		//$("ul").append(newli); // newli添加到ul后面
		//newli.appendTo("ul"); // newli添加到ul后面
		//$("ul").prepend(newli); // newli添加到ul前面
		//newli.prependTo("ul");
		/*添加同辈节点*/
		//$("li:last").after( newli ); // newli添加到最后的li的后面
		//newli.insertAfter("li:last");
		//$("li:last").before(newli); //newli添加到最后的li的前面
		//newli.insertBefore("li:last");
		/*替换节点*/
		//$("li:eq(1)").replaceWith(newli); // 将第二个li替换成newli
		//newli.replaceAll( "li:eq(1)" );
		/*复制节点*/
		//$("li:first").clone().insertAfter("li:last"); // 复制第一个li，并插入到最后一个li的后面
		/*删除节点*/
		//$("li:eq(1)").empty(); // 清空了节点上的文本（节点并没有消失）
		$("li:eq(1)").remove(); //删除节点
	});
</script>

2.7 遍历节点

2.7.1 祖先元素

用于向上遍历 DOM 树的方法

parent() 返回被选元素的直接父元素，仅仅是上一级（找爸爸）
parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分

<p><button>测试</button></p>
<ul>
	<li>a</li>
	<li>
		<b>b</b>
	</li>
	<li>c</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	$("button").click(function(){
     
     
		//var x = $("b").parent().html(); // 找爸爸
		//var x = $("b").parents("ul").html(); // 找祖宗 ul
		//var x = $("b").parents("body").html(); // 找祖宗 body
		alert( x );
	});
</script>

2.7.2 同辈元素

next() 获取紧邻匹配元素之后的元素
prev() 获取紧邻匹配元素之前的元素
siblings( ) 获取位于匹配元素前面和后面的所有同辈元素
siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素中，选择的

<button>测试</button>
<p>p1</p>
<ul>
	<li>a</li>
	<li>
		<b>b</b>
	</li>
	<li>c</li>
</ul>
<p>p2</p>
<p id="x">p3</p>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	$("button").click(function(){
     
     
		//var x = $("ul").next().text(); // 紧邻的下一个元素
		//var x = $("ul").prev().text(); // 紧邻的上一个元素
		//var x = $("ul").siblings("#x").text(); // 所有的兄弟中，id=x的
		var arr = $("ul").siblings(); // ul的所有兄弟,1个button，3个p，2个script
		for(var i = 0 ;i< arr.length ;i++){
     
     
			alert(arr[i]);
		}
	});
</script>

2.7.3 后代元素

后代是子、孙、曾孙等等

children( [selector] ) 方法返回被选元素的所有直接子元素，“孩子”

<button>测试</button>
<ul>
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	$("button").click(function(){
     
     
		//var x = $("ul").children().text(); //所有子节点：abc
		var x = $("ul").children("li:first").text(); //ul中的第一个子节点
		alert(x);
	});
</script>

find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代。

<button>测试</button>
<ul>
	<li>盘古</li>
	<li>蚩尤</li>
	<li>刑天
		<p>龚工</p>
	</li>
	<h3>祝融</h3>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	$("button").click(function(){
     
     
		//var x = $("ul").find("p").text(); //在ul中查找p元素，忽略层级
		//var x = $("ul").find("h3").text(); //在ul中查找h3元素，忽略层级
		var x = $("ul").find().text(); // 找什么？不知道！
		alert(x);
	});
</script>

2.7.4 元素的过滤

first()：过滤第一个元素
last()：过滤最后一个元素
eq(index)：过滤到下标为index的元素
not()：除了什么之外的元素
is()：返回布尔，判断是不是这种元素

<button>测试</button>
<ul>
	<li>盘古</li>
	<li>蚩尤</li>
	<li>刑天</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	$("button").click(function(){
     
     
		//var x = $("li").first().text(); // 第一个li
		//var x = $("li").last().text(); // 最后一个li
		//var x = $("li").eq(1).text(); // 下标为1的li
		//var x = $("li").not("li:eq(1)").text(); // 除了下标为1的其余所有li
		var x = $("li").parent().is("ul"); // 返回布尔型，li的父节点是不是ul
		alert(x);
	});
</script>

3. 案例

3.1 手风琴特效

<style>
	dd{
     
     
		display: none; /*隐藏元素*/
	}
</style>
<body>
	<nav>
		<header>拉勾网</header>
		<ul>
			<li>
				<dl>
					<dt>求职</dt>
					<dd>1.简历</dd>
					<dd>2.面试</dd>
					<dd>3.入职</dd>
				</dl>
			</li>
			<li>
				<dl>
					<dt>教育</dt>
					<dd>1.看视频</dd>
					<dd>2.做作业</dd>
					<dd>3.24小时在线辅导</dd>
				</dl>
			</li>
			<li>
				<dl>
					<dt>3W创业</dt>
					<dd>1.帮助小企业</dd>
					<dd>2.头脑风暴</dd>
					<dd>3.赚钱啦</dd>
				</dl>
			</li>
		</ul>
	</nav>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script>
		$("nav dt").click(function(){
     
     
			//所有的dd全部都闭合上，除了自己的兄弟
			$("dd").not( $(this).siblings() ).slideUp(500);
			// 自己的兄弟进行切换，显示闭合上，闭合的显示出来
			$(this).siblings().slideToggle(500);
		});
	</script>
</body>

3.2 购物车结算

在这里插入图片描述

<style>
	.jian,.jia{
     
     
		border:1px solid #999;
		display: inline-block; /*超链接a是行内元素，只能转换成行内块元素，才能改变宽和高*/
		width: 20px;
		height: 20px;
		text-align: center;
		text-decoration: none;
	}
</style>
<body>
	<table border="1" cellspacing="0" width="400">
		<tr>
			<td>商品编号</td>
			<td>名称</td>
			<td>单价</td>
			<td>数量</td>
			<td>总价</td>
		</tr>
		<tr>
			<td>1</td>
			<td>炸香肠</td>
			<td>3</td>
			<td>
				<a href="#" class="jian">-</a>
				<span>1</span>
				<a href="#" class="jia">+</a>
			</td>
			<td>3</td>
		</tr>
		<tr>
			<td>2</td>
			<td>王八</td>
			<td>10</td>
			<td>
				<a href="#" class="jian">-</a>
				<span>1</span>
				<a href="#" class="jia">+</a>
			</td>
			<td>10</td>
		</tr>
		<tr>
			<td>3</td>
			<td>恐龙</td>
			<td>1000</td>
			<td>
				<a href="#" class="jian">-</a>
				<span>1</span>
				<a href="#" class="jia">+</a>
			</td>
			<td>1000</td>
		</tr>
	</table>
	<p style="width: 400px; text-align: right;">
		总价：<b style="color:red;">111</b> <button>提交订单</button>
	</p>
</body>

$(".jia").on('click',function(){
    
    
    var i = $(this).prev().text();  //获得原来的商品数量
    var price = $(this).parent().prev().text(); //获取单价
    i++;
    price = price*i;
    $(this).prev().text(i);//现在的商品数量
    $(this).parent().next().text(price);//现在总价
    // console.log(price);
    getTotal()
});

$(".jian").on('click',function(){
    
    
    var i = $(this).next().text();
    var price = $(this).parent().prev().text(); 
    i--;
    if(i==0){
    
    
        //询问用户数量已经是0了，是否删除该商品
        if(confirm('数量已经是0了，是否删除该商品?')){
    
    
            //删除
            $(this).parents('tr').remove();
        }
    } else {
    
    
        price = price*i;
        $(this).next().text(i);
        $(this).parent().next().text(price);
        console.log(i);
    }
    getTotal()
});

// 计算所有商品的总价 方法1
// function getTotal(){
    
    
//     // var arr = $('tr').not('tr:first').find('td:last');
//     var arr = $('tr:not(tr:first)').find('td:last');
//     var sum = 0;
//     for(var i=0; i<arr.length; i++){
    
    
//         // sum += parseInt($(arr[i]).text());
//         sum += Number($(arr[i]).text());
//     }
//     $('b:last').text(sum);
//     console.log();
// }

// 计算所有商品的总价 方法2
function getTotal(){
    
    
    // var arr = $('tr').not('tr:first').find('td:last');
    var sum = 0;
    var arr = $('tr:not(tr:first)').find('td:last').each(function(){
    
     //直接遍历
        sum += Number($(this).text());
    });
    $('b:last').text(sum);
    // console.log();
}

任务五 (ES6)

1.ECMAScript6 简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。
它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言

1.1 ECMAScript 和 JavaScript 的关系

要讲清楚这个问题，需要回顾历史。
1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织ECMA，希望这种语言能够成为国际标准
ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。
因此，ECMAScript （宪法）和 JavaScript（律师）的关系是，前者是后者的规格，后者是前者的一种实现

1.2 ES6 与 ECMAScript 2015 的关系

2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指JavaScript 语言的下一个版本。
ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了ES2015、ES2016、ES2017 等等

2. 搭建前端环境

2.1 Node 环境

2.1.1 什么是Node.js

简单的说 Node.js 就是运行在服务端的 JavaScript。
JavaScript程序，必须要依赖浏览器才能运行！没有浏览器怎么办？OK，nodejs帮你解决
Node.js是脱离浏览器环境运行的JavaScript程序，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

2.1.2 Node.js有什么用

如果你是前端程序员，你不懂得像PHP、Python或Ruby等动态编程语言，然后你想创建自己的服务，那Node.js是一个非常好的选择。
Node.js 是运行在服务端的 JavaScript，如果你熟悉Javascript，那么你将会很容易的学会Node.js。
当然，如果你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。

2.1.3 安装

下载

官网：https://nodejs.org/en/
中文网：http://nodejs.cn/
LTS：长期支持版本
Current：最新版
安装：Windows下双击点击安装——>Next——>finish
注意：
- node-v14.5.0-x64.msi 最新版本，如果是win7系统的话，可能安装不了。
- 如果是win7系统，安装node-v10.14.2-x64.msi这个版本

查看版本

在dos窗口中执行命令查看版本号
node -v

创建文件夹 lagou-node

用vscode打开目录，其目录下创建 hello.js
console.log("hello,nodejs");
打开命令行终端：Ctrl + Shift + y
输入命令
node hello.js
第一次运行，可能会报错！
兼容性的问题，以管理员身份运行即可
这样，没有使用浏览器，我们也可以运行js程序了

2.1.4 服务器端应用开发（了解）

创建 node-server.js

const http = require("http"); // node中自带的require引入方法，http也是node中自带的服务对象
http.createServer( function(request,response){
    
    
	// 发出http请求的头部信息
	// http的状态码：200；OK
	// 请求的内容类型：text/plain
	response.writeHead(200,{
    
    "Content-Type": "text/plain"});
	//响应的数据 "hello,welcome！" ,此时，并不支持中文（以后一定会解决！）
	response.end("hello,welcome!");
} ).listen(8888); // 监听端口
console.log("服务器已启动，请访问 http://127.0.0.1:8888");

服务器启动成功后，在浏览器中输入：http://localhost:8888/ 查看webserver成功运行，并输出html页面
停止服务：ctrl + c

2.2 NPM环境

2.2.1 什么是NPM

NPM全称Node Package Manager，是Node.js包管理工具
是全球最大的模块生态系统，里面所有的模块都是开源免费的，也是Node.js的包管理工具，相当于前端的Maven
如果一个项目需要引用很多第三方的js文件，比如地图，报表等，文件杂而乱，自己去网上下载，到处是广告和病毒
那么，我们就想办法，把这些js文件统一放在一个仓库里，大家谁需要，谁就去仓库中拿过来，方便多了
npm就是这个仓库系统，如果你需要某个js文件，那就去远程仓库中下载，放在本地磁盘中，进而引用到我们的项目中
管理前端工程 so easy！

2.2.2 NPM工具的安装位置

node的环境在安装的过程中，npm工具就已经安装好了。
Node.js默认安装的npm包和工具的位置：Node.js目录\node_modules
在这个目录下你可以看见 npm目录，npm本身就是被NPM包管理器管理的一个工具，说明 Node.js已经集成了npm工具

#在命令提示符输入 npm -v 可查看当前npm版本
npm -v

2.2.3 使用npm管理项目

项目初始化

全新创建一个目录，作为项目目录，使用dos命令进入此目录，输入命令

npm init
# 接下来是一堆项目信息等待着你输入，如果使用默认值或你不知道怎么填写，则直接回车即可。
# package name: 你的项目名字叫啥
# version: 版本号
# description: 对项目的描述
# entry point: 项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）
# test command: 项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
# git repository: 如果你要将项目上传到git中的话，那么就需要填写git的仓库地址（这里就不写地
址了）
# keywirds： 项目关键字（我也不知道有啥用，所以我就不写了）
# author: 作者的名字（也就是你叫啥名字）
# license: 发行项目需要的证书（这里也就自己玩玩，就不写了）

最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
我们之后也可以根据需要进行修改。
上述初始化一个项目也太麻烦了，要那么多输入和回车。想简单点，一切都按照默认值初始化即可，ok，安排

npm init -y

2.2.4 修改npm镜像和存储地址

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。
这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。
设置镜像和存储地址：

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#设置npm下载包时保存在本地的地址（建议英文目录）
npm config set prefix "E:\\repo_npm"
#查看npm配置信息
npm config list

2.2.5 npm install命令的使用

npm install jquery

使用 npm install 安装依赖包的最新版
模块安装的位置：项目目录\node_modules
安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的
jQuery版本有很多，上述命令下载的什么版本的？最新版
如果我的项目使用1.9.1版本进行开发的，通过npm安装的3.5.1版本太新，会导致项目失效，如何安装指定版本库？

npm install [email protected]

3. ES6基本语法

ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。
本部分只学习前端开发中ES6的必要知识，方便后面项目开发中对代码的理解。

3.1 let声明变量

与我们的JavaScript中var声明变量有什么区别？

作用域不同

{
    
    
	var a = 0; // var声明的变量是全局变量
	let b = 0; // let声明的变量是局部变量
}
console.log(a);
console.log(b); //b is not defined：b没有定义

声明次数不同

// var可以声明多次
// let只能声明一次
var m = 1;
var m = 2;
let n = 3;
let n = 4; //SyntaxError: Identifier 'n' has already been declared（语法错误：n已
经声明过了）
console.log(m);
console.log(n);

声明与使用顺序不同

// var 声明的变量会全局存储
// let 声明的变量只能在执行后才存储
console.log( x ); //没有报错，输出：undefined
var x = "苹果";
console.log(y); //y is not defined（y没有定义）
let y = "香蕉";

3.2 const声明常量

const 声明常量,为只读变量

一旦声明之后，其值是不允许改变的
一但声明必须初始化，否则会报错 SyntaxError: Missing initializer in const declaration（语法错误，声明常量丢失了初始化）

const PI = 3.14;
PI = 3.1415; //Assignment to constant variable.（声明的是常量）
console.log( PI );

3.3 解构赋值

解构赋值是对赋值运算符的扩展
它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
解构，顾名思义，就是将集合型数据进行分解，拆分，把里面的值逐一遍历获取
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

3.3.1 数组解构

var arr = [1,2,3];
// 传统的js
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a,b,c);
//es6的解构
var [x,y,z] = arr;
console.log(x,y,z);

3.3.2 对象解构

var user = {
    
    
	username : "吕布",
	weapon:"方天画戟",
	horse:"赤兔马"
};
// 传统的js
let mingzi = user.username;
let wuqi = user.weapon;
let zuoji = user.horse;
console.log("姓名:"+mingzi+",武器:"+wuqi+",坐骑:"+zuoji);
//es6的解构
let {
    
    username,weapon,horse} = user; // 注意：解构的变量名必须是对象中的属性
console.log("姓名:"+username+",武器:"+weapon+",坐骑:"+horse);

3.4 模板字符串

模板字符串相当于加强版的字符串
用反引号 `,除了作为普通字符串，还可以用来定义多行字符串
还可以在字符串中加入变量和表达式。

3.4.1 定义多行字符串

再见了，\n

let str = `hello,
你俩在哪呢？
心情不好，出来喝点啊！`;
console.log(str);

3.4.2 字符串插入变量和表达式

再见了，字符串的拼接用 +

let name = `吕布`;
let age = 24;
// 传统的拼接字符串
var info1 = "我叫:"+ name +",我今年"+age+"岁！";
console.log(info1);
// es6的拼接字符串
var info2 = `我叫:${
      
      name},我明年${
      
      age+1}岁！`;
console.log(info2);

3.4.3 字符串中调用函数

还能这么玩

function test(){
    
    
	return "吃喝玩乐";
}
let str = `悲催的人生，从${
      
      test()}开始`;
console.log( str );

3.5 声明对象简写

定义对象的时候，可以用变量名作为属性名

let name = `吕布`;
let age = 28;
//传统
let user1 = {
    
    
	name : name,
	age : age
};
console.log(user1);
//es6新语法中的简写
let user2 = {
    
    name,age};
console.log(user2);

3.6 定义方法简写

// 传统
let user1 = {
    
    
	say : function(){
    
    
		console.log("大家好！");
	}
};
user1.say();
//es6，直接声明函数
let user2 = {
    
    
	say(){
    
    
		console.log("大家好啊！");
	}
};
user2.say();

3.7 对象拓展运算符

拓展运算符 {…} 将参数对象中所有可以遍历的属性拿出来，然后拷贝给新对象

3.7.1 拷贝对象(深拷贝)

科幻电影中的一滴血，就可以制作出一个完全一模一样的克隆人

let user1 = {
    
    
	name:"项羽",
	age:34
};
let user2 = {
    
    ...user1}; // 深拷贝（克隆）
console.log(user1);
console.log(user2);

3.7.2 合并对象

吞噬合并（两个对象合并成一个对象）

let user1 = {
    
    
	name:"项羽",
	age:34
};
let user2 = {
    
    head:"诸葛亮"};
let user = {
    
    ...user1,...user2};
console.log( user );

3.8 函数的默认参数

形参处已声明，但不传入实参会怎样？

function test(name , age = 18){
    
    
	console.log(`我叫${
      
      name}，我今年${
      
      age}岁`);
}
test("吕布",33); //我叫吕布，我今年33岁
test("貂蝉"); //我叫貂蝉，我今年18岁
test("关羽",null); //我叫关羽，我今年null岁
test("马超",""); //我叫马超，我今年岁
test("张飞",undefined); //我叫张飞，我今年18岁

3.9 函数的不定参数

定义方法时，不确定有几个参数？

function test( ...arg ){
    
    
	console.log(`传入了${
      
      arg.length}个参数`);
	for(var i = 0 ;i<arg.length;i++){
    
    
		console.log(arg[i]);
	}
}
test(1);
test(1,2);
test(1,2,3,4,5,6);
test();
test("郭","嘉",28);

3.10 箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体

// 传统
var f1 = function(a){
    
    
	return a*10;
}
console.log( f1(10) );
// es6
var f2 = a=>a*10;
console.log( f2(20) );
// 当箭头函数一个参数时，（）可以省略
// 当箭头函数没有参数或者有多个参数，要用（）括起来
// 当箭头函数的函数体有多行语句，用｛｝括起来，表示代码块
// 当只有一条语句，并且需要返回时，可以省略｛｝，结果会自动返回
var f3 = (a,b) => {
    
    
	let sum = a+b;
	return sum;
}
console.log( f3(3,7) );
// 可以将f3进行简化
var f4 = (a,b) => a + b;
console.log( f3(11,22) );

3.11 Promise（了解）

用来解决回调函数的嵌套噩梦（后面学习ajax才能更好的理解）
我们回顾一下嵌套噩梦：
○ 你和我打架，我打不过你，我说：你在这等着，我找我哥来揍你！
○ “哥，我被老王打了，你帮我揍他！”，“行，我先把饭做完，你先去找刘备，把刘备找来，我和刘备再一起帮你报仇！”
○ “刘备，我被老王打了，我哥叫我来找你，一起帮我报仇！”，“没问题，兄弟，我去交电话费，你去找我二弟关羽，他打架厉害，把他叫来，我们一起更有把握！”
○ “关羽，我被人打了，我哥叫我找刘备，刘备让我来找你，一起帮我报仇！”，“没问题，兄弟，我有点事，你先去找我三弟张飞，把张飞找来，我这边就办完事了，我们一起帮你报仇去！”
○ “张飞，我让老王打了，谁谁谁，哎，反正关羽让我找你，你跟我走，一起帮我报仇去！”，“行啊，老铁，我一会从老丈人回来就去找你，你去把我二哥的儿子关平找来，正好打一架让这小子练练胆。找到了我们一起帮你报仇！”
○ 。。。
○ 满嘴的兄弟情深，一个拖一个，就是不想帮我报仇
使用promise解决掐架找人的噩梦
○ “哥，老王打我！”，“走，但老王厉害，我们去找刘备一起帮你报仇！”
○ “刘备，走着，我们一起揍老王去”，“没问题！”，“二弟，过来，有人欺负我们，去揍他！”
○ 。。。找人过程中，都是立刻跟着走，没人拖！
○ 最终，我们108人一起找到了老王！！！！
找到一个人成功后，再继续找下一个人。逐渐形成了“队伍”
组建队伍的过程中，如果找某个人失败了，则“队伍”失败
其实有点类似“击鼓传花”的游戏，一个成功拿到花之后，才能传递给下一个人。依次类推！

setTimeout(()=>{
    
    
	console.log(1);
	setTimeout(()=>{
    
    
		console.log(2);
		setTimeout(()=>{
    
    
			console.log(3);
			setTimeout(()=>{
    
    
				console.log(4);
			},1000);
		},1000);
	},1000);
},1000);

使用promise

next = n =>
//Promise的构造函数接收一个参数，是函数，
//并且传入两个参数：resolve(异步操作执行成功后的回调函数)，reject(异步操作执行失败后的回调函数)
new Promise(function(resolve, reject) {
    
    
	setTimeout(function() {
    
    
		resolve(n);
	}, 1000);
});
next(1)
	.then(res => {
    
     // 成功
		console.log(res);
		return next(2); //在then方法中调用的next方法，一定要用return ，否则不会通过resolve把数据往下传递
	})
	.then(res => {
    
    
		console.log(res);
		return next(3);
	})
	.then(res => {
    
    
		console.log(res);
	})
	.catch(() => {
    
     //处理失败：catch方法的第二个参数是失败的回调
		console.log("出错啦！");
	});

3.12 模块化

如果在a.js文件中定义了5个方法，现在b.js文件中想使用a中的5个方法，怎么办？
java语言的做法是import引入之后，就能使用了。es6的模块化，就是这个过程
将一个js文件声明成一个模块导出之后，另一个js文件才能引入这个模块
每一个模块只加载一次（是单例的），若再去加载同目录下同文件，直接从内存中读取。

3.12.1 传统的模块化

创建user.js文件

function addUser(name){
    
    
	return `保存${
      
      name}成功！`;
}
function removeUser(id){
    
    
	return `删除${
      
      id}号用户！`;
}
// 声明模块并导出
// module.exports={
    
    
// save:addUser,
// delete:removeUser
// }
// 声明模块导出的简写
module.exports={
    
    
	addUser,
	removeUser
}

test.js

let user = require("./user.js"); //引入user模块
console.log( user );
let result1 = user.addUser("吕布");
let result2 = user.removeUser(101);
console.log(result1);
console.log(result2);

3.12.2 ES6的模块化

user.js

let name = "老孙";
let age = 66;
let fn = function(){
    
    
return `我是${
      
      name}!我今年${
      
      age}岁了！`;
}
// 声明模块并导出
export{
    
    
	name,
	age,
	fn
}

test.js

import {
    
    name,age,fn} from "./user.js"
console.log(name);
console.log(age);
console.log(fn);

运行test.js，报错：SyntaxError: Unexpected token { （语法错误，在标记{的位置）
原因是node.js并不支持es6的import语法，我们需要将es6转换降级为es5！

3.13 babel环境

babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有的环境中执行。
这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持

3.13.1 安装babel客户端环境

创建新目录 lagou-babel，在终端中打开，运行命令：

npm install --global babel-cli

查看版本

babel --version

如果报错1：（win7系统中）
‘babel’ 不是内部或外部命令，也不是可运行的程序或批处理文件。（babel命令在当前系统中不被认可）
○ 由于babel是通过npm安装，所以babel会默认安装到 E:\repo_npm（C:\Windows\System32\cmd.exe）
○ 在 E:\repo_npm 这个目录下，进入dos命令，执行 babel --version，如果是成功的，说明babel已经安装成功
○ 但是在vscode的终端中打不开，那么只可能是两个原因：
▸ 环境变量没有配置
▹ 系统环境变量中 path中加入 ;E:\repo_npm;
▹ 在任意位置进入dos窗口，babel --version可以了，说明环境变量配置成功
▸ vscode关掉，重新以“管理员身份运行 ”
如果报错2：（win10系统中）
windows10默认禁止运行有危险的脚本，修改一下系统策略就好了
开始菜单-> Windows PowerShell (切记要以管理员身份运行)，输入代码

set-ExecutionPolicy RemoteSigned

在这里插入图片描述

现在，就可以看版本号了。

3.13.2 安装转码器

创建lagou-babel专属目录，在其中初始化项目

npm init -y

创建babel配置文件 .babelrc ，并输入代码配置：

{
    
    
	"presets": ["es2015"],
	"plugins": []
}

安装转码器

npm install --save-dev babel-preset-es2015

转码
创建dist目录，用来存放转码后的文件

babel user.js --out-file .\dist\user.js
或
babel user.js -o .\dist\user.js

运行转码后的文件

node .\dist\test.js

3.14 ES6模块化的另一种写法

3.14.1 as的用法

user.js：如果你不想暴露模块当中的变量名字，可以通过as来进行重命名的操作:

let name = "老孙";
let age = 66;
let fn = function(){
    
    
	return `我是${
      
      name}!我今年${
      
      age}岁了！`;
}
// 声明模块并导出
export{
    
    
	name as a, // 将属性重命名
	age as b,
	fn as c
}

test.js

import {
    
    a,b,c} from "./user.js";
console.log(a);
console.log(b);
console.log(c());

也可以接收整个模块
test.js

import * as info from "./user.js"; // 通过*来批量接收，用as来指定接收的对象名字
console.log(info.a);
console.log(info.b);
console.log(info.c());

3.14.2 默认导出

可以将所有需要导出的变量放入一个对象中，然后通过default export进行导出

/*****************导出****************************/
export default{
    
    
	name:"老孙",
	eat(){
    
    
		return "吃点啥！";
	}
}
/*****************导入****************************/
import p from "./person.js";
console.log( p.name, p.eat() );

3.14.3 重命名export和import

如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，
为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时可以这样做：

/*******************student1.js**************************/
export let name = "我是来自student1.js";
/*******************student2.js************************/
export let name = "我是来自student2.js";
/*******************test_student.js************************/
import {
    
    name as name1} from './student1.js';
import {
    
    name as name2} from './student2.js';
console.log( name1 ); // 我是来自student1.js
console.log( name2 ); // 我是来自student2.js

任务六 (Bootstrap)

1.bootstrap简介

1.1 什么是Bootstrap？

Bootstrap来自 Twitter，是目前最受欢迎的响应式前端框架。
Bootstrap是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。

1.2 为什么使用 Bootstrap？

移动设备优先：自 Bootstrap3 起，框架包含了贯穿于整个库移动设备优先的样式。
○ 不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。
○ 也就是说，针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。

1.3 下载与使用

中文官网：https://www.bootcss.com/
英文官网：http://getbootstrap.com
下载好的，压缩包解压出来。就得到了bootstrap的资源文件了。
分别是css、js、font字体，全部放在项目的根目录即可

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link href="css/bootstrap.min.css" rel="stylesheet" />
	<title>拉勾有我-必须火</title>
</head>
<body style="padding:100px;">
	<h1>Hello, Bootstrap!</h1>
	<!-- 注意：这两个按钮的class样式是Bootstrap定义的 -->
	<button class="btn btn-primary">学习充电</button>
	<button class="btn btn-success">极速入职</button>
</body>
</html>

2.Bootstrap的使用

2.1 表格

和之前的表格相比，标签更丰富更加语义化，效果更佳美观

2.1.1 丰富的标签

<table> 为表格添加基础样式
<thead> 表格标题行的容器元素（<tr>）
<tbody> 表格主体中的表格行的容器元素（<tr>）
<tr> 表格行
<td> 默认的表格单元格。
<th> 特殊的表格单元格，（居中和加粗的效果）。必须在<thead> 内使用。
<caption> 关于表格存储内容的描述或总结。

2.1.2 好看的类样式

.table 为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) ，隔行变色
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态，鼠标悬停高亮突出显示
.table-condensed 让表格更加紧凑

2.1.3 情景色类样式

适合应用在<th>、<tr>，<td>
.active 激活效果（悬停颜色）
.success 表示成功或积极的动作
.info 表示普通的提示信息或动作
.warning 表示警告或需要用户注意
.danger 表示危险或潜在的带来的负面影响的动作

2.1.4 响应式表格

表格的父元素设置响应式，小于768px，出现边框

<table class="table table-responsive">
	<caption>经营产品大全</caption>
	<thead>
		<tr>
			<th>产品</th>
			<th>付款日期</th>
			<th>状态</th>
		</tr>
	</thead>
	<tbody>
		<tr class="info">
			<td>产品1</td>
			<td>2020-1-1</td>
			<td>待发货</td>
		</tr>
		<tr class="active">
			<td>产品2</td>
			<td>2020-1-2</td>
			<td>已发货</td>
		</tr>
		<tr class="success">
			<td>产品3</td>
			<td>2020-1-3</td>
			<td>未付款</td>
		</tr>
		<tr class="warning">
			<td>产品4</td>
			<td>2020-1-4</td>
			<td>已退货</td>
		</tr>
		<tr class="danger">
			<td>产品5</td>
			<td>2020-1-5</td>
			<td>已退款</td>
		</tr>
	</tbody>
</table>

2.2 表单

2.2.1 表单布局

2.2.1.1 默认布局

在这里插入图片描述

<body style="padding:100px;">
	<form>
		<div class="form-group">
			<label>邮箱</label>
			<input type="email" class="form-control" placeholder="请输入邮箱">
		</div>
		<div class="form-group">
			<label>密码</label>
			<input type="passowd" class="form-control" placeholder="请输入密码">
		</div>
		<div class="form-group">
			<button class="btn btn-primary">提交</button>
		</div>
	</form>
</body>

2.2.1.2 内联布局

让所有表单元素居于一行
注意：当小于768px时,会自动还原成移动端样式.

<form class="form-inline">

2.2.2 表单控件

2.2.2.1 输入框

在这里插入图片描述

<form>
	<div class="form-group">
		<label for="">输入框</label>
		<input type="text" class="form-control" placeholder="请输入文本...">
	</div>
</form>

2.2.2.2 文本框

在这里插入图片描述

<div class="form-group">
	<label for="">文本框</label>
	<textarea class="form-control" cols="30" rows="5"></textarea>
</div>

2.2.2.3 复选框

checkbox 默认
checkbox-inline 内联

<div class="checkbox">
	<label>
		<input type="checkbox"> 抽烟
	</label>
</div>
<div class="checkbox">
	<label>
		<input type="checkbox"> 喝酒
	</label>
</div>
<hr>
<div class="checkbox-inline">
	<label>
		<input type="checkbox"> 洗澡
	</label>
</div>
<div class="checkbox-inline">
	<label>
		<input type="checkbox"> 烫头
	</label>
</div>

2.2.2.4 复选按钮

在这里插入图片描述

<form>
	<div class="btn-group" data-toggle="buttons">
		<label class="btn btn-primary">
			<input type="checkbox"> 音乐
		</label>
		<label class="btn btn-primary">
			<input type="checkbox"> 体育
		</label>
		<label class="btn btn-primary">
			<input type="checkbox"> 美术
		</label>
		<label class="btn btn-primary">
			<input type="checkbox"> 电脑
		</label>
	</div>
</form>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

2.2.2.5 单选框

在这里插入图片描述

<label class="radio">
	<input type="radio" name="sex"> 男
</label>
<label class="radio">
	<input type="radio" name="sex"> 女
</label>
<hr>
<label class="radio-inline">
	<input type="radio" name="gender"> 耕
</label>
<label class="radio-inline">
	<input type="radio" name="gender"> 织
</label>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

2.2.2.6 单选按钮

在这里插入图片描述

<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-primary">
		<input type="radio" name="gender"> 男
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="gender"> 女
	</label>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

2.3 按钮

在这里插入图片描述

<button class="btn btn-default">默认按钮</button>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-info">信息按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-link">连接按钮</button>

按钮大小

<button class="btn btn-primary btn-lg">超大按钮（高清大屏台式机）</button>
<button class="btn btn-primary">大按钮（笔记本屏幕）</button>
<button class="btn btn-primary btn-sm">小按钮（平板电脑）</button>
<button class="btn btn-primary btn-xs">超小按钮（手机）</button>

按钮状态
○ 激活状态：按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）;
○ 禁用状态：当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变;

<button class="btn btn-default">默认按钮</button>
<button class="btn btn-default active">激活按钮</button>
<button class="btn btn-default" disabled>禁用按钮</button>

2.4 图片

.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框

<img src="img/1.jpg" class="img-rounded" width="33%">
<img src="img/1.jpg" class="img-circle" width="33%">
<img src="img/1.jpg" class="img-thumbnail" width="33%">

响应式图片

<img src="img/1.jpg" class="img-responsive">

2.5 下拉菜单组件

在这里插入图片描述

<div class="dropdown">
	<button class="btn btn-primary" data-toggle="dropdown">拉勾教育 <span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li><a href="#">前沿技术</a></li>
		<li><a href="#">名师制作</a></li>
		<li><a href="#">24小时导师</a></li>
	</ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

用法的关键核心

外围容器使用 class="dropdown"包裹
内部点击按钮事件绑定 data-toggle=“dropdown”
菜单元素使用 class=“dropdown-menu”

2.6 分页组件

在这里插入图片描述

<ul class="pagination">
	<li class="previous"> <a href="#"> &laquo; </a> </li>
	<li class="active"> <a href="#">1</a> </li>
	<li> <a href="#">2</a> </li>
	<li> <a href="#">3</a> </li>
	<li class="next"> <a href="#">&raquo;</a> </li>
</ul>

在这里插入图片描述

<ul class="pager">

2.7 栅格系统

bootstrap的栅格系统会将整个页面水平方向上平均分成12个小格子
当浏览器大小发生变化的时候，我们可以控制每行的元素占用几个格子，从而达到响应式的效果
显示屏幕的扩大和缩小. 实现如下效果

<style>
	.a{
     
     
		height: 50px;
		border: 1px solid black;
		background-color: #eeeeee;
	}
</style>
<body>
	<div class="container">
		<div class="row">
			<!-- col-lg-3 当大屏幕时，一个div占3份，一行显示4个div -->
			<!-- col-md-4 当中屏幕时，一个div占4份，一行显示3个div -->
			<!-- col-sm-6 当小屏幕时，一个div占6份，一行显示2个div -->
			<!-- 超小屏幕时，一个div占12份，一行显示1个div，默认 -->
			<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
			<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
			<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
			<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
			<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
			<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
			<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
			<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
			<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
			<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
			<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
			<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
		</div>
	</div>
</body>

2.8 缩略图组件

配合响应式的栅格系统

<div class="container">
	<div class="row">
		<div class="col-lg-3 col-md-4 col-sm-6">
			<div class="thumbnail">
				<img src="img/2.jpg">
			</div>
		</div>
		<!-- 其余3张图片 -->
		<div class="col-lg-3 col-md-4 col-sm-6">
			<div class="thumbnail">
				<img src="img/2.jpg">
			</div>
		</div>
		<div class="col-lg-3 col-md-4 col-sm-6">
			<div class="thumbnail">
				<img src="img/2.jpg">
			</div>
		</div>
		<div class="col-lg-3 col-md-4 col-sm-6">
			<div class="thumbnail">
				<img src="img/2.jpg">
			</div>
		</div>
	</div>
</div>

自定义内容

<div class="container">
	<div class="row">
		<div class="col-lg-3 col-md-4 col-sm-6">
			<div class="thumbnail">
				<img src="img/2.jpg">
				<div class="caption">
					<h3>视频标题</h3>
					<p>视频介绍，美女众多...</p>
					<p>
						<a href="#" class="btn btn-primary">试看</a>
						<a href="#" class="btn btn-warning">购买</a>
					</p>
				</div>
			</div>
		</div>
	<!--其余3个省略-->
	</div>
</div>

2.9 模态框组件

在这里插入图片描述

data-toggle=“modal” 触发类型:模态框modal
data-target="#myModal" 触发的节点
data-backdrop=“static” 点击黑灰色背景，不会关闭模态框

<button class="btn btn-warning" data-toggle="modal" data-target="#myModal">弹框</button>
<!-- 声明定义模态框组件 -->
<div class="modal" id="myModal" data-backdrop="static">
	<!-- 窗口声明 -->
	<div class="modal-dialog">
		<!-- 内容声明 -->
		<div class="modal-content">
			<!-- 1.框的标题 -->
			<div class="modal-header">
				<button class="close" data-dismiss="modal">
					<span>&times;</span>
				</button>
				<h4 class="modal-title">友情提示</h4>
			</div>
			<!-- 2.框内信息 -->
			<div class="modal-body">
				服务器错误，请稍后再试！
				<hr>
				<img src="img/1.jpg" width="200px">
				<hr>
				<input type="text">
			</div>
			<!-- 3.框的按钮 -->
			<div class="modal-footer">
				<button class="btn btn-info">确定</button>
				<button class="btn btn-default" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>

3.案例

3.1 首页轮播大图

在这里插入图片描述

大小屏幕自动适应,扩大缩小浏览器
滚动数字区点击左右切换图片
左右区域点击切换
默认5秒钟自动切换下一张
最后一张,回到第一张

<div id="myCarousel" class="carousel slide" data-ride="carousel">
	<!-- 滚动圆点区 -->
	<ol class="carousel-indicators">
		<li data-slide-to="0" data-target="#myCarousel"></li>
		<li data-slide-to="1" data-target="#myCarousel"></li>
		<li data-slide-to="2" data-target="#myCarousel"></li>
	</ol>
	<!-- 图片区 -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="img/1.jpg">
		</div>
		<div class="item">
			<img src="img/2.jpg">
		</div>
		<div class="item">
			<img src="img/3.jpg">
		</div>
	</div>
<!-- 左右切换 -->
<a href="#myCarousel" data-slide="prev" class="carousel-control left">
	<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">
	<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

data 属性解释：

data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置；
data-slide-to 来向轮播底部创建一个原始滑动索引，data-slide-to=“2” 将把滑动块移动到一个特定的索引，索引从 0 开始计数。
data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放

3.2 响应式导航条

在这里插入图片描述

<!-- 默认的导航条样式 -->
<div class="navbar navbar-default">
	<!-- 响应式的容器 -->
	<div class="container">
		<!-- 导航条的头部 -->
		<div class="navbar-header">
			<a href="#" class="navbar-brand">老孙科技股份有限公司</a>
			<!-- data-toggle="collapse" 数据切换的事件，特效是折叠-->
			<!-- data-target="#nav" 折叠效果的目标是下面的#nav容器-->
			<button class="navbar-toggle" data-toggle="collapse" datatarget="#nav">
				<span class="sr-only"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
		</div>
		<!-- 导航项 -->
		<div id="nav" class="collapse navbar-collapse">
			<ul class="nav navbar-nav navbar-right">
				<li class="active"> <a href="#"> <span class="glyphicon glyphicon-home"></span> 主页</a> </li>
				<li> <a href="#"> <span class="glyphicon glyphicon-camera"></span> 产品</a> </li>
				<li> <a href="#"> <span class="glyphicon glyphicon-tint"></span>竞争</a> </li>
				<li> <a href="#"> <span class="glyphicon glyphicon-earphone"></span> 联系我们</a> </li>
			</ul>
		</div>
	</div>
</div>

第三阶段模块二作业

编程题：

根据如图需求，实现用户的CRUD：

当页面加载完成功后显示用户列表；
用户新增；
选中"序号"才能用户编辑或者删除；
可以根据用户工号和名称查询（不考虑模糊查询、使用完整的工号和名称）

3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)

Java

第三阶段 模块一 前端入门(HTML、CSS、JS)

任务一 (HTML)

1、HTML 介绍与规范

2、HTML 的使用

3、HTML5新特性

任务二 (CSS)

1、CSS介绍

2、CSS与HTML结合方式

3、CSS的使用

4、CSS3新特性

任务三 (JavaScript)

1、JavaScript介绍

2、HTML和JavaScript结合方式

3、JavaScript的使用

4、DOM操作

5、BOM操作

模块一 作业

第三阶段 模块二 前端高级(jQuery、ES6、Bootstrap)

任务四 (jQuery)

1. jQuery介绍

1.1 jQuery能做什么?

1.2 jQuery的优势

1.3 jQuery下载

2. jQuery的使用

2.1 基本的语法介绍

2.2 jQuery对象与DOM对象

2.3 选择器

2.3.1 基本选择器

2.3.2 层次选择器

2.3.3 属性选择器

2.3.4 过滤选择器

2.4 事件

2.4.1 鼠标事件

2.4.2 键盘事件

2.4.3 表单事件

2.4.4 鼠标悬停复合事件

2.4.5 连续点击复合事件

2.4.6 事件的动态绑定

2.5 元素的隐藏和显示

2.5.1 改变元素的宽和高（带动画效果）

2.5.2 改变元素的高（拉伸效果）

2.5.3 不改变元素的大小（淡入淡出效果）

2.5.4 链

2.6 DOM和CSS的操作

2.6.1 属性函数

2.6.2 样式函数

2.6.3 类样式函数

2.6.4 节点操作

2.7 遍历节点

2.7.1 祖先元素

2.7.2 同辈元素

2.7.3 后代元素

2.7.4 元素的过滤

3. 案例

3.1 手风琴特效

3.2 购物车结算

任务五 (ES6)

1.ECMAScript6 简介

1.1 ECMAScript 和 JavaScript 的关系

1.2 ES6 与 ECMAScript 2015 的关系

2. 搭建前端环境

2.1 Node 环境

2.1.1 什么是Node.js

2.1.2 Node.js有什么用

2.1.3 安装

2.1.4 服务器端应用开发（了解）

2.2 NPM环境

2.2.1 什么是NPM

2.2.2 NPM工具的安装位置

2.2.3 使用npm管理项目

2.2.4 修改npm镜像 和 存储地址

2.2.5 npm install命令的使用

3. ES6基本语法

3.1 let声明变量

3.2 const声明常量

3.3 解构赋值

3.3.1 数组解构

3.3.2 对象解构

第三阶段模块一前端入门(HTML、CSS、JS)

模块一作业

第三阶段模块二前端高级(jQuery、ES6、Bootstrap)

2.2.4 修改npm镜像和存储地址