2. 前端基本知识笔记：HTML&CSS&JavaScript&Vue&ElementUI

有多勉为其难

已于 2022-08-10 14:43:45 修改

阅读量2.3k

点赞数 5

分类专栏： CSDN文章文章标签： html css javascript

于 2022-04-22 09:21:28 首次发布

本文链接：https://blog.csdn.net/abst122/article/details/124091431

版权

CSDN文章专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML&CSS&JavaScript三剑客

Web前端
1. HTML基本知识
2 CSS 层叠样式表基本知识
3 JavaScript基本知识
4 Vue
5 ElementUI

Web前端

页面展示：Web前端
业务逻辑：SpringBoot
数据存储：MySQL数据库

在这里插入图片描述

1. HTML基本知识

1.1 HTML(HyperText Markup Language)：

超文本标记语言：

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
标记语言：由标签构成的语言

之前学习的XML就是标记语言，由一个一个的标签组成，HTML 也是由标签组成。

1.2 W3C标准：

W3C是万维网联盟，这个组成是用来定义标准的。他们规定了一个网页是由三部分组成，分别是：

结构：对应的是 HTML 语言
表现：对应的是 CSS 语言
行为：对应的是 JavaScript 语言

HTML定义页面的整体结构；CSS是用来美化页面，让页面看起来更加美观；JavaScript可以使网页动起来，比如轮播图也就是多张图片自动的进行切换等效果。

1.3 HTML 结构标签

标签	描述
<HTML>	定义 HTML 文档
<head>	定义关于文档的信息
<title>	定义文档的标题
<body>	定义文档的主体

1.4.1 基础标签

标签	描述
<h1> ~ <h6>	定义标题，h1最大，h6最小
<font>	定义文本的字体、字体尺寸、字体颜色
<b>	定义粗体文本
<i>	定义斜体文本
<u>	定义文本下划线
<center>	定义文本居中
<p>	定义段落
<br>	定义折行
<hr>	定义水平线
<pre>	保留原始的换行和空格

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
&gt ;	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
		不断行的空白

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础标签</title>
</head>
<body>
<!--特点：字体加粗 独占一行 自带上下间距-->
<h1 align="center">唐三</h1>
<h2 align="right">小舞</h2>
<h3 align="left">宁荣荣</h3>
<h4>奥斯卡</h4>
<h5>戴沐白</h5>
<h6>朱竹清<br>啊啊啊啊</h6>
<hr>
<!--段落标签p 特点：独占一行 自带上下间距-->
<p>马红俊</p>
<p>千仞雪</p><p>胡列娜</p>
加粗<b>标签</b><br>
斜体<i>标签</i><br>
下划线<u>标签</u><br>
删除线<s>标签</s><br>
<hr>
</body>
</html>

1.4.2 图片、音频、视频标签

标签	描述
<img>	定义图片
<audio>	定义音频
<video>	定义视频

img：定义图片
- src：规定显示图像的 URL
- height：定义图像的高度
- width：定义图像的宽度
- alt: 图片不能正常显示时显示的文本
- title: 图片标题
audio：定义音频。支持的音频格式：MP3、WAV、OGG
- src：规定音频的 URL
- controls：显示播放控件
video：定义视频。支持的音频格式：MP4, WebM、OGG
- src：规定视频的 URL
- controls：显示播放控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<!--src资源路径
    1.相对路径：一般访问站内资源时使用
        - 图片和页面放在同一目录：直接写图片名
        - 图片放在页面上级目录：../图片名
        - 图片放在页面下级目录：文件夹名/图片名
    2.相对路径：一般访问站外资源，图片盗链  有找不到图片的风险
-->
<!--alt：当图片不能正常显示时，显示的文本-->
<!--title：图片标题-->

<img src="a.jpg" alt="我老婆不见了" title="我老婆">
<img src="../b.jpg" alt="我老婆不见了" title="我老婆">
<!--with/height：
    两种赋值方式：1.像素 2.上级元素的百分比
    只设置宽度时，高度会自动等比例缩放
-->
<img src="images/c.jpeg" alt="我老婆不见了" title="我老婆" width="300px">
<img src="images/c.jpeg" alt="我老婆不见了" title="我老婆" width="50%">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1111%2F0Q91Q50307%2F1PQ9150307
-8.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653190698&t=808d1bdb58f7dbbd9
e1dd00e165e6c3f" alt="风景" title="风景" width="800px" height="800px">
</body>
</html>

1.4.3 超链接标签

标签	描述
<a>	定义超链接，用于链接到另一个资源

href：指定访问资源的URL
target：指定打开资源的方式
- _self:默认值，在当前页面打开
- _blank：在空白页面打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<a href="baidu.com">百度一下</a>
<a href="简历练习.html">简历</a>
<a href="a.jpg">百度一下</a>
<a href="www.bilibili.com"><img src="images/c.jpeg" alt="我老婆不见了" title="我老婆" width="50%"><</a>
<img id="top" src="a.jpg" alt="我老婆不见了" title="我老婆">
<img src="../b.jpg" alt="我老婆不见了" title="我老婆">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1111%2F0Q91Q50307%2F1PQ9150307
-8.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653190698&t=808d1bdb58f7dbbd9
e1dd00e165e6c3f" alt="风景" title="风景">

<a href="#top">返回顶部</a>
</body>
</html>

1.4.4 列表标签

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项

type：设置符号的类型
有序列表中的 type 属性用来指定标记的标号的类型（数字、字母、罗马数字等）
无序列表中的 type 属性用来指定标记的形状

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<h2>列表标签</h2>
<h3>无序列表</h3>
<ul type="a">
    <li>萧炎</li>
    <li>萧薰儿</li>
    <li>美杜莎</li>
    <li>药老</li>
    <li>纳兰嫣然</li>
    <li>云韵</li>
</ul>
<h3>有序列表</h3>
<ol type="circle">
    <li>萧炎</li>
    <li>萧薰儿</li>
    <li>美杜莎</li>
    <li>药老</li>
    <li>纳兰嫣然</li>
    <li>云韵</li>
</ol>
<h3>列表嵌套</h3>
<ul>
    <li>凉菜
        <ol>
            <li>拍黄瓜</li>
            <li>东北大拉皮</li>
        </ol>
    </li>
    <li>炒菜
        <ol>
            <li>宫保鸡丁</li>
            <li>木须肉</li>
        </ol>
    </li>
    <li>斗罗大陆
        <ol>
            <li>唐三
            <ul>
                <li>唐三喜欢小舞</li>
                <li>唐三喜欢开挂</li>
            </ul>
            </li>
            <li>小舞</li>
        </ol>
    </li>
</ul>
</body>
</html>

1.4.5 表格标签

标签	描述
<table>	定义表格
<tr>	定义行
<td>	定义单元格
<th>	定义表头单元格

table：设置符号的类型
- table：定义表格
  - width：宽度
  - border：边框
  - cellpadding：定义内容和单元格的距离
  - cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
  - bgcolor：背景色
  - align：对齐方式
- tr：定义行
  - bgcolor：背景色
  - align：对齐方式
- td：定义单元格
  - colspan：合并列
  - rowspan：合并行
- th：定义表头单元格
- ：表格标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1px" align="center">
    <tr><!---->
        <th colspan="4" align="center">斗罗大陆</th>
    </tr>
    <tr>
        <td>名字</td>
        <td>年龄</td>
        <td>性别</td>
        <td>门派</td>
    </tr>
    <tr>
        <td>唐三</td>
        <td>18</td>
        <td>男</td>
        <td>唐门</td>
    </tr>
    <tr>
        <td>小舞</td>
        <td>19</td>
        <td>女</td>
        <td>唐门</td>
    </tr>
    <tr>
        <td>宁荣荣</td>
        <td>20</td>
        <td>男</td>
        <td>七宝琉璃宗</td>
    </tr>
</table>
<hr>
<!--练习1-->
<table border="1px" align="center">

    <tr>
        <td colspan="2" align="center">1-1</td>
        <td rowspan="2">1-3</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
    </tr>
    <tr>
        <td colspan="2" align="center">3-2</td>
    </tr>
</table>
<hr>
<!--练习2-->
<table border="1px" align="center">
    <caption>购物车</caption>
    <tr>
        <th>编号</th>
        <th>商品</th>
        <th>价格</th>
    </tr>
    <tr>
        <td>1</td>
        <td>小米12 pro</td>
        <td>5000</td>
    </tr>
    <tr>
        <td>2</td>
        <td>小米透明电视</td>
        <td>7000</td>
    </tr>
    <tr>
        <td>总价：</td><td colspan="2" align="center">12000</td>
    </tr>
</table>
</body>
</html>

1.4.6 分区标签

作用：可以理解为一个容器，将多个有相关性的标签进行统一管理

标签	描述
<div>	块级分区标签: 特点是独占一行，定义 HTML 文档中的一个区域部分，用来布局网页
<span>	行内分区标签: 特点是共占一行，用于组合行内元素，不能修改宽高。

HTML5的标准中新增了一些语义更强的分区标签,为了提高代码的可读性. 这几个标签的作用和div一样都是块级分区标签：

header头
footer页尾
main主体
section区域
nav 导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分区标签</title>
</head>
<body>
<div>块级分区标签1</div>
<div>块级分区标签2</div>
<div>块级分区标签3</div>
<span>行内分区标签1</span>
<span>行内分区标签2</span>
<span>行内分区标签3</span>

<header></header>
<footer></footer>
<main></main>
<section></section>
<nav></nav>

</body>
</html>

1.4.7 表单标签

作用: 获取用户输入的各种信息并提交给服务器

标签	描述
<form>	定义表单
<input>	定义表单项，通过type属性控制输入形式
<label>	为表单项定义标注
<select>	定义下拉列表
<option>	定义下拉列表的列表项
<textarea>	定义文本域

1. form标签属性

action：规定当提交表单时向何处发送表单数据，该属性值就是URL

以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 # ，表示提交到当前页面来看效果。
method ：规定用于发送表单数据的方式

method取值有如下两种：
- get：默认值。如果不设置method属性则默认就是该值
  - 请求参数会拼接在URL后边
  - url的长度有限制 4KB
- post：
  - 浏览器会将数据放到http请求消息体中
  - 请求参数无限制的

2 表单项标签

<input>：表单项，通过type属性控制输入形式

input 标签有个 type 属性。 type 属性的取值不同，展示的效果也不一样

type 取值	描述
text	默认值。定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
hidden	定义隐藏的输入字段
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
reset	定义重置按钮，重置按钮会清除表单中的所有数据
button	定义可点击按钮
date	选择日期按钮

<input>其他标签：

标签	描述
maxlength	最大字符串长度
value	设置默认值
readonly	只读
value	是单选框必须添加的属性否则提交on
checke	默认选中

<select>：定义下拉列表，<option> 定义列表项，
<option>标标签中设置value设置提交的内容，selected默认选中
<textarea>：文本域

如下图就是文本域效果。它可以输入多行文本，而 input 数据框只能输入一行文本。

在这里插入图片描述

注意：

以上标签项的内容要想提交，必须得定义 name 属性。
每一个标签都有id属性，id属性值是唯一的标识。
单选框、复选框、下拉列表需要使用 value 属性指定提交的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单form</title>
</head>
<body>

<form action="www.baidu.com" method="get">
    <!--maxlength最大字符串长度
    value 设置默认值
    readonly 只读
    -->
    用户名：<input type="text" name="username" maxlength="5" value="user1" readonly><br>
    密&nbsp;码：<input type="password" name="password" value="123"><br>
        <!-- value是单选框必须添加的属性 否则提交on
        checke默认选中
        -->
    性别：<input type="radio" name="gender" checked value="1" id="r1">
    <label for="r1">男</label>
    <input type="radio" name="gender" value="0" id="r2">
    <label for="r2">女</label> <br>
    爱好：<input type="checkbox" name="hobby" value="cy">抽烟
    <input type="checkbox" name="hobby" value="hj">喝酒
    <input type="checkbox" name="hobby" checked value="tt">烫头<br>
    生日：<input type="date" name="birthday"><br>
    靓照：<input type="file" name="pic"><br>
    家乡：<select name="city">
    <option>---请选择---</option>
    <option>南宁</option>
    <option>百色</option>
    <option>河池</option>
    <option>柳州</option>
    <option>桂林</option>
    <option>北京</option>
    </select><br>

    <input type="submit" value="注册">

</form>
</body>
</html>

1.4.8 html特殊字符编码

字符 十进制字符编号 实体名字 说明
! &#33; — 惊叹号Exclamation mark 
” &#34; &quot; 双引号Quotation mark 
# &#35; — 数字标志Number sign 
$ &#36; — 美元标志Dollar sign 
% &#37; — 百分号Percent sign 
& &#38; &amp; Ampersand 
‘ &#39; — 单引号Apostrophe 
( &#40; — 小括号左边部分Left parenthesis 
) &#41; — 小括号右边部分Right parenthesis 
* &#42; — 星号Asterisk 
+ &#43; — 加号Plus sign 
, &#44; — 逗号Comma 
– &#45; — 连字号Hyphen 
. &#46; — 句号Period (fullstop) 
/ &#47; — 斜杠Solidus (slash) 
0 &#48; — 数字0 Digit 0 
1 &#49; — 数字1 Digit 1 
2 &#50; — 数字2 Digit 2 
3 &#51; — 数字3 Digit 3 
4 &#52; — 数字4 Digit 4 
5 &#53; — 数字5 Digit 5 
6 &#54; — 数字6 Digit 6 
7 &#55; — 数字7 Digit 7 
8 &#56; — 数字8 Digit 8 
9 &#57; — 数字9 Digit 9 
: &#58; — 冒号Colon 
; &#59; — 分号Semicolon 
< &#60; &lt; 小于号Less than 
= &#61; — 等于符号Equals sign 
> &#62; &gt; 大于号Greater than 
? &#63; — 问号Question mark 
@ &#64; — Commercial at 
A &#65; — 大写A Capital A 
B &#66; — 大写B Capital B 
C &#67; — 大写C Capital C 
D &#68; — 大写D Capital D 
E &#69; — 大写E Capital E 
F &#70; — 大写F Capital F 
G &#71; — 大写G Capital G 
H &#72; — 大写H Capital H 
I &#73; — 大写J Capital I 
J &#74; — 大写K Capital J 
K &#75; — 大写L Capital K 
L &#76; — 大写K Capital L 
M &#77; — 大写M Capital M 
N &#78; — 大写N Capital N 
O &#79; — 大写O Capital O 
P &#80; — 大写P Capital P 
Q &#81; — 大写Q Capital Q 
R &#82; — 大写R Capital R 
S &#83; — 大写S Capital S 
T &#84; — 大写T Capital T 
U &#85; — 大写U Capital U 
V &#86; — 大写V Capital V 
W &#87; — 大写W Capital W 
X &#88; — 大写X Capital X 
Y &#89; — 大写Y Capital Y 
Z &#90; — 大写Z Capital Z 
[ &#91; — 中括号左边部分Left square bracket 
\ &#92; — 反斜杠Reverse solidus (backslash) 
] &#93; — 中括号右边部分Right square bracket 
^ &#94; — Caret 
_ &#95; — 下划线Horizontal bar (underscore) 
` &#96; — 尖重音符Acute accent 
a &#97; — 小写a Small a 
b &#98; — 小写b Small b 
c &#99; — 小写c Small c 
d &#100; — 小写d Small d 
e &#101; — 小写e Small e 
f &#102; — 小写f Small f 
g &#103; — 小写g Small g 
h &#104; — 小写h Small h 
i &#105; — 小写i Small i 
j &#106; — 小写j Small j 
k &#107; — 小写k Small k 
l &#108; — 小写l Small l 
m &#109; — 小写m Small m 
n &#110; — 小写n Small n 
o &#111; — 小写o Small o 
p &#112; — 小写p Small p 
q &#113; — 小写q Small q 
r &#114; — 小写r Small r 
s &#115; — 小写s Small s 
t &#116; — 小写t Small t 
u &#117; — 小写u Small u 
v &#118; — 小写v Small v 
w &#119; — 小写w Small w 
x &#120; — 小写x Small x 
y &#121; — 小写y Small y 
z &#122; — 小写z Small z 
{ &#123; — 大括号左边部分Left curly brace 
| &#124; — 竖线Vertical bar 
} &#125; — 大括号右边部分Right curly brace 
~ &#126; — Tilde 
— &#127; — 未使用Unused 
&#160; &nbsp; 空格Nonbreaking space 
¡ &#161; &iexcl; Inverted exclamation 
¢ &#162; &cent; 货币分标志Cent sign 
£ &#163; &pound; 英镑标志Pound sterling 
¤ &#164; &curren; 通用货币标志General currency sign 
¥ &#165; &yen; 日元标志Yen sign 
¦ &#166; &brvbar; or &brkbar; 断竖线Broken vertical bar 
§ &#167; &sect; 分节号Section sign 
¨ &#168; &uml; or &die; 变音符号Umlaut 
© &#169; &copy; 版权标志Copyright 
ª &#170; &ordf; Feminine ordinal 
« &#171; &laquo; Left angle quote, guillemet left 
¬ &#172; &not Not sign 
&#173; &shy; Soft hyphen 
® &#174; &reg; 注册商标标志Registered trademark 
¯ &#175; &macr; or &hibar; 长音符号Macron accent 
° &#176; &deg; 度数标志Degree sign 
± &#177; &plusmn; 加或减Plus or minus 
² &#178; &sup2; 上标2 Superscript two 
³ &#179; &sup3; 上标3 Superscript three 
´ &#180; &acute; 尖重音符Acute accent 
µ &#181; &micro; Micro sign 
¶ &#182; &para; Paragraph sign 
· &#183; &middot; Middle dot 
¸ &#184; &cedil; Cedilla 
¹ &#185; &sup1; 上标1 Superscript one 
º &#186; &ordm; Masculine ordinal 
» &#187; &raquo; Right angle quote, guillemet right 
¼ &#188; &frac14; 四分之一Fraction one-fourth 
½ &#189; &frac12; 二分之一Fraction one-half 
¾ &#190; &frac34; 四分之三Fraction three-fourths 
¿ &#191; &iquest; Inverted question mark 
À &#192; &Agrave; Capital A, grave accent 
Á &#193; &Aacute; Capital A, acute accent 
Â &#194; &Acirc; Capital A, circumflex 
Ã &#195; &Atilde; Capital A, tilde 
Ä &#196; &Auml; Capital A, di?esis / umlaut 
Å &#197; &Aring; Capital A, ring 
Æ &#198; &AElig; Capital AE ligature 
Ç &#199; &Ccedil; Capital C, cedilla 
È &#200; &Egrave; Capital E, grave accent 
É &#201; &Eacute; Capital E, acute accent 
Ê &#202; &Ecirc; Capital E, circumflex 
Ë &#203; &Euml; Capital E, di?esis / umlaut 
Ì &#204; &Igrave; Capital I, grave accent 
Í &#205; &Iacute; Capital I, acute accent 
Î &#206; &Icirc; Capital I, circumflex 
Ï &#207; &Iuml; Capital I, di?esis / umlaut 
Ð &#208; &ETH; Capital Eth, Icelandic 
Ñ &#209; &Ntilde; Capital N, tilde 
Ò &#210; &Ograve; Capital O, grave accent 
Ó &#211; &Oacute; Capital O, acute accent 
Ô &#212; &Ocirc; Capital O, circumflex 
Õ &#213; &Otilde; Capital O, tilde 
Ö &#214; &Ouml; Capital O, di?esis / umlaut 
× &#215; &times; 乘号Multiply sign 
Ø &#216; &Oslash; Capital O, slash 
Ù &#217; &Ugrave; Capital U, grave accent 
Ú &#218; &Uacute; Capital U, acute accent 
Û &#219; &Ucirc; Capital U, circumflex 
Ü &#220; &Uuml; Capital U, di?esis / umlaut 
Ý &#221; &Yacute; Capital Y, acute accent 
Þ &#222; &THORN; Capital Thorn, Icelandic 
ß &#223; &szlig; Small sharp s, German sz 
à &#224; &agrave; Small a, grave accent 
á &#225; &aacute; Small a, acute accent 
â &#226; &acirc; Small a, circumflex 
ã &#227; &atilde; Small a, tilde 
ä &#228; &auml; Small a, di?esis / umlaut 
å &#229; &aring; Small a, ring 
æ &#230; &aelig; Small ae ligature 
ç &#231; &ccedil; Small c, cedilla 
è &#232; &egrave; Small e, grave accent 
é &#233; &eacute; Small e, acute accent 
ê &#234; &ecirc; Small e, circumflex 
ë &#235; &euml; Small e, di?esis / umlaut 
ì &#236; &igrave; Small i, grave accent 
í &#237; &iacute; Small i, acute accent 
î &#238; &icirc; Small i, circumflex 
ï &#239; &iuml; Small i, di?esis / umlaut 
ð &#240; &eth; Small eth, Icelandic 
ñ &#241; &ntilde; Small n, tilde 
ò &#242; &ograve; Small o, grave accent 
ó &#243; &oacute; Small o, acute accent 
ô &#244; &ocirc; Small o, circumflex 
õ &#245; &otilde; Small o, tilde 
ö &#246; &ouml; Small o, di?esis / umlaut 
÷ &#247; &divide; 除号Division sign 
ø &#248; &oslash; Small o, slash 
ù &#249; &ugrave; Small u, grave accent 
ú &#250; &uacute; Small u, acute accent 
û &#251; &ucirc; Small u, circumflex 
ü &#252; &uuml; Small u, di?esis / umlaut 
ý &#253; &yacute; Small y, acute accent 
þ &#254; &thorn; Small thorn, Icelandic 
ÿ &#255; &yuml; Small y, umlaut

2 CSS 层叠样式表基本知识

Cascading Style Sheet（层叠样式表）是一门语言，用于控制网页表现。

2.1 css 导入方式

css 导入方式其实就是 css 代码和 html 代码的结合方式。CSS 导入 HTML有三种方式：

内联样式：在标签内部使用style属性，属性值是css属性键值对

  <div style="color: red">Hello CSS~</div>

给方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。

内部样式：定义

  <style type="text/css">
  	div{
  		color: red;
      }
  </style>

这种方式可以做到在该页面中复用。

外部样式：定义link标签，引入外部的css文件

编写一个css文件。名为：demo.css，内容如下:

  div{
  	color: red;
  }

在html中引入 css 文件。

  <link rel="stylesheet"  href="demo.css">

这种方式可以在多个页面进行复用。其他的页面想使用同样的样式，只需要使用 link 标签引入该css文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css引入方式</title>
    <!--引入外部的css样式文件-->
    <link rel="stylesheet" href="css/my.css">
</head>
<style>
    h2{
        color: blue;
    }
</style>
<body>
<h1 style="color: red;">内联样式1</h1>
<h1 style="color: blueviolet;">内联样式2</h1>
<h2>内部样式1</h2>
<h2>内部样式2</h2>
<h3>引入样式1</h3>
<h3>引入样式2</h3>
</body>
</html>

2.2 css 选择器

css 选择器就是选取需设置样式的元素（标签），比如如下css代码：

div {
	color:red;
}

如上代码中的 div 就是 css 中的选择器。我们只讲下面三种选择器：

元素选择器

格式：

  元素名称{color: red;}

例子：

  div {color:red}  /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/

id选择器

格式：

  #id属性值{color: red;}

例子：

html代码如下：

  <div id="name">hello css2</div>

css代码如下：

  #name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/

类选择器

格式：

  .class属性值{color: red;}

例子：

html代码如下：

  <div class="cls">hello css3</div>

css代码如下：

  .cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/

分组选择器: 分组选择器可以将多个选择器合并成一个
格式:

h4,#id,.class{样式代码}

属性选择器: 通过元素的属性选择元素
格式：

标签名[属性名="属性值"]{样式代码}

任意元素选择器: 选择页面中所有标签

格式:

*{样式代码}

子孙后代选择器: 通过元素之间的层级关系选择元素
格式:

body div div p{样式代码} 匹配body里面的div里面的div里面的所有p标签(包括后代)

子元素选择器: 通过元素之间的层级关系选择元素
格式:

body>div>div>p{样式代码} 匹配body里面的div里面的div里面的所有p子元素(不包含后代)

伪类选择器: 选择的是元素的状态, 元素有哪些状态?
包括:未访问状态,访问过状态,悬停状态,点击状态
格式:

a:link/visited/hover/active:{样式代码}

总的演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09选择器</title>
    <style>
        /*id选择器*/
        #p1{
            color: red;
        }
        /*class选择器*/
        .c1{
            color: yellow;
        }
        /*分组选择器*/
        h4,#p1,.c1{
            background-color: aquamarine;
        }
        /*属性选择器*/
        input[type="text"]{
            color: red;
        }
        /*任意元素选择器*/
        *{
         /*  边框    粗细  样式  颜色*/
            border: 1px solid purple;
        }
    </style>
</head>
<body>
<input type="text" value="user1">
<input type="password">

<p id="p1">苹果</p>
<p class="c1">香蕉</p>
<p>橘子</p>
<h3>冰箱</h3>
<h3 class="c1">洗衣机</h3>
<h3>电视机</h3>
<h4>唐三</h4>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器续</title>
    <style>
        /*子孙后代选择器*/
        /*body div div p{
            color: red;
        }*/
        /*子元素选择器*/
        div>div>p{
            color: red;
        }
        /*伪类选择器*/
        a:link{color: red;}/*未访问*/
        a:visited{color: pink}/*访问过*/
        a:hover{color: green}/*悬停*/
        a:active{color: yellow}/*点击*/
    </style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.bilibili.com">哔哩哔哩</a>
<a href="http://www.taobao.com">淘宝</a>
<a href="http://www.jd.com">京东</a>
<p>p1</p>
<div>
    <p>p2</p>
    <div><p>p3</p></div>
    <div>
        <p>p4</p>
        <div>
            <p>p5</p>
        </div>
    </div>
</div>
</body>
</html>

2.3 背景图片

background-image:url(“路径”) 设置背景图片
background-size:100px 200px 设置背景图片尺寸
background-repeat:no-repeat; 禁止重复
background-position: 横向纵向; 设置背景图片的位置, 两种方式: 1像素 2百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: pink;
            /*设置背景图片*/
            background-image: url("images/a.jpg");
            /*设置背景图片尺寸*/
            background-size: 200px 200px;
            /*禁止重复*/
            background-repeat: no-repeat;
            /*控制位置：横向  纵向*/
            /*background-position: 50px 100px;*/
            background-position: 50% 50%;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

2.4 文本和字体相关

text-align:left/right/center; 文本水平对齐方式
line-height:20px; 设置行高, 多行文本时可以控制行间距,
单行文本时可以控制垂直居中(因为文本默认是在当前所在行内居中)
text-decoration:overline上划线/underline下划线/line-through删除线/none去掉文本修饰
text-shadow:颜色 x偏移值 y偏移值浓度; 阴影
font-size:20px; 设置字体大小
font-weight:bold加粗/normal去掉加粗
font-style:italic; 设置斜体
font-family: xxx,xxx,xxx; 设置字体
font:20px xxx,xxx,xxx; 这只字体大小+字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本和字体相关</title>
    <style>
        div{
            width: 200px;
            height: 50px;
            border: 1px solid red;
            /*水平对齐方式*/
            text-align: center;
            /*行高*/
            line-height: 50px;
            /*文本修饰： overline上划线，underline下划线 line-through删除线
            none去掉文本修饰*/
            text-decoration: line-through;
            /*文本阴影：颜色  x偏移度  y偏移量  浓度*/
            text-shadow: red 200px 30px 10px;
            /*字体大小*/
            font-size: 20px;
            /*字体加粗 bold 加粗 去掉加粗 normal*/
            font-weight: bold;

        }
        a{
            text-decoration: none;/*去掉自带下划线*/
        }
        h3{
            font-weight: normal;/*去掉自带加粗*/
            /*设置斜体*/
            font-style: italic;
            /*设置字体*/
            /*font-family: cursive;*/
            font: 30px cursive;
        }
    </style>
</head>
<body>
<h3>文本和字体相关</h3>
<div>文本和字体相关</div>
<a href="http://www.bilibili.com">哔哩哔哩</a>
</body>
</html>

2.5 元素的显示方式display

block: 块级元素的默认值, 特点: 独占一行可以修改宽高, 包括: h1-h6 , p, div。
inline: 行内元素的默认值, 特点: 共占一行不可以修改宽高, 包括: span, b,i,s,u,超链接a
inline-block:行内块元素默认值, 特点: 共占一行并且可以修改宽高, 包括: img,input
none: 隐藏元素

行内元素不能直接修改宽高, 如必须修改则先将元素的显示方式改成block或inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素显示方式display</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        span{
            border: 1px solid blue;
            /*行内元素不能修改宽高*/
            width: 100px;
            height: 100px;
            /*把行内元素改成了块级元素或行内块元素都可以修改宽高*/
            display: block;/*inline-block  行内块元素，可以修改宽高还能在同一行*/
        }
        img{
            width: 400px;
            height: 400px;
            display: none;/*隐藏元素*/
        }
        a {
            /*行内元素不能修改宽高*/
            display: block;
            height: 40px;
            width: 132px;
            line-height: 40px;
            background-color: #0aa1ed;
            text-align: center;
            color: white;
            text-decoration: none;
            font-size: 20px;
            /*圆角  值越大越园*/
            border-radius: 5px;
        }
    </style>
</head>
<body>
<a href="#">查看详情</a>
<img src="images/a.jpeg" alt="不见了" title="老婆">
<img src="images/b.jpg" alt="不见了" title="老婆">
<img src="images/c.jpg" alt="不见了" title="老婆">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>

2.6 元素阴影box-shadow

/*元素的阴影:x偏移值 y偏移值  浓度 范围 颜色*/
 box-shadow:    0      0    10px 5px  #333;

2.7 盒子模型

盒子模型用来控制元素的显示效果包括: 元素内容content+外边距margin+边框border+内边距padding
元素内容content:控制元素的显示尺寸
外边距margin:控制元素的显示位置
边框border:控制边框效果
内边距padding:控制元素内容的位置

2.7.1 盒子模型之内容content

包括:width和height
赋值方式有两种:

像素
上级元素的百分比

行内元素不能直接修改宽高

2.7.2 盒子模型之外边距margin

作用: 控制元素的显示位置

赋值方式：
- margin-left/right/top/bottom:10px; 单独某个方向赋值
- margin:10px; 四个方向赋值
- margin:10px 20px; 上下10，左右20
- margin:10px 20px 30px 40px; 上右下左，顺时针赋值
行内元素上下外边距无效
上下相邻彼此添加外边距取最大值
左右相邻彼此添加外边距两者相加
粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型外边框</title>
</head>
<style>
    #d1{
        width: 300px;
        height: 300px;
        border: red solid 1px;
        /*margin-left: 100px;
        margin-top: 100px*/;
        margin-bottom: 100px;
        /*单独写为四周50px*/
        /*margin: 50px;*/
        /*两个为上下10,左右20，*/
        /*margin: 10px 20px;*/
        /*上10右20下30左40*/
        margin: 10px 20px 30px 40px;
    }
    #d2{
        width: 300px;
        height: 300px;
        border: red solid 1px;
        /*上下相邻彼此添加外边距  取最大值*/
        margin-top: 300px;
    }
    #s1{
        margin-left: 100px;
        /*行内元素上下外边距无效*/
        /*margin-top: 100px;
        margin-bottom: 100px;*/
        margin-right: 100px;
    }
    #s2{
        /*左右相邻彼此添加外边距 两者相加*/
        margin-left: 50px;
    }
    #big{
        width: 200px;
        height: 200px;
        background-color: green;
        overflow: hidden;/*溢出隐藏、清除浮动、解决粘连问题*/
    }
    #big>div{
        width: 50px;
        height: 50px;
        background-color: red;
        margin-left: 100px;
        /*当元素的上边缘和上级元素的上边缘重叠时，给元素添加上外边距会出现粘连问题*/
        margin-top: 100px;
    }
    #border_div{
        width: 200px;
        height: 200px;
        border: 5px solid blue;
        /*设置圆角*/
        border-radius: 100px;
    }
</style>
<body>
<div id="border_div"></div>
<div id="big">
    <div></div>
</div>
<span id="s1">span1</span>
<span id="s2">span2</span>
<div id="d1">外边框测试</div>
<div id="d2">外边框测试2</div>
</body>
</html>

2.7.3 盒子模型之外边距padding

作用: 控制元素内容的位置

赋值方式: 和外边距类似
- padding-left/right/top/bottom:10px; 单独某个方向赋值
- padding:10px; 四个方向赋值
- padding:10px 20px; 上下和左右赋值
- padding:10px 20px 30px 40px; 上右下左顺时针赋值
给元素添加内边距会影响元素的显示宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型内边框padding</title>
</head>
<style>
    div{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        /*内边距会影响元素的宽高*/
        padding-top: 50px;
        padding-left: 50px;
    }
</style>
<body>
<div>内边距</div>

</body>
</html>

2.8 CSS的三大特性

继承: 元素可以继承上级元素文本和字体相关的样式,部分标签自带的效果不受继承影响, 比如超链接字体颜色
层叠:多个选择器可能选择到同一个元素,如果添加的样式不同则全部层叠有效,如果作用的样式相同
优先级: 指CSS中的选择器具有优先级, 作用范围越小优先级越高, !important>id>class>标签名>继承(属于间接选中)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三大特性</title>
</head>
<style>

    #d1{
        color: red;
    }
    div{
        /*!important的作用是提升优先级*/
        color: blue !important;
    }
</style>
<body>
<div id="d1">
    <p>这是p标签</p>
    <span>这是div里面的span</span>
    <a href="#">这是超链接</a>
</div>
<span>这是div外面的span</span>
</body>
</html>

2.9 元素的定位方式

五种定位方式:

静态定位: position:static;
相对定位: position:relative;
绝对定位: position:absolute;
固定定位: position: fixed;
浮动定位: float:left/right;

2.9.1 静态定位(文档流定位)

格式: position:static;(默认的定位方式)
特点:元素以左上为基准,块级元素从上往下排列,行内元素从左向右依次排列,默认情况下无法实现元素的层叠效果
如何控制元素的位置?通过外边距控制元素的位置

2.9.2 相对定位

格式: position:relative;
特点:元素不脱离文档流(仍然占着原来的位置) ,可以实现元素的层叠效果
如何控制元素的位置?
通过left/right/top/bottom控制元素的显示位置,参照物是初始位置
应用场景:
当希望移动某一个元素其它元素不受影响时使用相对定位,相对定位可以实现元素的层叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        div:hover{
            /*margin: 20px 0 0 20px;*/
            /*修改为相对定位*/
            position: relative;
            left: 20px;
            top: 20px;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>

2.9.3 绝对定位

格式: position:absolute;
特点: 元素脱离文档流(不占原来的位置)
如何控制元素的位置?
通过left/right/top/bottom控制位置,参照物为窗口或某一个上级元素(需要在上级元素中添加position:relative作为参照物)
应用场景:
当需要往页面中添加一个元素并且不影响其它元素的显示位置,并且可以实现层叠效果

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        #d1{
        /*设置绝对定位*/
            position: absolute;
            right: 0;
            bottom: 0;
        }
        #big{
            width: 200px;
            height: 200px;
            margin: 100px 0 0 100px;
            background-color: green;
            /*以big作为参照物*/
            position: relative;
        }
        #big>div{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 50px 0 0 50px;
            /*以big下的div作为参照物*/
            position: relative;
        }
        #big>div>div{
            width: 50px;
            height: 50px;
            background-color: red;
            /*绝对定位*/
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div id="big">
    <div>
        <div></div>
    </div>
</div>
<div id="d1">div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位练习</title>
    <style>
        div{
        width: 300px;
        position: relative;
        /*border: 1px solid red;*/
        padding: 10px;
            background-color: #666666;
    }
        input{
            width: 260px;
            padding:10px 20px;
            border: none;
            font-size: 16px;
        }

        img{
            width: 28px;
            height: 28px;
            position: absolute;
            top: 14px;
            right: 20px;
        }
        p{
            margin: 0;
            font-size: 12px;
            color: red;
        }
    </style>
</head>
<body>
<div>
    <input type="text" placeholder="输入用户名" maxlength="10">
    <img src="images/a.jpeg" alt="">
    <p>用户名不能为空！</p>
</div>
</body>
</html>

2.9.4 固定定位

格式: position:fixed;
特点: 脱离文档流
如何控制元素的位置?
通过left/right/top/bottom相对于窗口做偏移，参照物为窗口。
应用场景:
当需要将元素固定在窗口的某个位置时使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        #d1{
            width: 100%;
            height: 100px;
            background-color: red;
            position: fixed;
            top: 0;
        }
        body{
            margin: 0;
            padding-top: 120px;
        }
        #d2{
            width: 50px;
            height: 200px;
            background-color: blue;
            position: fixed;
            bottom: 10%;
            right: 5%;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<img src="images/b.jpg" alt="">
<img src="images/b.jpg" alt="">
<img src="images/b.jpg" alt="">
<img src="images/b.jpg" alt="">
<img src="images/b.jpg" alt="">
<img src="images/b.jpg" alt="">
<img src="images/b.jpg" alt="">
<img src="images/b.jpg" alt="">
</body>
</html>

2.9.5 浮动定位

格式：float:left/right;
特点：脱离文档流, 元素从当前所在行向左或向右浮动,当撞到上级元素边缘或其它元素时停止.
浮动元素一行装不下时会自动折行, 折行时有可能被卡住
当元素的所有子元素全部浮动时,自动识别的高度会为0,后面元素会顶上来导致显示异常,通过给元素添加overflow:hidden可以解决此问题
应用场景: 当需要将纵向排列的元素改成横向排列时使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动定位</title>
    <style>
        body>div{
            width: 200px;

            border: 1px solid red;
            /*当元素的所有子元素全部浮动时  自动识别高度为0
            后面的元素会顶上来导致显示异常，添加overflow:hidden解决此异常*/
            overflow: hidden;
        }
        #d1{
            width: 50px;
            height: 50px;
            background-color: red;
            float: left;
        }
        #d2{
            width: 50px;
            height: 50px;
            background-color: green;
            float: left;
        }
        #d3{
            width: 50px;
            height: 50px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
<div>
    <div id="d1">div1</div>
    <div id="d2">div2</div>
    <div id="d3">div3</div>
</div>

</body>
</html>

2.10 溢出设置overflow

visible超出部分显示(默认)
hidden超出部分隐藏
scroll 超出部分滚动显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>溢出设置</title>
    <style>
        div{
            width: 800px;
            height: 800px;
        /* 设置超出部分显示方式*/
            overflow: scroll;
        }
    </style>
</head>
<body>
<div>
    <img src="images/a.jpeg" alt="">
</div>
</body>
</html>

2.11 行内元素垂直对齐方式vertical-align

top 上对齐
middle中间对齐
bottom下对齐
baseline基线对齐(默认)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内元素垂直对齐方式vertical-align</title>
    <style>
        .img_1{
            width: 100px;
        /* 行内元素的垂直对齐方式
        top上对齐
        middle中间对齐
        bottom下对齐
        baseline基线对齐（默认）
        */
            vertical-align: top;
        }
    </style>
</head>
<body>
<input type="text"><img class="img_1" src="images/b.jpg" alt="">
</body>
</html>

2.12 元素的显示层级

当两个元素非静态定位时可能存在层叠的问题通过z-index样式控制显示层级, 值越大显示越靠前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素显示层级</title>
    <style>
        #d1{
            width: 50px;
            height: 100px;
            background-color: red;
            position: absolute;
            /*设置显示层级 值越大显示越靠前
            只对非静态定位的元素有效
            */
            z-index: 3;
        }
        #d2{
            width: 100px;
            height: 50px;
            background-color: blue;
            position: absolute;
            /*设置显示层级 值越大显示越靠前*/
            z-index: 2;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

2.13 布局练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局练习</title>
    <style>
        body{
            font: 12px "simhei", Arial, Helvetica, sans-serif;
            color: #666;
        }
        body>div{
            width: 1000px;
            /*块级元素居中*/
            margin: 0 auto;
        }
        #t_div{
            overflow: hidden;/*解决高度为0的问题*/
            margin-bottom: 10px;
        }
        #t_l_div{
            width: 611px;
            height: 376px;
            float: left;
            background-color: green;
        }
        #t_r_div{
            width: 375px;
            height: 376px;
            float: right;
            background-color: red;
        }
        #t_l_div,#t_r_div,#b_l_div,#b_r_div>div{

        }
        #b_div{
            overflow: hidden;/*解决高度为0的问题*/
        }
        #b_l_div{
            width: 366px;
            height: 233px;
            background-color: #666666;
            float: left;
        }
        #b_r_div>div{
            width: 198px;
            height: 233px;
            background-color: pink;
            margin-left: 10px;
            float: left;
        }
        #b_r_div{
            float: right;
        }

    </style>
</head>
<body>
<div>
    <div id="t_div">
        <div id="t_l_div"></div>
        <div id="t_r_div"></div>
    </div>
    <div id="b_div">
        <div id="b_l_div"></div>
        <div id="b_r_div">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
</body>
</html>

3 JavaScript基本知识

3.1 JavaScript简介

JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。

JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？
如改变页面内容、修改指定元素的属性值、对表单进行校验等。

作用: 负责给页面添加动态效果

语言特点:

属于脚本语言(不需要编译直接由浏览器解析执行)
基于面向对象
属于弱类型语言
安全性强: JS语言只能访问浏览器内部的数据,浏览器以外电脑上的数据禁止访问
交互性强: 因为JS语言是嵌入到html页面中最终执行在客户端的语言可以和用户直接进行交互，而像Java语言是运行在服务器的语言和用户交互需要借助于网络,所以交互性JS语言会更强一些

3.2 JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：

内联: 在标签的事件属性中添加js代码,当事件触发时执行.
内部：将 JS代码定义在HTML页面中
外部：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

3.2.1 内联

在标签的事件属性中添加js代码,当事件触发时执行

事件: 是系统提供的一系列时间点
点击事件: 当点击元素时触发的时间点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS内联引入方式</title>
    
</head>
<body>
<!--onclick点击事件   alert弹出提示框-->
<input type="button" value="按钮" onclick="alert('按钮点击了！')">
</body>
</html>

3.2.2 内部

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间

代码如下：

alert(数据) 是 JavaScript 的一个方法，作用是将参数数据以浏览器弹框的形式输出出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS内部引入方式</title>
</head>
<body>

<script>
    alert("hello js1");
</script>
</body>
</html>

从结果可以看到 js 代码已经执行了。

提示：

在 HTML 文档中可以在任意地方，放置任意数量的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS内部引入方式</title>
    <script>
        alert("hello js1");
    </script>
</head>
<body>

<script>
    alert("hello js1");
</script>

</body>
</html>
<script>
    alert("hello js1");
</script>

一般把脚本置于 <body> 元素的底部，可改善显示速度

因为浏览器在加载页面的时候会从上
往下进行加载并解析。我们应该让用户看到页面内容，然后再展示动态的效果。

3.2.3 外部

第一步：定义外部 js 文件。如定义名为 demo.js的文件

demo.js 文件内容如下：

alert("hello js");

第二步：在页面中引入外部的js文件

在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS外部引入方式</title>
</head>
<body>

<script src="js/my.js"></script>
</body>
</html>

注意：

外部脚本不能包含 <script> 标签

在js文件中直接写 js 代码即可，不要在 js文件中写 script 标签

<script> 标签不能自闭合

在页面中引入外部js文件时，不能写成 <script src="../js/demo.js" />。

3.3 JavaScript基础语法

3.3.1 书写语法

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无

如果一行上写多个语句时，必须加分号用来区分多个语句。
注释
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
注意：JavaScript 没有文档注释
大括号表示代码块

下面语句大家肯定能看懂，和 java 一样大括号表示代码块。
```
if (count == 3) { 
   alert(count); 
} 
```

3.3.2 输出语句

js 可以通过以下方式进行内容的输出，只不过不同的语句输出到的位置不同

使用 window.alert() 写入警告框

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
      
  <script>
      window.alert("hello js");//写入警告框
  </script>
  </body>
  </html>

上面代码通过浏览器打开，我们可以看到弹框效果
在这里插入图片描述

使用 document.write() 写入 HTML 输出

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
      
  <script>
      document.write("hello js 2~");//写入html页面
  </script>
  </body>
  </html>

上面代码通过浏览器打开，我们可以在页面上看到 document.write(内容) 输出的内容
在这里插入图片描述

使用 console.log() 写入浏览器控制台

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
  
  <script>
      console.log("hello js 3");//写入浏览器的控制台
  </script>
  </body>
  </html>

在这里插入图片描述

3.3.3 变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。格式 var 变量名 = 数据值;。而在JavaScript 是一门弱类型语言，变量可以存放不同类型的值；如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数

var test = 20;
test = "张三";

js 中的变量名命名也有如下规则，和java语言基本都相同

组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
数字不能开头
建议使用驼峰命名

JavaScript 中 var 关键字有点特殊，有以下地方和其他语言不一样

作用域：全局变量

  {
      var age = 20;
  }
  alert(age);  // 在代码块中定义的age 变量，在代码块外边还可以使用

变量可以重复定义

  {
      var age = 20;
      var age = 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉
  }
  alert(age); //打印的结果是 30

针对如上的问题，==ECMAScript 6 新增了 let 关键字来定义变量。==它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。

例如：

{
    let age = 20;
}
alert(age);

结果并没有弹出

ECMAScript 6 新增了 const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。通过下面的代码看一下常用的特点就可以了

const PI = 3.14;
PI = 1;

我们可以看到给 PI 这个常量重新赋值时报错了。

let和var关键字的区别, 作用域有区别

使用let声明的变量,作用域和Java语言的作用域类似
使用var声明的变量,不管在什么位置声明都相当于是一个全局变量

java:
for(int i=0;i<10;i++){
  int y = i+1;
}
int z = i+y;  //报错 i和y超出了自身的作用域
JS:
for(let i=0;i<10;i++){
  let y = i+1;
}
let z = i+y;  //不报错,但是访问不到i和y 因为超出了作用域
for(var i=0;i<10;i++){
  var y = i+1;
}
var z = i+y;  //不仅不报错还能够访问到i和y的值

3.3.4 数据类型

JavaScript 中提供了两类数据类型：原始类型和引用类型。

使用 typeof 运算符可以获取数据类型

alert(typeof age); 以弹框的形式将 age 变量的数据类型输出

原始数据类型：

number：数字（整数、小数、NaN(Not a Number)）

var age = 20;
var price = 99.8;

alert(typeof age); // 结果是 ： number
alert(typeof price);// 结果是 ： number

注意： NaN是一个特殊的number类型的值，后面用到再说

string：字符、字符串，单双引皆可

var ch = 'a';
var name = '张三'; 
var addr = "北京";

alert(typeof ch); //结果是  string
alert(typeof name); //结果是  string
alert(typeof addr); //结果是  string

==注意：==在 js 中双引号和单引号都表示字符串类型的数据

boolean：布尔。true，false

var flag = true;
var flag2 = false;

alert(typeof flag); //结果是 boolean
alert(typeof flag2); //结果是 boolean

null：对象为空

var obj = null;

alert(typeof obj);//结果是 object

undefined：当声明的变量未初始化时，该变量的默认值是 undefined
```
var a ;
alert(typeof a); //结果是 undefined
```

3.3.5 运算符

JavaScript 提供了如下的运算符。大部分和 Java语言都是一样的，不同的是 JS 关系运算符中的 == 和 ===，一会我们只演示这两个的区别，其他运算符将不做演示

一元运算符：++，–
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=…
关系运算符：>，<，>=，<=，!=，==，===…
==: 先统一两个变量的类型再比较值，例如 “666”==666 为true
===:先比较类型,类型相同后再比较值，例如"666" ===666 为false
逻辑运算符：&&，||，!
三元运算符：条件表达式 ? true_value : false_value

1. ==和===区别

概述:

==：
1. 判断类型是否一样，如果不一样，则进行类型转换
2. 再去比较其值
===：js 中的全等于
1. 判断类型是否一样，如果不一样，直接返回false
2. 再去比较其值

代码：

var age1 = 20;
var age2 = "20";

alert(age1 == age2);// true
alert(age1 === age2);// false

2. 类型转换

上述讲解 == 运算符时，发现会进行类型转换，所以接下来我们来详细的讲解一下 JavaScript 中的类型转换。

其他类型转为number
- string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN
  
  将 string 转换为 number 有两种方式：
  - 使用 + 正号运算符：

      var str = +"20";
      alert(str + 1) //21

* 使用 `parseInt()` 函数(方法)：

      var str = "20";
      alert(parseInt(str) + 1);

> ==建议使用 `parseInt()` 函数进行转换。==

boolean 转换为 number 类型：true 转为1，false转为0
```
var flag = +false;
alert(flag); // 0
```
其他类型转为boolean
- number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
- string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
- null类型转换为 boolean 类型是 false
- undefined 转换为 boolean 类型是 false
代码如下：

  // var flag = 3;
  // var flag = "";
  var flag = undefined;
  
  if(flag){
      alert("转为true");
  }else {
      alert("转为false");
  }

使用场景：

在 Java 中使用字符串前，一般都会先判断字符串不是null，并且不是空字符才会做其他的一些操作，JavaScript也有类型的操作，代码如下：

var str = "abc";

//健壮性判断
if(str != null && str.length > 0){
    alert("转为true");
}else {
    alert("转为false");
}

但是由于 JavaScript 会自动进行类型转换，所以上述的判断可以进行简化，代码如下：

var str = "abc";

//健壮性判断
if(str){
    alert("转为true");
}else {
    alert("转为false");
}

3.3.6 流程控制语句

JavaScript 中提供了和 Java 一样的流程控制语句，如下

if
switch
for
while
dowhile

1. if 语句

var count = 3;
if (count == 3) {
    alert(count);
}

2. switch 语句

var num = 3;
switch (num) {
    case 1:
        alert("星期一");
        break;
    case 2:
        alert("星期二");
        break;
    case 3:
        alert("星期三");
        break;
    case 4:
        alert("星期四");
        break;
    case 5:
        alert("星期五");
        break;
    case 6:
        alert("星期六");
        break;
    case 7:
        alert("星期日");
        break;
    default:
        alert("输入的星期有误");
        break;
}

3. for 循环语句

var sum = 0;
for (let i = 1; i <= 100; i++) { //建议for循环小括号中定义的变量使用let
    sum += i;
}
alert(sum);

4. while 循环语句

var sum = 0;
var i = 1;
while (i <= 100) {
    sum += i;
    i++;
}
alert(sum);

5. do-while 循环语句

var sum = 0;
var i = 1;
do {
    sum += i;
    i++;
}
while (i <= 100);
alert(sum);

3.4 函数(方法)

函数（就是Java中的方法）是被设计为执行特定任务的代码块；JavaScript 函数通过 function 关键词进行定义。

3.4.1 定义格式

函数定义格式有两种：

方式1

  function 函数名(参数1,参数2..){
      要执行的代码
  }

方式2

  var 函数名 = function (参数列表){
      要执行的代码
  }

方式3

let f6 = new Function("name", "age", "console.log('f6:'+name+':'+age)")

注意：

形式参数不需要类型。因为JavaScript是弱类型语言

function add(a, b){
   return a + b;
}

上述函数的参数 a 和 b 不需要定义数据类型，因为在每个参数前加上 var 也没有任何意义。

返回值也不需要定义类型，可以在函数内部直接使用return返回即可

    //声明方法的方式一：
    //1.1 无参无返回值
    function f1() {
        console.log("f1方法")
    }

    //调用
    f1();

    //1.2 有参无返回值
    function f2(name, age) {
        console.log("f2:"+name + ":" + age)
    }

    f2("萧炎", 18);

    //1.3 无参有返回值
    function f3() {
        return "f3:我是返回值"
    }

    let info = f3();
    console.log(info)

    //1.4 有参有返回值
    function f4(x, y) {
        return x * y;
    }

    let result = f4(8, 8);
    console.log("f4:"+result)

    //声明方法的方式二：
    let f5 = function (name, age) {
        console.log("f5:"+name + ":" + age)
    }
    f5("美杜莎", 20);

    //声明方法的方式三：
    let f6 = new Function("name", "age", "console.log('f6:'+name+':'+age)")
    f6("药老", 60);

3.4.2 函数调用

函数调用函数：

函数名称(实际参数列表);

eg：

let result = add(10,20);

注意：

JS中，函数调用可以传递任意个数参数

例如 let result = add(1,2,3);

它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收。

3.4.3 页面相关方法

通过选择器获取页面中的元素对象
let 元素对象 = document.querySelector(“选择器”)
获取和修改元素的文本内容
元素对象.innerText = “xxx” 修改文本内容
元素对象.innerText 获取文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03页面相关方法</title>
</head>
<body>
<div>
    这是div
</div>
<input type="text" id="i1">
<input type="button" value="按钮" onclick="f()">

<script>
    function f() {
        //得到文本框和div
        let i = document.querySelector("#i1");
        let d = document.querySelector("div");
        //取出文本框的值并赋值给div
        d.innerText = i.value;
    }
</script>
</body>
</html>

计算器练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器练习</title>
</head>
<body>
<input type="text" id="i1">
<input type="text" id="i2">
<input type="button" value="平方" onclick="f(5)">
<input type="button" value="加" onclick="f(1)">
<input type="button" value="减" onclick="f(2)">
<input type="button" value="乘" onclick="f(3)">
<input type="button" value="除" onclick="f(4)">

<div>结果：<span></span></div>

<script>
    function f(x) {
        //得到页面中相关的元素对象
        let i1 = document.querySelector("#i1");
        let i2 = document.querySelector("#i2");
        let s = document.querySelector("span");
        //判断输入的两个值是不是NaN
        if (isNaN(i1.value)||isNaN(i2.value)){
            s.innerHTML = "<h2 style='color: red'>输入错误</h2>";
            return;
        }
        switch (x) {
            case 1: //加
                s.innerText = i1.value*1+i2.value*1;
                break;
            case 2: //减
                s.innerText = i1.value-i2.value;
                break;
            case 3: //乘
                s.innerText = i1.value*i2.value;
                break;
            case 4: //除
                s.innerText = i1.value/i2.value;
                break;
            case 5://平方
                s.innerText = i1.value * i1.value;
        }
    }

    /*let i1 = document.querySelector("#i1");
    let i2 = document.querySelector("#i2");

    let s=document.querySelector("span")
    function f1() {
        //"a"*"a"   NaN*NaN=NaN  不是一个数
        if (isNaN(i1.value)) {
            // s.innerText = "错误输入";
            s.innerHTML = "<h2 style='color: red'>输入错误</h2>";
            return;
        }
        //当两个字符串进行- * /运算时会自动转成数值，进行＋运算是拼接
        s.innerText = i1.value*i1.value+"";
        // s.innerText = i.value*1+i.value*1;//方法一
        //parseFloat()将字符串转成整数或小数
        // s.innerText = parseFloat(i.value) + parseFloat(i.value);//方法二
    }
    function f2() {
        if (isNaN(i1.value)) {
            // s.innerText = "错误输入";
            s.innerHTML = "<h2 style='color: red'>输入错误</h2>";
            return;
        }
        // s.innerText = i1.value * 1 + i1.value * 1;//方法一
        s.innerText = parseFloat(i1.value) + parseFloat(i2.value);//方法二
    }
    function f3() {
        if (isNaN(i1.value)) {
            // s.innerText = "错误输入";
            s.innerHTML = "<h2 style='color: red'>输入错误</h2>";
            return;
        }
        s.innerText = i1.value - i2.value;
    }
    function f4() {
        if (isNaN(i1.value)) {
            // s.innerText = "错误输入";
            s.innerHTML = "<h2 style='color: red'>输入错误</h2>";
            return;
        }
        s.innerText = i1.value * i2.value;
    }
    function f5() {
        if (isNaN(i1.value)) {
            // s.innerText = "错误输入";
            s.innerHTML = "<h2 style='color: red'>输入错误</h2>";
            return;
        }
        s.innerText = i1.value/i2.value;
    }*/
</script>
</body>
</html>

3.4.4 NaN

Not a Number: 不是一个数
isNaN(xxx) 判断变量是否是NaN

3.5 JavaScript常用对象

JavaScript 提供了很多对象供使用者来使用。这些对象总共分类三类

基本对象
包括string,number,boolean等
BOM 对象
Browser Object Model, 浏览器对象模型, 包括和浏览器相关的内容
DOM对象
Document Object Model, 文档对象模型,包括和页面标签相关的内容

3.5.1 Array对象

JavaScript Array对象用于定义数组

1. 定义格式

数组的定义格式有两种：

方式1

  var 变量名 = new Array(元素列表);

例如：

var arr = new Array(1,2,3); //1,2,3 是存储在数组中的数据（元素）

方式2

  var 变量名 = [元素列表];

例如：

  var arr = [1,2,3]; //1,2,3 是存储在数组中的数据（元素）

注意：Java中的数组静态初始化使用的是{}定义，而 JavaScript 中使用的是 [] 定义

2. 元素访问

访问数组中的元素和 Java 语言的一样，格式如下：

arr[索引] = 值;

代码演示：

 // 方式一
var arr = new Array(1,2,3);
// alert(arr);

// 方式二
var arr2 = [1,2,3];
//alert(arr2);

// 访问
arr2[0] = 10;
alert(arr2)

3. 特点

JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。

例如如下代码：

// 变长
var arr3 = [1,2,3];
arr3[10] = 10;
alert(arr3[10]); // 10
alert(arr3[9]);  //undefined

上面代码在定义数组中给了三个元素，又给索引是 10 的位置添加了数据 10，那么 索引3 到 索引9 位置的元素是什么呢？我们之前就介绍了，在 JavaScript 中没有赋值的话，默认就是 undefined。

如果给 arr3 数组添加字符串的数据，也是可以添加成功的

arr3[5] = "hello";
alert(arr3[5]); // hello

4. 属性

Array 对象提供了很多属性，如下图是官方文档截取的

而我们只讲解 length 属性，该数组可以动态的获取数组的长度。而有这个属性，我们就可以遍历数组了

var arr = [1,2,3];
for (let i = 0; i < arr.length; i++) {
    alert(arr[i]);
}

5. 方法

Array 对象同样也提供了很多方法，如下图是官方文档截取的

而我们在课堂中只演示 push 函数和 splice 函数。

push 函数：给数组添加元素，也就是在数组的末尾添加元素

参数表示要添加的元素

  // push:添加方法
  var arr5 = [1,2,3];
  arr5.push(10);
  alert(arr5);  //数组的元素是 {1,2,3,10}

splice 函数：删除元素

参数1：索引。表示从哪个索引位置删除

参数2：个数。表示删除几个元素

  // splice:删除元素
  var arr5 = [1,2,3];
  arr5.splice(0,1); //从 0 索引位置开始删除，删除一个元素 
  alert(arr5); // {2,3}

3.5.2 String对象

String对象的创建方式有两种

方式1：

  var 变量名 = new String(s);

方式2：

  var 变量名 = "数组";

属性：

String对象提供了很多属性，下面给大家列举了一个属性 length ，该属性是用于动态的获取字符串的长度

函数：

String对象提供了很多函数（方法），下面给大家列举了两个方法。

String对象还有一个函数 trim() ，该方法在文档中没有体现，但是所有的浏览器都支持；它是用来去掉字符串两端的空格。

代码演示：

var str4 = '  abc   ';
alert(1 + str4 + 1);

上面代码会输出内容 1 abc 1，很明显可以看到 abc 字符串左右两边是有空格的。接下来使用 trim() 函数

var str4 = '  abc   ';
alert(1 + str4.trim() + 1);

输出的内容是 1abc1 。这就是 trim() 函数的作用。

trim() 函数在以后开发中还是比较常用的，例如下图所示是登陆界面

用户在输入用户名和密码时，可能会习惯的输入一些空格，这样在我们后端程序中判断用户名和密码是否正确，结果肯定是失败。所以我们一般都会对用户输入的字符串数据进行去除前后空格的操作。

3.5.3 自定义对象

在 JavaScript 中自定义对象特别简单，下面就是自定义对象的格式：

var 对象名称 = {
    属性名称1:属性值1,
    属性名称2:属性值2,
    ...,
    函数名称:function (形参列表){},
	...
};

调用属性的格式：

对象名.属性名

调用函数的格式：

对象名.函数名()

接下来通过代码演示一下，让大家体验一下 JavaScript 中自定义对象

var person = {
        name : "zhangsan",
        age : 23,
        eat: function (){
            alert("干饭~");
        }
    };

alert(person.name);  //zhangsan
alert(person.age); //23

person.eat();  //干饭~

3.6 BOM

BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。

我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。

BOM 中包含了如下对象：

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

3.6.1 Window对象

window 对象是 JavaScript 对浏览器的窗口进行封装的对象。

1. 获取window对象

该对象不需要创建直接使用 window，其中 window. 可以省略。比如我们之前使用的 alert() 函数，其实就是 window 对象的函数，在调用是可以写成如下两种

显式使用 window 对象调用

  window.alert("abc");

隐式调用

  alert("abc")

2. window对象属性

window 对象提供了用于获取其他 BOM 组成对象的属性

名	描述
history	对History对象的只读引用。
location	用于宙口或框架的 Location对象。
Navigator	对Navigator对象的只读引用。
Screen	对screen对象的只读引用。

也就是说，我们想使用 Location 对象的话，就可以使用 window 对象获取；写成 window.location，而 window. 可以省略，简化写成 location 来获取 Location 对象。

3. window对象函数(方法)

window 对象提供了很多函数供我们使用，而很多都不常用；下面给大家列举了一些比较常用的方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()	按照指定的周期(以毫秒计)来调用函数或计算表达式，定时器。
setTimeout()	在指定的毫秒数后调用函数或计算表达式，只执行一次的定时器。
isNaN()	判断变量是否是NaN
parseInt()和parseFloat()	把字符串转成整数或小数
console.log()	控制台输出
clearInterval(timer)	停止定时器

setTimeout(function,毫秒值) : 在一定的时间间隔后执行一个function，只执行一次
setInterval(function,毫秒值) :在一定的时间间隔后执行一个function，循环执行

confirm代码演示：

// confirm()，点击确定按钮，返回true，点击取消按钮，返回false
var flag = confirm("确认删除？");

alert(flag);

定时器代码演示：

setTimeout(function (){
    alert("hehe");
},3000);

当我们打开浏览器，3秒后才会弹框输出 hehe，并且只会弹出一次。

setInterval(function (){
    alert("hehe");
},2000);

当我们打开浏览器，每隔2秒都会弹框输出 hehe。

4. 案例

定时器案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
</head>
<body>
<h1>0</h1>
<h2>0</h2>
<script>
    let count = 0;
    //开启定时器 每隔一秒调用一次方法
    //方法作为参数进行传递时不写()
    setInterval(f, 1000);
    function f() {
        count++;
        let h = document.querySelector("h1");
        h.innerText = count;
    }
    //匿名方法开启定时器
    let num = 0;
    setInterval(function () {
        num++;
        let h = document.querySelector("h2");
        h.innerText = num;
    },100)
</script>
</body>
</html>

3.6.2 History对象

History 对象是 JavaScript 对历史记录进行封装的对象。

History 对象的获取

使用 window.history获取，其中window. 可以省略

History 对象的函数
- history.length 获取历史页面数量
- history.back() 返回上一页面
- history.forward() 前往下一页面
- history.go(n)
  n=1是前往下1页面
  n=-1 返回上一页面
  n=2 前往下2个页面
  n=0代表刷新

当我们点击向左的箭头，就跳转到前一个访问的页面，这就是 back() 函数的作用；当我们点击向右的箭头，就跳转到下一个访问的页面，这就是 forward() 函数的作用。

3.6.3 Location对象

Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。

1. 获取Location对象

使用 window.location获取，其中window. 可以省略

window.location.方法();
location.方法();

2. Location对象属性

Location对象提供了很对属性。以后常用的只有一个属性 href

代码演示：

alert("要跳转了");
location.href = "https://www.baidu.com";

在浏览器首先会弹框显示 要跳转了，当我们点击了 确定 就会跳转到百度的首页。

3. 案例

需求：3秒跳转到百度首页

分析：

3秒跳转，由此可以确定需要使用到定时器，而只跳转一次，所以使用 setTimeOut()
要进行页面跳转，所以需要用到 location 对象的 href 属性实现

代码实现：

document.write("3秒跳转到首页..."); 
setTimeout(function (){
    location.href = "https://www.baidu.com"
},3000);

3.7 DOM

3.7.1 概述

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

作用：

JavaScript 通过 DOM，就能够对 HTML进行操作了

改变 HTML 元素的内容
改变 HTML 元素的样式（CSS）
对 HTML DOM 事件作出反应
添加和删除 HTML 元素

DOM相关概念：

DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。该标准被分为 3 个不同的部分：

核心 DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
XML DOM：针对 XML 文档的标准模型
HTML DOM：针对 HTML 文档的标准模型

该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象
- 例如：<img> 标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。
- 例如：<input type='button'> 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是 Element 对象。

3.7.2 元素对象

创建元素对象
let 元素对象 = document.createElement(“标签名”);
添加元素对象到某个元素里面
- document.body.appendChild(元素对象);
- 父对象.append(元素对象)
  let tabel = document.querySelector(“table”);
  tabel.append( 元素对象);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom相关</title>
</head>
<body>
<script>
    //创建标签
    let d=document.createElement("div")
    //给div设置显示的文本
    d.innerText = "我是div";
    //把div添加到body里面
    document.body.appendChild(d)

    //创建h1和h2
    let h1 = document.createElement("h1");
    let h2 = document.createElement("h2");
    h1.innerText = "这是h1";
    h2.innerText = "这是h2";
    document.body.append(h1, h2);

    //创建图片并添加
    let i = document.createElement("img");
    //给元素设置属性
    i.src = "images/b.jpg";
    //添加到页面中
    document.body.append(i);
</script>
</body>
</html>

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Doc相关练习</title>
</head>
<body>
<input type="text" id="i1">
<input type="button" value="添加老婆1" onclick="f(1)">
<input type="button" value="添加老婆2" onclick="f(2)">
<input type="button" value="添加老婆3" onclick="f(3)"><br>

<script>
    let i1 = document.querySelector("#i1");

    function f(sum) {

        switch (sum) {
            case 1:
                for (let i = 0; i < i1.value; i++) {
                    let img1 = document.createElement("img");
                    img1.src = "images/a.jpg";
                    img1.style.width = "300px";
                    document.body.append(img1);
                }
                break;
            case 2:
                for (let i = 0; i < i1.value; i++) {
                    let img2 = document.createElement("img");
                    img2.src = "images/b.jpg";
                    img2.style.width = "300px";
                    document.body.append(img2);
                }
                break;
            case 3:
                for (let i = 0; i < i1.value; i++) {
                    let img3 = document.createElement("img");
                    img3.src = "images/c.jpg";
                    img3.style.width = "300px";
                    document.body.append(img3);
                }
                break;
        }
    }
</script>
</body>
</html>

3.7.3 获取 Element对象

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。

Document 对象中提供了以下获取 Element 元素对象的函数

getElementById()：根据id属性值获取，返回单个Element对象
getElementsByTagName()：根据标签名称获取，返回Element对象数组
getElementsByName()：根据name属性值获取，返回Element对象数组
getElementsByClassName()：根据class属性值获取，返回Element对象数组

代码演示：

下面有提前准备好的页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="../imgs/off.gif"> <br>

    <div class="cls">斗罗大陆</div>   <br>
    <div class="cls">唐三</div> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <script>
		//在此处书写js代码
    </script>
</body>
</html>

根据 id 属性值获取上面的 img 元素对象，返回单个对象

   var img = document.getElementById("light");
   alert(img);

结果如下：

从弹框输出的内容，也可以看出是一个图片元素对象。

根据标签名称获取所有的 div 元素对象

   var divs = document.getElementsByTagName("div");// 返回一个数组，数组中存储的是 div 元素对象
   // alert(divs.length);  //输出 数组的长度
   //遍历数组
   for (let i = 0; i < divs.length; i++) {
       alert(divs[i]);
   }

获取所有的满足 name = 'hobby' 条件的元素对象

   //3. getElementsByName：根据name属性值获取，返回Element对象数组
   var hobbys = document.getElementsByName("hobby");
   for (let i = 0; i < hobbys.length; i++) {
       alert(hobbys[i]);
   }

获取所有的满足 class='cls' 条件的元素对象

   //4. getElementsByClassName：根据class属性值获取，返回Element对象数组
   var clss = document.getElementsByClassName("cls");
   for (let i = 0; i < clss.length; i++) {
       alert(clss[i]);
   }

3.7.4 HTML Element对象使用

HTML 中的 Element 元素对象有很多，不可能全部记住，以后是根据具体的需求查阅文档使用。

下面我们通过具体的案例给大家演示文档的查询和对象的使用；下面提前给大家准备好的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="../imgs/off.gif"> <br>

    <div class="cls">斗罗大陆</div>   <br>
    <div class="cls">唐三</div> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <script>
        //在此处写js低吗
    </script>
</body>
</html>

3.8 事件监听

要想知道什么是事件监听，首先先聊聊什么是事件？

HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的 按钮被点击、鼠标移动到元素之上、按下键盘按键 等都是事件。

事件监听是JavaScript 可以在事件被侦测到时==执行一段逻辑代码。==例如当我们输入了用户名 光标离开 输入框，就需要通过 js 代码对输入的内容进行校验，没通过校验就在输入框后提示 用户名格式有误!

3.8.1 事件绑定

JavaScript 提供了两种事件绑定方式：

方式一：通过 HTML标签中的事件属性进行绑定

如下面代码，有一个按钮元素，我们是在该标签上定义 事件属性，在事件属性中绑定函数。onclick 就是 单击事件 的事件属性。onclick='on（）' 表示该点击事件绑定了一个名为 on() 的函数

  <input type="button" οnclick='on()’>

下面是点击事件绑定的 on() 函数

  function on(){
  	alert("我被点了");
  }

方式二：通过 DOM 元素属性绑定

如下面代码是按钮标签，在该标签上我们并没有使用 事件属性，绑定事件的操作需要在 js 代码中实现

  <input type="button" id="btn">

下面 js 代码是获取了 id='btn' 的元素对象，然后将 onclick 作为该对象的属性，并且绑定匿名函数。该函数是在事件触发后自动执行

  document.getElementById("btn").onclick = function (){
      alert("我被点了");
  }

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--方式1：在下面input标签上添加 onclick 属性，并绑定 on() 函数-->
    <input type="button" value="点我" onclick="on()"> <br>
    <input type="button" value="再点我" id="btn">

    <script>
        function on(){
            alert("我被点了");
        }
      	//方式2：获取 id="btn" 元素对象，通过调用 onclick 属性 绑定点击事件
        document.getElementById("btn").onclick = function (){
            alert("我被点了");
        }
    </script>
</body>
</html>

3.8.2 常见事件

上面案例中使用到了 onclick 事件属性，那都有哪些事件属性供我们使用呢？下面就给大家列举一些比较常用的事件属性

事件属性名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

onfocus 获得焦点事件。
onblur 失去焦点事件。
onmouseout 鼠标移出事件。
onmouseover 鼠标移入事件。
onsubmit 表单提交事件

如下是带有表单的页面

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
      <form id="register" action="#" >
          <input type="text" name="username" />
          <input type="submit" value="提交">
      </form>
      <script>
          
      </script>
  </body>
  </html>

如上代码的表单，当我们点击 提交 按钮后，表单就会提交，此处默认使用的是 GET 提交方式，会将提交的数据拼接到 URL 后。现需要通过 js 代码实现阻止表单提交的功能，js 代码实现如下：

获取 form 表单元素对象。
给 form 表单元素对象绑定 onsubmit 事件，并绑定匿名函数。
该匿名函数如果返回的是true，提交表单；如果返回的是false，阻止表单提交。

  document.getElementById("register").onsubmit = function (){
      //onsubmit 返回true，则表单会被提交，返回false，则表单不提交
      return true;
  }

3.9 表单验证案例

3.9.1 需求

有如下注册页面，对表单进行校验，如果输入的用户名、密码、手机号符合规则，则允许提交；如果不符合规则，则不允许提交。

完成以下需求：

当输入框失去焦点时，验证输入内容是否符合要求
当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交

3.9.2 环境准备

下面是初始页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>
    <div class="form-div">
        <div class="reg-content">
            <h1>欢迎注册</h1>
            <span>已有帐号？</span> <a href="#">登录</a>
        </div>
        <form id="reg-form" action="#" method="get">
            <table>
                <tr>
                    <td>用户名</td>
                    <td class="inputs">
                        <input name="username" type="text" id="username">
                        <br>
                        <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                    </td>
                </tr>

                <tr>
                    <td>密码</td>
                    <td class="inputs">
                        <input name="password" type="password" id="password">
                        <br>
                        <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                    </td>
                </tr>

                <tr>
                    <td>手机号</td>
                    <td class="inputs"><input name="tel" type="text" id="tel">
                        <br>
                        <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                    </td>
                </tr>
            </table>
            <div class="buttons">
                <input value="注 册" type="submit" id="reg_btn">
            </div>
            <br class="clear">
        </form>
    </div>
    <script>
    </script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.reg-content{
    padding: 30px;
    margin: 3px;
}
a, img {
    border: 0;
}

body {
    background-image: url("../imgs/reg_bg_min.jpg") ;
    text-align: center;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    padding: 0;
    height: 90px;

}
.inputs{
    vertical-align: top;
}

.clear {
    clear: both;
}

.clear:before, .clear:after {
    content: "";
    display: table;
}

.clear:after {
    clear: both;
}

.form-div {
    background-color: rgba(255, 255, 255, 0.27);
    border-radius: 10px;
    border: 1px solid #aaa;
    width: 424px;
    margin-top: 150px;
    margin-left:1050px;
    padding: 30px 0 20px 0px;
    font-size: 16px;
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);
    text-align: left;
}

.form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {
    width: 268px;
    margin: 10px;
    line-height: 20px;
    font-size: 16px;
}

.form-div input[type="checkbox"] {
    margin: 20px 0 20px 10px;
}

.form-div input[type="button"], .form-div input[type="submit"] {
    margin: 10px 20px 0 0;
}

.form-div table {
    margin: 0 auto;
    text-align: right;
    color: rgba(64, 64, 64, 1.00);
}

.form-div table img {
    vertical-align: middle;
    margin: 0 0 5px 0;
}

.footer {
    color: rgba(64, 64, 64, 1.00);
    font-size: 12px;
    margin-top: 30px;
}

.form-div .buttons {
    float: right;
}

input[type="text"], input[type="password"], input[type="email"] {
    border-radius: 8px;
    box-shadow: inset 0 2px 5px #eee;
    padding: 10px;
    border: 1px solid #D4D4D4;
    color: #333333;
    margin-top: 5px;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
    border: 1px solid #50afeb;
    outline: none;
}

input[type="button"], input[type="submit"] {
    padding: 7px 15px;
    background-color: #3c6db0;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    min-width: 80px;
    border: none;
    color: #FFF;
    box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
}

input[type="button"]:hover, input[type="submit"]:hover {
    background-color: #5a88c8;
}

input[type="button"]:active, input[type="submit"]:active {
    background-color: #5a88c8;
}
.err_msg{
    color: red;
    padding-right: 170px;
}
#password_err,#tel_err{
    padding-right: 195px;
}

#reg_btn{
    margin-right:50px; width: 285px; height: 45px; margin-top:20px;
}

3.9.3 验证输入框

此小节完成如下功能：

校验用户名。当用户名输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使 id='username_err' 的span标签显示出来，给出用户提示。
校验密码。当密码输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使 id='password_err' 的span标签显示出来，给出用户提示。
校验手机号。当手机号输入框失去焦点时，判断输入的内容是否符合 长度是 11 位 规则，不符合使 id='tel_err' 的span标签显示出来，给出用户提示。

代码如下：

//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");

//1.2 绑定onblur事件 失去焦点
usernameInput.onblur = function () {
    //1.3 获取用户输入的用户名
    var username = usernameInput.value.trim();

    //1.4 判断用户名是否符合规则：长度 6~12
    if (username.length >= 6 && username.length <= 12) {
        //符合规则
        document.getElementById("username_err").style.display = 'none';
    } else {
        //不合符规则
        document.getElementById("username_err").style.display = '';
    }
}

//1. 验证密码是否符合规则
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");

//1.2 绑定onblur事件 失去焦点
passwordInput.onblur = function() {
    //1.3 获取用户输入的密码
    var password = passwordInput.value.trim();

    //1.4 判断密码是否符合规则：长度 6~12
    if (password.length >= 6 && password.length <= 12) {
        //符合规则
        document.getElementById("password_err").style.display = 'none';
    } else {
        //不合符规则
        document.getElementById("password_err").style.display = '';
    }
}

//1. 验证手机号是否符合规则
//1.1 获取手机号的输入框
var telInput = document.getElementById("tel");

//1.2 绑定onblur事件 失去焦点
telInput.onblur = function() {
    //1.3 获取用户输入的手机号
    var tel = telInput.value.trim();

    //1.4 判断手机号是否符合规则：长度 11
    if (tel.length == 11) {
        //符合规则
        document.getElementById("tel_err").style.display = 'none';
    } else {
        //不合符规则
        document.getElementById("tel_err").style.display = '';
    }
}

3.9.4 验证表单

当用户点击 注册 按钮时，需要同时对输入的 用户名、密码、手机号 ，如果都符合规则，则提交表单；如果有一个不符合规则，则不允许提交表单。实现该功能需要获取表单元素对象，并绑定 onsubmit 事件

//1. 获取表单对象
var regForm = document.getElementById("reg-form");

//2. 绑定onsubmit 事件
regForm.onsubmit = function () {
    
}

onsubmit 事件绑定的函数需要对输入的 用户名、密码、手机号 进行校验，这些校验我们之前都已经实现过了，这里我们还需要再校验一次吗？不需要，只需要对之前校验的代码进行改造，把每个校验的代码专门抽象到有名字的函数中，方便调用；并且每个函数都要返回结果来去决定是提交表单还是阻止表单提交，代码如下：

//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");

//1.2 绑定onblur事件 失去焦点
usernameInput.onblur = checkUsername;

function checkUsername() {
    //1.3 获取用户输入的用户名
    var username = usernameInput.value.trim();

    //1.4 判断用户名是否符合规则：长度 6~12
    var flag = username.length >= 6 && username.length <= 12;
    if (flag) {
        //符合规则
        document.getElementById("username_err").style.display = 'none';
    } else {
        //不合符规则
        document.getElementById("username_err").style.display = '';
    }
    return flag;
}

//1. 验证密码是否符合规则
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");

//1.2 绑定onblur事件 失去焦点
passwordInput.onblur = checkPassword;

function checkPassword() {
    //1.3 获取用户输入的密码
    var password = passwordInput.value.trim();

    //1.4 判断密码是否符合规则：长度 6~12
    var flag = password.length >= 6 && password.length <= 12;
    if (flag) {
        //符合规则
        document.getElementById("password_err").style.display = 'none';
    } else {
        //不合符规则
        document.getElementById("password_err").style.display = '';
    }
    return flag;
}

//1. 验证手机号是否符合规则
//1.1 获取手机号的输入框
var telInput = document.getElementById("tel");

//1.2 绑定onblur事件 失去焦点
telInput.onblur = checkTel;

function checkTel() {
    //1.3 获取用户输入的手机号
    var tel = telInput.value.trim();

    //1.4 判断手机号是否符合规则：长度 11
    var flag = tel.length == 11;
    if (flag) {
        //符合规则
        document.getElementById("tel_err").style.display = 'none';
    } else {
        //不合符规则
        document.getElementById("tel_err").style.display = '';
    }
    return flag;
}

而 onsubmit 绑定的函数需要调用 checkUsername() 函数、checkPassword() 函数、checkTel() 函数。

//1. 获取表单对象
var regForm = document.getElementById("reg-form");

//2. 绑定onsubmit 事件
regForm.onsubmit = function () {
    //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false

    var flag = checkUsername() && checkPassword() && checkTel();

    return flag;
}

3.9 RegExp对象

RegExp 是正则对象。正则对象是判断指定字符串是否符合规则。

3.9.1 正则对象使用

1. 创建对象

正则对象有两种创建方式：

直接量方式：注意不要加引号

  var reg = /正则表达式/;

创建 RegExp 对象

  var reg = new RegExp("正则表达式");

2. 函数

test(str) ：判断指定字符串是否符合规则，返回 true或 false

3.9.2 正则表达式

从上面创建正则对象的格式中可以看出不管哪种方式都需要正则表达式，那么什么是正则表达式呢？

正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。

正则表达式是和语言无关的。很多语言都支持正则表达式，Java语言也支持，只不过正则表达式在不同的语言中的使用方式不同，js 中需要使用正则对象来使用正则表达式。

正则表达式常用的规则如下：

^：表示开始
$：表示结束
[ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符
.：代表任意单个字符，除了换行和行结束符
\w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]
\d：代表数字字符：相当于 [0-9]

量词：

+：至少一个
*：零个或多个
？：零个或一个
{x}：x个
{m,}：至少m个
{m,n}：至少m个，最多n个

代码演示：

// 规则：单词字符，6~12
//1,创建正则对象，对正则表达式进行封装
var reg = /^\w{6,12}$/;

var str = "abcccc";
//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag);

4 Vue

4.1 MVVM模式

Model: 模型, 指数据模型,这个数据一般来自于服务器
View: 视图, 指页面标签内容
ViewModel:视图模型,将页面中可能发生改变的元素和某个变量在内存中进行绑定,当变量的值发生改变时会从内存中直接找到对应的元素让其改变

4.2 Vue相关概念

Vue框架是目前最流行的前端框架，免除原生JavaScript中的DOM操作。
Vue对象相当于MVVM设计模式中的VM, 负责将页面中可能发生改变的元素和变量进行绑定, 绑定完之后会不断监听变量的改变,
当变量的值发生改变时会自动找到对应的元素并改变其显示内容
Vue的官网https://cn.vuejs.org/

4.3 快速入门Hello Vue！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06HelloVue</title>
    <!--引入Vue框架文件-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{info}}</h1>
</div>
<script>
    let v = new Vue({
        el: "#app",//告诉Vue对象管理哪个元素
        data: {
            info: "Hello Vue!"
        }
    });
    setTimeout(function () {
        v.info = "值改变了！";
    }, 5000);
</script>
</body>
</html>

4.4 Vue 指令

**指令：**HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

常用的指令有：

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性
v-text	让元素的文本内容和变量进行绑定
v-html	让元素的html内容和变量进行绑定

1. vue文本相关指令

v-text:让元素的文本内容和变量进行绑定
v-html:让元素的html内容和变量进行绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue文本相关指令</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div>
    <!--{{变量}}：插值，让此处的文本和data里面的变量进行绑定，该写法不依赖某个标签-->
    <h1>{{info}}</h1>
    <!--v-text=变量，让元素的文本内容和变量进行绑定-->
    <p v-text="info"></p>
    <!--v-html=变量，让元素的标签内容和变量进行绑定-->
    <p v-html="info"></p>
    <!--没有任何标签-->
    {{info}}


</div>
<script>
    let v = new Vue({
        el: "div",
        data: {
            info: "文本相关练习<b>加粗</b>"
        }
    })
</script>
</body>
</html>

2. v-bind:属性绑定

v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性绑定</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div>
    <!--v-bind属性绑定-->
    <input type="text" v-bind:value="msg">
    <!--v-bind属性绑定  简写-->
    <input type="text" :value="msg">
    <a :href="url">超链接</a>
    <img :src="imgUrl" alt="" width="300px">
</div>
<script>
    let v = new Vue({
        el: "div",
        data: {
            msg: "属性绑定测试",
            url:"http://www.baidu.com",
            imgUrl:"images/b.jpg"
        }
    });
</script>
</body>
</html>

3. v-model双向绑定

v-model: 在表单元素上创建双向数据绑定，当变量的值发生改变页面会跟着改变, 页面的内容改变时变量也会跟着改变,只有使用form表单中的控件时才会涉及到双向绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div>
    <!--输入框的值发生了改变，msg也发生了改变，反之也一样，双向影响-->
    <!--当需要获取input值得实惠实用双向绑定-->
    <input type="text" v-model="msg">
    <h1>{{msg}}</h1>
    <hr>
    <input type="radio" v-model="gender" value="男">男
    <input type="radio" v-model="gender" value="女">女
    <h2>{{gender}}</h2>

</div>
<script>
    let v = new Vue({
        el: "div",
        data: {
            msg: "双向绑定测试aaa",
            gender:"男"
        }
    })
</script>
</body>
</html>

4. v-on事件绑定

v-on: 为HTML标签绑定事件
可以简写为@click

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div>
    <input type="button" value="按钮1" v-on:click="f()">
    <input type="button" value="按钮2" @click="f1()">
    {{info}}
</div>
<script>
    let v = new Vue({
        el: "div",
        data: {
            info: "事件绑定"
        },
        methods: {
            f: function () {
                v.info = "按钮1点击了";
            },
            f1() {
                v.info = "按钮2点击了";
            }
        }
    })
</script>
</body>
</html>

5. v-for循环遍历指令

指令使用的格式如下：

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>

注意：需要循环那个标签，v-for 指令就写在那个标签上。

如果在页面需要使用到集合模型数据的索引，就需要使用如下格式：

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}} {{变量名}}
</标签>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue循环遍历</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-for="car in arr">{{car.name}}-----{{car.price}}</h1>
<hr>

    <table border="1px">
        <caption>国产优秀纯电汽车</caption>
        <tr>
            <th>编号</th>
            <th>名字</th>
            <th>价格</th>
            <th>类型</th>
        </tr>
        <!--car代表数组中的美一个对象，i代表遍历的下标-->
        <tr v-for="(car,i) in arr">
            <td>{{i+1}}</td>
            <td>{{car.name}}</td>
            <td>{{car.price}}</td>
            <td>{{car.type}}</td>
        </tr>

    </table>
</div>
<script>
    let v = new Vue({
        el: "#app",
        data: {
            arr: [
                {name: "比亚迪汉EV", price: 250000, type: "轿车"},
                {name: "奥迪GTR", price: 2500000, type: "轿跑"},
                {name: "极氪001", price: 250000, type: "轿跑"},
            ]
        }
    });
</script>
</body>
</html>

6. 条件判断指令

指令	作用
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值

7. 案例

1 @click、v-model猜数字练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字练习</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div>
    <input type="text" placeholder="请输入0-100之间的整数" v-model="number">
    <input type="button" value="猜一猜" @click="f()">
    <h1>结果：{{msg}}</h1>
</div>
<script>
    let num = parseInt(Math.random() * 101);
    let count = 0;
    console.log("随机数为："+num);
    let v = new Vue({
        el: "div",
        data:{
            msg: "",
            number:""
        },
        methods:{
            f() {
                count++;
                console.log("你输入的数为"+v.number);
                if (v.number > num) {
                    v.msg="猜大了！";
                }else if (v.number < num) {
                    v.msg="猜小了！";
                }else{
                    v.msg = "恭喜老板在第" + count + "次猜对了！";
                    count = 0;
                    num = parseInt(Math.random() * 101);
                    console.log("随机数为："+num);
                }
            }
        }
    });
</script>
</body>
</html>

2 @click、v-model计算器练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器练习</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div>
    <input type="text" v-model="i1">
    <input type="text" v-model="i2">
    <input type="button" value="加" @click="f('+')">
    <input type="button" value="减" @click="f('-')">
    <input type="button" value="乘" @click="f('*')">
    <input type="button" value="除" @click="f('/')">
    <h1>结果：{{result}}</h1>
</div>
<script>
    let v = new Vue({
        el: "div",
        data: {
            result: "",
            i1: "",
            i2: ""
        },
        methods: {
            f(x) {
                if (isNaN(v.i1 || v.i2)) {
                    v.result = "输入错误";
                }
                //eval()方法可以将字符串以代码的形式执行
                v.result =eval(v.i1 +x+ v.i2);
            }
        }
    })
</script>
</body>
</html>

3 @click、v-model员工列表练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工列表练习</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" placeholder="姓名" v-model="name">
    <input type="text" placeholder="工资" v-model="salary">
    <input type="text" placeholder="工作" v-model="job">
    <input type="button" value="添加" @click="f()">
    <table border="1px">
        <caption>员工列表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>工资</th>
            <th>工作</th>
            <th>操作</th>
        </tr>
        <tr v-for="(e,i) in arr">
            <td>{{i+1}}</td>
            <td>{{e.name}}</td>
            <td>{{e.salary}}</td>
            <td>{{e.job}}</td>
            <td><input type="button" @click="del(i)" value="删除"></td>
        </tr>
    </table>
</div>
<script>

    let v = new Vue({
        el: "#app",
        data: {
            name: "",
            salary: "",
            job: "",
            arr: [
                {name:"唐三",salary: 1000,job:"销售"},
                {name:"小舞",salary: 1200,job:"人事"},
            ]
        },
        methods:{
            f() {
                //往arr数组中添加一个对象
                v.arr.push({name: v.name, salary: v.salary, job: v.job});
                v.name = "";
                v.salary = "";
                v.job = "";
            },
            del(i) {
                //删除arr数组中i下标位置的对象
                v.arr.splice(i, 1);
            }
        }
    });
</script>
</body>
</html>

4 v-for、v-bind:个人信息练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息练习</title>
    <script src="js/vue.js"></script>
    <style>
        input {
            display: block;
        }
        table,input {
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="app">
    <table border="1px">
        <caption>个人信息</caption>
        <tr>
            <td>照片：</td>
            <!--属性绑定v-bind:src-->
            <td><img width="300px" alt="" :src="person.imgUrl"></td>
        </tr>
        <tr>
            <td>名字：</td>
            <td>{{person.name}}</td>
        </tr>
        <tr>
            <td>年龄：</td>
            <td>{{person.age}}</td>
        </tr>
        <tr>
            <td>好友：</td>
            <td>
                <ul>
                    <li v-for="name in person.friend">
                        {{name}}
                    </li>
                </ul>
            </td>
        </tr>
    </table>
    <input type="button" value="请求数据" @click="f()">
</div>
<script>
    let v = new Vue({
        el: "#app",
        data:{
            person:{
                name:"xxx",
                age:"x",
                imgUrl: "",
                friend:["xxx","xxx","xxx"]
            },
        },
        methods:{
            f() {
                //模拟从服务器获取的数据
                let person = {
                    name: "小舞",
                    age: 18,
                    imgUrl: "images/c.jpg",
                    friend: ["宁荣荣", "奥斯卡", "马红俊"]
                };
                v.person = person;
            }
        }
    });
</script>
</body>
</html>

5 显示隐藏相关条件判断指令综合练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏相关条件判断指令综合练习</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--true登录  不显示 ， false未登录 不显示-->
    <div v-if="!isLogin">
        <a href="javascript:void(0)">注册</a>
        <!--如果超链接点击时  不离开此页面需要添加javascript:void(0)  废掉跳转功能-->
        <a href="javascript:void(0)" @click="isLogin=true">登录</a>
    </div>
    <div v-else>
        <input type="text" v-model="newName">
        <input type="button" value="添加" @click="f()"><!--@click="arr.push(newName)"  当只有一句时可以直接写到标签中-->
        <a href="javascript:void(0)" @click="isLogin=false">登出</a>
    </div>
    <ul>
        <li v-for="name in arr">{{name}}</li>
    </ul>
</div>
<script>
    let v = new Vue({
        el: "#app",
        data: {
            arr: ["刘备", "关羽"],
            isLogin: false,
            newName:""
        },
        methods:{
            f() {
                v.arr.push(v.newName);
            }
        }
    });
</script>
</body>
</html>

4.5 Vue的生命周期

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

beforeCreate（创建前） 在数据观测和初始化事件还未开始
created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来
beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted（载入后） 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据。
created的使用：
在data{},之后

created:function () {
            //发请求获取当前登录的用户对象  currentUser当前的用户
            axios.get("/currentUser").then(function (response) {
                v.user = response.data;
                //如果当前客户端没有登录的话得到的是空字符串""
                //如果是空字符串代表还没有登录isLogin为false 如果不是空字符串代表登录过
                v.isLogin = v.user == "" ? false : true;
            });
            //
            axios.get("/select").then(function (response) {
                v.arr = response.data;
            });
        },

vue官网的生命周期图示：
在这里插入图片描述

4.6 Vue发起异步请求

通过Axios框架发出异步请求,所以需要引入Axios.js

<script src="js/axios.min.js"></script>

axios.post("/login", v.user).then(function (response) {
//判断登录成功
if (response.data == 1) {
//让浏览器返回到首页
	alert("登录成功!");
location.href = "/";
} else if (response.data == 2) {
	alert("用户名不存在!");
} else {
	alert("密码错误!");
}
});

//得到地址栏中的分类id
let cid = location.search.split("=")[1];
this.currentIndex = cid;
axios.get("/product/select/category?cid="+cid).then(function (response) {
v.productArr = response.data;
});

4.7 Get请求和Post请求

从字面意思理解, Get是跟服务器要数据, Post是给服务器传数据

Get: 请求参数写在请求地址的后面(可见),请求参数有大小限制只能穿几k的数据(不能处理文件上传)
应用场景: 查询请求一般都会使用get, 删除也会使用get请求
Post:请求参数放在请求体里面(不可见),参数没有大小限制
应用场景: 文件上传, 带有敏感信息的请求(比如注册登录时有密码)

5 ElementUI

官网：https://element.eleme.cn/

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01helloEUI</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="../css/eui.css">
</head>
<body>
<div id="app">

</div>
</body>
<!-- import Vue before Element -->
<script src="../js/vue.js"></script>
<!-- import JavaScript -->
<script src="../js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {

            };
        }
    })
</script>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>02按钮</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="../css/eui.css">
</head>
<body>
<div id="app">
    <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button plain>朴素按钮</el-button>
        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="success" plain>成功按钮</el-button>
        <el-button type="info" plain>信息按钮</el-button>
        <el-button type="warning" plain>警告按钮</el-button>
        <el-button type="danger" plain>危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button round>圆角按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <el-button type="success" round>成功按钮</el-button>
        <el-button type="info" round>信息按钮</el-button>
        <el-button type="warning" round>警告按钮</el-button>
        <el-button type="danger" round>危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="info" icon="el-icon-message" circle></el-button>
        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>
    <hr>
    <el-button type="success" plain>默认按钮</el-button>
    <el-button type="success" plain size="medium">中等按钮</el-button>
    <el-button type="success" plain size="small">小型按钮</el-button>
    <el-button type="success" plain size="mini">超小按钮</el-button>

</div>
</body>
<!-- import Vue before Element -->
<script src="../js/vue.js"></script>
<!-- import JavaScript -->
<script src="../js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {

            }
        }
    })
</script>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>03字体图标</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="../css/eui.css">
</head>
<body>
<div id="app">
    <i class="el-icon-edit"></i>
    <i class="el-icon-share"></i>
    <i class="el-icon-delete"></i>
    <i class="el-icon-delete-solid">删除</i>
    <i class="el-icon-platform-eleme" style="color: yellow;font-size: 50px;">饿了么</i>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-button type="primary" icon="el-icon-refresh">刷新</el-button>

</div>
</body>
<!-- import Vue before Element -->
<script src="../js/vue.js"></script>
<!-- import JavaScript -->
<script src="../js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {

            }
        }
    })
</script>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>04图片</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="../css/eui.css">
    <style>
        img{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="app">
<!--fill保证正方形完整显示，图片变形   contain保证图片完整显示，会漏白边   cover保证正方形图片显示不完整   none取中间位置展示  -->
    <div class="demo-image">
        <div class="block" v-for="fit in fits" :key="fit">
            <span class="demonstration">{{ fit }}</span>
            <el-image
                    style="width: 100px; height: 100px"
                    :src="url"
                    :fit="fit"></el-image>
        </div>
        <!--所有图片尺寸为200*200-->
        <h1>1. 保证图片完整显示并且不能变形</h1>
        <el-image style="width: 200px;height: 200px" :src="url" fit="contain"></el-image>
        <h1>2. 保证图片完整显示</h1>
        <el-image style="width: 200px;height: 200px" :src="url" fit="fill"></el-image>
        <h1>3. 保证图片宽高比，并且沾满200*200</h1>
        <el-image style="width: 200px;height: 200px" :src="url" fit="cover"></el-image>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="../js/vue.js"></script>
<!-- import JavaScript -->
<script src="../js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                url2: '../images/a.jpg'
            }
        }
    })
</script>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>05消息提示</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="../css/eui.css">
</head>
<body>
<div id="app">
    <template>
        <el-button :plain="true" @click="open2">成功</el-button>
        <el-button :plain="true" @click="open3">警告</el-button>
        <el-button :plain="true" @click="open1">消息</el-button>
        <el-button :plain="true" @click="open4">错误</el-button>
        <el-button :plain="true" @click="open5">成功提示</el-button>
        <el-button :plain="true" @click="open6">错误提示</el-button>
    </template>
</div>
</body>
<!-- import Vue before Element -->
<script src="../js/vue.js"></script>
<!-- import JavaScript -->
<script src="../js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {

            }
        },
        methods: {
            open1() {
                this.$message('这是一条消息提示');
            },
            open2() {
                this.$message({
                    message: '恭喜你，这是一条成功消息',
                    type: 'success'
                });
            },

            open3() {
                this.$message({
                    message: '警告哦，这是一条警告消息',
                    type: 'warning'
                });
            },

            open4() {
                this.$message.error('错了哦，这是一条错误消息');
            },
            open5() {
                v.$message.success('登录成功！');
            },
            open6() {
                this.$message.error('登录失败！');
            },
        }
    })
</script>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>06下拉菜单</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="../css/eui.css">
</head>
<body>
<div id="app">
    <el-dropdown>
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>

    <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    选择你的英雄<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="name" v-for="name in arr">{{name}}</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
    <h1>{{info}}</h1>
</div>
</body>
<!-- import Vue before Element -->
<script src="../js/vue.js"></script>
<!-- import JavaScript -->
<script src="../js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                arr:["刘备","关羽","张飞"],
                info:""
            }
        },
        methods:{
            handleCommand(command) {
                this.$message.success('你选择的是：' + command);
                this.info = command;
            }
        }
    })
</script>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>07导航菜单</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="../css/eui.css">
</head>
<body>
<div id="app">
    <!--default-active 设置默认选中
    mode设置横向还是纵向（默认纵向）
    @select添加选择事件
    -->
    <el-menu default-active="4" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">处理中心</el-menu-item>
        <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
                <template slot="title">选项4</template>
                <el-menu-item index="2-4-1">选项1</el-menu-item>
                <el-menu-item index="2-4-2">选项2</el-menu-item>
                <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
        </el-submenu>
        <el-menu-item index="3" disabled>消息中心</el-menu-item>
        <el-menu-item index="4"><a href="" target="_blank">订单管理</a></el-menu-item>
    </el-menu>


    <br>
    <br>
    <br>
    <el-menu
            default-active="1"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2" disabled>直播课</el-menu-item>
        <el-menu-item index="3">免费课</el-menu-item>
        <el-menu-item index="4">线上课</el-menu-item>
        <el-menu-item index="5">关于我们</el-menu-item>
    </el-menu>


</div>
</body>
<!-- import Vue before Element -->
<script src="../js/vue.js"></script>
<!-- import JavaScript -->
<script src="../js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {

            };
        },
        methods:{
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
        }
    })
</script>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>08表格</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
</head>
<body>
<div id="app">
    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
        </el-table>
    </template>
    <hr>
    <el-input
            placeholder="请输入名字"
            v-model="name"
            clearable style="width: 180px">
    </el-input>
    <el-input
            placeholder="请输入工资"
            v-model="salary"
            clearable style="width: 180px">
    </el-input>
    <el-input
            placeholder="请输入工作"
            v-model="job"
            clearable style="width: 180px">
    </el-input>
    <el-button type="primary" plain @click="f()">添加</el-button>
    <h1>员工列表</h1>
    <el-table
        :data="arr"
        style="width: 100%">
    <el-table-column
            prop="name"
            label="姓名"
            width="180">
    </el-table-column>
    <el-table-column
            prop="salary"
            label="工资"
            width="180">
    </el-table-column>
    <el-table-column
            prop="job"
            label="工作" width="180">
    </el-table-column>
        <el-table-column label="操作" width="180">>
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index)">删除</el-button>
            </template>
        </el-table-column>
</el-table>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                arr:[
                    {name:"唐三",salary:400,job:"程序员"},
                    {name:"小舞",salary:1000,job:"销售"},
                    {name:"千仞雪",salary:2000,job:"人事"},
                ],
                input: '',
                name: '',
                salary: '',
                job: ""
            };
        },
        methods:{
            f() {
                if (v.name == null || v.salary == null || v.job == null) {
                    v.$message.error('添加失败，信息填写错误！');
                }else{
                    this.arr.push({name: v.name, salary: v.salary, job: v.job});
                    v.$message.success('添加成功！');
                    v.name="";
                    v.salary="";
                    v.job=""
                }

            },
            handleDelete(index) {
                //删除arr数组中i下标位置的对象
                v.arr.splice(index, 1);
                v.$message.success('删除成功！');
            }
        }
    })
</script>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>09员工练习表EUI</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
</head>
<body>
<div id="app">
    <h1>添加员工</h1>
    <el-input
            placeholder="请输入名字"
            v-model="name"
            clearable style="width: 180px">
    </el-input>
    <el-input
            placeholder="请输入工资"
            v-model="salary"
            clearable style="width: 180px">
    </el-input>
    <el-input
            placeholder="请输入工作"
            v-model="job"
            clearable style="width: 180px">
    </el-input>
    <el-button type="primary" plain @click="f()">添加</el-button>
    <h1>员工列表</h1>
    <el-table
            :data="arr">
        <!--type="index"编号-->
        <el-table-column
                type="index"
                label="编号"
        >
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
        >
        </el-table-column>
        <el-table-column
                prop="salary"
                label="工资">
        </el-table-column>
        <el-table-column
                prop="job"
                label="工作">
        </el-table-column>
        <el-table-column label="操作">
            <!--scope代表每行对应的数据里面的index属性代表下标，里面的row代表每行对应的数组中的对象-->
            <template slot-scope="scope">

                <el-button
                        size="mini"
                        @click="">编辑
                </el-button>
                <el-popconfirm
                        icon="el-icon-delete"
                        icon-color="red"
                        title="这是一段内容确定删除吗？"
                        @confirm="handleDelete(scope.$index,scope.row)"
                >
                    <el-button slot="reference"
                               size="mini"
                               type="danger">删除</el-button>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                arr: [
                    {name: "唐三", salary: 400, job: "程序员"},
                    {name: "小舞", salary: 1000, job: "销售"},
                    {name: "千仞雪", salary: 2000, job: "人事"},
                ],
                input: '',
                name: '',
                salary: '',
                job: "",
            };
        },
        methods: {
            f() {
                if (v.name.trim() == "" || v.salary.trim() == "" || v.job.trim() == "") {
                    v.$message.error('添加失败，信息填写错误！');
                    return;
                }
                v.arr.push({name: v.name, salary: v.salary, job: v.job});
                v.$message.success('添加成功！');
                v.name = "";
                v.salary = "";
                v.job = ""
            },
            handleDelete(index, row) {
                console.log(index, row);
                //删除arr数组中i下标位置的对象
                v.arr.splice(index, 1);
                v.$message.success('删除成功！');
            }
        }
    })
</script>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>10布局</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        .c1{
            border: 1px solid red;
            border-radius: 5px;
        }
        .c2{
            border: 1px solid green;
            border-radius: 5px;
        }
        .c3{
            border: 1px solid blue;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <!--将一行划分为两等份-->
    <el-row>
        <el-col :span="12"><div class="c1">占12</div></el-col>
        <el-col :span="12"><div class="c1">占12</div></el-col>
    </el-row>
    <br>
    <!--gutter设置间距-->
    <el-row gutter="20">
        <el-col :span="8"><div class="c2">占8</div></el-col>
        <el-col :span="8"><div class="c2">占8</div></el-col>
        <el-col :span="8"><div class="c2">占8</div></el-col>
    </el-row><br>
    <el-row>
        <el-col :span="6"><div class="c3">占6</div></el-col>
        <el-col :span="6"><div class="c3">占6</div></el-col>
        <el-col :span="6"><div class="c3">占6</div></el-col>
        <el-col :span="6"><div class="c3">占6</div></el-col>
    </el-row>
<h1>练习：3:1</h1>
    <el-row gutter="10" style="width: 1200px;margin: 0 auto">
        <el-col :span="18"><div class="c1">占18</div></el-col>
        <el-col :span="6"><div class="c1">占6</div></el-col>
    </el-row>
    <h1>分栏偏移</h1>
    <el-row>
        <!--offset设置偏移数量-->
        <el-col :span="20" offset="2"><div class="c1">占20</div></el-col>
    </el-row>

</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                loading: true,
            };
        }
    })
</script>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>11布局容器</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        header{
            background-color: red;
            /*elementUI框架会让header高低为60 通过!important提升优先级*/
            text-align: center;
        }
        main{
            background-color: green;
            height: 200px;
            text-align: center;
        }
        footer{
            background-color: blue;
            height: 50px;
            text-align: center;
        }
        aside{
            background-color: burlywood;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>头体</h1>
    <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
    </el-container>
    <h1>头体脚</h1>
    <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
    </el-container>
    <h1>侧体</h1>
    <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
    </el-container>
    <h1>头侧体上下结构</h1>
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-main>Main</el-main>
        </el-container>
    </el-container>
    <hr>
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
                <el-main>Main</el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </el-container>
    <hr>
    <el-container>
        <el-aside width="100px">Aside</el-aside>
        <el-container>
            <el-header>Header</el-header>
            <el-container>
                <el-main>Main</el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {

            };
        }
    })
</script>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>12分割线</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
</head>
<body>
<div id="app">
    <template>
        <div>
            <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
            <el-divider></el-divider>
            <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
        </div>
        <br>
        <br>
        <br>
        <br>
        <div>
            <span>头上一片晴天，心中一个想念</span>
            <el-divider content-position="left">少年包青天</el-divider>
            <span>饿了别叫妈, 叫饿了么</span>
            <el-divider><i class="el-icon-loading"></i></el-divider>
            <span>为了无法计算的价值</span>
            <el-divider content-position="right">阿里云</el-divider>
        </div>
        <br>
        <br>
        <br>
        <br>
        <div>
            <span>雨纷纷</span>
            <el-divider direction="vertical"></el-divider>
            <span>旧故里</span>
            <el-divider direction="vertical"></el-divider>
            <span>草木深</span>
            <el-divider direction="vertical"></el-divider>
            <span>我听闻</span>
            <el-divider direction="vertical"></el-divider>
            <span>你始终</span>
            <el-divider direction="vertical"></el-divider>
            <span>一个人</span>
        </div>
    </template>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {

            };
        }
    })
</script>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>13卡片</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
</head>
<body>
<div id="app">
    <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
            <span>卡片名称</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
        </div>
    </el-card>
    <el-divider content-position="left"><span style="font-size: 30px">带图片的卡片</span></el-divider>
    <el-row>
        <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
            <el-card :body-style="{ padding: '20px' }" shadow="hover">
                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                <div style="padding: 14px;">
                    <span>好吃的汉堡</span>
                    <div class="bottom clearfix">
                        <time class="time">{{ new Date() }}</time>
                        <el-button type="text" class="button">操作按钮</el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {

            };
        }
    })
</script>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>14走马灯(轮播图)</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 150px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <div class="block" style="width: 800px">
            <span class="demonstration">默认 Hover 指示器触发</span>
            <el-carousel height="400px">
                <el-carousel-item v-for="item in arr" :key="item">
                    <img :src="item" alt="" style="width: 100%;height: 100%">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="block" style="width: 800px">
            <span class="demonstration">Click 指示器触发</span>
            <el-carousel trigger="click" height="400px">
                <el-carousel-item v-for="item in arr" :key="item">
                    <img :src="item" alt="" style="width: 100%;height: 100%">
                </el-carousel-item>
            </el-carousel>
        </div>
    </template>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                arr:["images/b1.jpg","images/b2.jpg","images/b3.jpg","images/image1.jpg"]
            };
        }
    })
</script>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>15设置页面</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <!--*********左侧导航栏菜单开始**********-->
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="[]">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>导航一</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="2-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="3-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="3-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="3-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </el-aside>
        <!--*********左侧导航栏菜单结束**********-->
        <el-container>
            <!--*********头部导航栏菜单开始**********-->
            <el-header  style="text-align: right; font-size: 12px">
                <el-dropdown @command="handleCommand">
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="name" v-for="name in arr2">{{name}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
                </el-dropdown>
            </el-header>
            <!--*********头部导航栏菜单结束**********-->
            <!--*********主体导航栏菜单开始**********-->
            <el-main>
                <el-input
                        placeholder="请输入名字"
                        v-model="name"
                        clearable style="width: 300px">
                </el-input>
                <el-input
                        placeholder="请输入工资"
                        v-model="salary"
                        clearable style="width: 300px">
                </el-input>
                <el-input
                        placeholder="请输入工作"
                        v-model="job"
                        clearable style="width: 300px">
                </el-input>
                <el-button type="primary" plain @click="add()">添加</el-button>
                <el-table
                        :data="arr"
                        height="250">
                    <el-table-column
                            prop="name"
                            label="姓名">
                    </el-table-column>
                    <el-table-column
                            prop="salary"
                            label="工资">
                    </el-table-column>
                    <el-table-column
                            prop="job"
                            label="工作">
                    </el-table-column>
                    <el-table-column label="操作" width="180">>
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <!--*********主体导航栏菜单结束**********-->
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                arr2: ["刘备", "关羽", "张飞"],
                arr:[
                    {name:"唐三",salary:400,job:"程序员"},
                    {name:"小舞",salary:1000,job:"销售"},
                    {name:"千仞雪",salary:2000,job:"人事"},
                ],
                input: '',
                name: '',
                salary: '',
                job: ""
            };
        },
        methods: {
            handleCommand(command) {
                this.$message.success('你选择的是：' + command);
                this.info = command;
            },
            add() {
                if (v.name == "" || v.salary == "" || v.job == "") {
                    v.$message.error('添加失败，信息填写错误！');
                }else{
                    v.arr.push({name: v.name, salary: v.salary, job: v.job});
                    v.$message.success('添加成功！');
                    v.name="";
                    v.salary="";
                    v.job=""
                }

            },
            handleDelete(index) {
                //删除arr数组中i下标位置的对象
                v.arr.splice(index, 1);
                v.$message.success('删除成功！');
            }
        }
    })
</script>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>16login</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        body {
            margin: 0;
            background-image: url("images/bg.jpg");
            background-size: cover;/*cover是专门用来设置全屏背景的*/
            text-align: center;
        }
        h1{
            font-size: 72px;
            color:rgb(0,150,215);
            margin-bottom: 0;
        }
        img{
            width: 100px;
        }
        h2{
            font-size: 32px;
            color: #0095d7;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>欢迎老板来到酷鲨商城</h1>
    <img src="images/shark.png" alt="">
    <h2>CoolSharkMall</h2>
    <el-card style="width: 600px;height: 300px;margin: 0 auto;background-color: rgba(255,255,255,0.3)">
        <el-form style="width: 400px;margin: 30px auto" label-width="60px">
            <el-form-item label="用户名">
                <el-input type="text" v-model="user.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">登录</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                user: {
                    username: "user1",
                    password: "123"
                }
            };
        }
    })
</script>
</html>