HTML笔记 | 次元客栈

教程

前端教程

发布日期: 2021-01-19

更新日期: 2024-04-25

文章字数: 21.2k

阅读时长: 99 分

HTML5

前端学习路线图：https://roadmap.sh/frontend

HTML的基本概念

HTML的概念

HTML: 超文本标记语言

作用:

需要将java在后台根据用户请求处理的请求结果在浏览器中显示给用户。
在浏览器中数据需要使用友好的格式展现给用户。
HTML是告诉浏览器接收到的数据用什么样的数据组织形式展示。

使用:

HTML的标准文档规范
HTML的标签

互联网的三大基石

URL: 统一资源定位符(唯一的定位一个网络资源)

HTTP: 超文本传输协议(规范浏览器和服务器之间的数据交互形式)

HTML: 超文本标记语言(有效组织数据在浏览器端的显示)

HTML的文档声明:

文件名.html 或者 文件名.htm

HTML的标准文档结构:

<html>
    <head></head>
    <body></body>
</html>

html的标准文档结构学习:

顶层标签: html

头标签: head

head作用：主要是配置浏览器显示数据的配置信息，例如字符编码等一般是给浏览器使用

主体标签: body

body作用：给用户进行数据展示

注意：

html的标签语法为:

<标签名></标签名> (双标签)

<标签名 /> (单标签)

头标签

<html>
    <head>
        <meta charset="UTF-8"/><!-- 网页编码格式 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 告诉IE浏览器以最高级标准模式渲染 -->
        
        <title>标题</title> <!-- 网页标题 -->

                <!-- 网站信息(非重要) -->
        <meta name="description" content="本网站是关于html学习的"/> <!-- 网页描述 -->
        <meta name="author" content="wqa"/> <!-- 网页作者 -->
        <meta http-equiv="content-type" content="5;url=http://www.baidu.com"/> <!-- 网页自动跳转 -->
    </head>
    <body>
        
    </body>
</html>

主体标签

标题标签

<h1 align="center"> 标题标签 </h1>

功能：h标签有6个级别，将数据加粗，并且显示依次减弱，标题标签自动换行，是块元素。
align是标签属性，可以对标签功能进一步补充。

水平线标签

<hr width="40%" size="20px" color="red"/>

功能：会在页面中显示一条水平线，默认居中，是块元素。

width可以设置为绝对长度600px，也可以设置成相对浏览器长度的40%。

size可以设置水平线的高度。

color可以设置水平线的颜色。

段落标签

<p> 段落 </p>

功能：将一段数据作为整体显示，主要是进行css和js操作时比较方便，是块元素。

特点：段间距比较大。

换行符&空格符

<br />
&nbsp

br功能：将数据进行换行。

&nbsp(non-breaking space)功能：输出空格符。

权重标签&斜体标签&下划线标签

<b>加粗内容</b>
<i>斜体内容</i>
<u>下划线内容</u>
<del>删除线内容</del>

注意：以上标签不会自动换行，并且可以嵌套使用。

列表标签

无序列表：

<h3> 中国知名城市 </h3>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>商丘</li>
</ul>

功能：在li里书写内容，一个li标签代表列表中的一行数据。

特点：默认数据前有一个黑圆圈符号。

有序列表：

<ol type="I">
    <li>打游戏</li>
    <li>打球</li>
    <li>看电影</li>
</ol>

li功能：在li里书写内容，一个li标签代表列表中的一行数据。

特点：会自动的给列表进行顺序编码，格式从小到大并且是连续的。

type可以改变顺序编码的值，可以是1 a A I，默认使用阿拉伯数字进行顺序编码。

自定义列表

<dl>
    <dt>IT课程:</dt>
    <dd>java课程</dd>
    <dd>python课程</dd>
    <dd>大数据课程</dd>
</dl>

dt功能：数据的标题。

dd功能：数据的具体内容。

图片标签

本地资源：

<img src="img/1.jpg" width="200px" height="200px" title="这是一张图片" alt="图片加载失败后的提示语"/>

src：图片路径。

路径：一般本地图片资源使用相对路径即可。

相对路径：从当前文件出发查找另一个文件所经过的路径。

绝对路径：从根盘符出发所查找文件的路径。

title：图片标题，鼠标放在上面的时候会提示。

alt：图片加载失败后的提示语。

特点：width设置图片的宽，height设置图片的高，单独设置某个参数来使图片达到不失真缩放。单位可以是px也可以是百分比。img是行内块元素。

网络资源：

<img src="https://url***" />

src：url路径

超链接标签

<a href="url" target="_blank">超链接</a>

herf：要跳转的资源路径

target：指名要跳转的网页资源显示位置，_self在当前页面显示，_blank在新页面显示

注意：超链接标签一定要写内容，不然无法显示

url和图片的src使用方式一样

锚点学习：

<a href="#first">第一章</a>
<a href="#second">第二章</a>
<a href="#third">第三章</a>
<a href="#fourth">第四章</a>

<a name="first"></a>
<a name="second"></a>
<a name="third"></a>
<a name="fourth"></a>

<a href="#">回到顶部</a>使页面刷新

作用：在一张网页中进行跳转

使用：先使用超链接在指定的网页位置添加锚点，然后再使用a标签指向

表格标签

<table broder="1px" cellpadding="10px" cellspacing="0px">
    <tr height="50px">
        <th width="100px">科目</th>
        <th width="100px">分数</th>
        <th width="100px">级别</th>
        <th width="100px">说明</th>
    </tr>
    <tr height="50px">
    	<td>java</td>
    	<td>100</td>
    	<td>8</td>
    	<td>面向对象的语言</td>
    </tr>
    <tr height="50px">
        <td>C语言</td>
        <td>100</td>
        <td>8</td>
        <td>面向过程的语言</td>
    </tr>
    <tr height="50px">
        <td colspan="2"></td>
        
        <td></td>
        <td></td>
    </tr>
</table>

tr作用：声明一行

th作用：声明一个表头单元格

td作用：声明一个单元格

表格特点：默认根据数据进行表格的大小展示

属性：
broder：给表格添加边框
width：设置表格的宽度
height：设置表格的高度
cellpadding：设置内容边框的距离
cellspacing：设置边框的大小
colspan：行合并单元格，合并以后要删除多余单元格
rowspan：列合并单元格，合并以后要删除多余单元格

科目	分数	级别	说明
java	100	8	面向对象的语言
C语言	100	8	面向过程的语言

内嵌标签

<ifname src="" width="" height=""></ifname>

a标签可以和ifname一起使用达到动态显示效果
<a herf="http://www.baidu.com" target="_if">百度</a>
<a herf="http://www.taobao.com" target="_tt">淘宝</a>
<ifname src="" width="48%" height="400px" name="_if"></ifname>
<ifname src="" width="48%" height="400px" name="_tt"></ifname>
可以达到双搜效果

作用：在当前页面加载另一个网页的资源，达到不同网页之间不相互干扰，并能在同一个页面中展示给用户的目的

src：要显示的网页资源路径

width：设置显示区域的宽度

height：设置显示区域的高度

框架标签

html5不支持frame标签

index：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>东软后院</title>
</head>
<frameset rows="10%,*,10%">
    <frame src="top.html"/>
    <frameset cols="10%,*">
        <frame src="left.html"/>
        <frame src="right.html"/>
    </frameset >
    <frame src="bottom.html"/>
</html>

left：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <li><a href="http://www.baidu.com" target="_right">百度一下</a></li>
    <li><a href="http://www.taobao.com" target="_right">淘宝网</a></li>
    <li><a href="http://www.jd.com" target="_right">京东网</a></li>
</body>
</html>

right：

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

buttom：

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

表单、表单域标签

<form action="#" method="get">
    用户名：<input type="text" name="uname"/><br />
    密码：<input type="text" name="upwd"/><br />
    性别：男<input type="radio" name="sex" value="1"/> 女<input type="radio" name="sex" value="0"/><br />
    爱好：<br />
    吃饭<input type="checkbox" name="fav" value="1" /><br />
    	睡觉<input type="checkbox" name="fav" value="2"/><br />
    	打豆豆<input type="checkbox" name="fav" value="3"/><br />
    籍贯：<br />
    <select name="address">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广州</option>
    </select>
    文本域：<br />
    <textarea name="intro" rows="10" cols="30"></textarea> <br />
    普通按钮： <br />
    <input type="button" name="" id="" value="普通按钮" />
    隐藏标签：
    <input type="hidden" name="hidden" id="" value="哈哈" />
    <input type="submit" value="登录"/>
</form>

from作用：收集表单域标签的数据，按照method的方式提交用户数据给指定服务器

action：收集的数据提交地址也就是URL
method：收集的数据的提交方式
get：适合小量数据，表单数据以问号隔开拼接在url后面，不同的键值对以&隔开，不安全
post：适合大量数据，安全，隐式提交

注意：表单数据的提交，要提交的表单项必须有name值，否则不提交，提交的表单项数据为键值对，键为name的值，值为用户数据

input：

文本框：
type
test：收集少量的文本数据，用户可见
password：收集用户密码数据
value：默认值

单选框：
type：
radio
name：当name属性值相同时为单选
value：要提交的数据
checked：使用此属性的单选默认是选择状态

多选框：
type:
checkobox
name：一个多选组需要使用相同的name属性值
value：要提交的数据
checked：属于此属性的多选框默认是选择状态

下拉框：
select：
name：数据提交的键名，必须声明
子标签option：一个option标签表示一个下拉选项
value：要提交的数据

文本域：
textarea：声明一个可以大量书写文本的区域
name：数据提交的键名，js和css也会使用
cols：声明文本域的列数

普通按钮：
input：
type：button

隐藏标签：
input：
type：hidden

注意：表单数据提交的是表单标签的value值

HTML样例

模拟百度

<body>
    <h3>模拟百度</h3>
        <hr />
        <form action="https://www.baidu.com/s" method="get">
        <input type="text" name="wd" id=""value="" />
            <input type="submit" value="百度一下" />
        </form>
</body>

https://www.baidu.com/s ? tn=68018901_2_oem_dg & ie=utf-8 & word=java

get请求的典型特征是：**服务器地址 **+ ? + 键值对的值

我们可以查看提交后的键值对来获得提交信息

例如在百度搜索中搜索java，我们可以发现服务器url为：https://www.baidu.com/s

word=java，说明搜索框提交的键值为java，键为word

模拟注册页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>注册页面</h3>
    <hr />
    <form action="">
        <table border="1px" cellspacing="0" cellpadding="5px">
            <tr height="35px">
                <td width="100px">
                    用户名:
                </td>
                <td width="200px">
                    <input type="text" name="uname" id="uname" value="">
                </td>
            </tr>
            <tr height="35px">
                <td>
                    密码:
                </td>
                <td>
                    <input type="password" name="pwd" id="pwd" value="">
                </td>
            </tr >
            <tr height="35px">
                <td>
                    邮箱:
                </td>
                <td>
                    <input type="text" name="mail" id="mail" value="">
                </td>
            </tr>
            <tr height="35px">
                <td>
                    手机号:
                </td>
                <td>
                    <input type="text" name="phone" id="phone" value="">
                </td>
            </tr>
            <tr height="35px">
                <td>
                    性别:
                </td>
                <td>
                    男<input type="radio" name="sex" id="sex" value="1" checked="checked">
                    女<input type="radio" name="sex" id="sex" value="0">
                </td>
            </tr>
            <tr height="35px">
                <td>
                    爱好:
                </td>
                <td>
                    <input type="checkbox" name="fav" id="fav" value="1">唱歌
                    <input type="checkbox" name="fav" id="fav" value="2">打球
                    <input type="checkbox" name="fav" id="fav" value="3">旅游
                </td>
            </tr height="35px">
            <tr>
                <td>
                    籍贯:
                </td>
                <td>
                    <select name="" id="">
                        <option value="">商丘</option>
                        <option value="">菏泽</option>
                        <option value="">信阳</option>
                        <option value="">北京</option>
                    </select>
                </td>
            </tr>
            <tr height="35px">
                <td>
                    个人介绍:
                </td>
                <td>
                    <textarea name="intro" id="" cols="20" rows="8"></textarea>
                </td>
            </tr >
            <tr height="35px">
                <td colspan="2">
                    <input type="checkbox" name="agree" id="agree" value="1"> 是否同意本公司的协议
                </td>
            </tr>
            <tr height="35px">
                <td colspan="2" align="center">
                    <input type="submit" name="注册">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

file:///C:/Users/11014/Desktop/working/test.html?
uname=wqa
&pwd=122
&mail=111
&phone=213
&sex=1
&fav=1
&intro=wdadw12
&agree=1

&%E6%B3%A8%E5%86%8C=%E6%8F%90%E4%BA%A4

HTML快捷键

例子：

table>tr*5>td*6
form>input*6

CSS

css简介

为什么需要css

HTML作用：负责数据格式化的展示

如果使用HTML来书写数据的样式，则发现样式书写太过麻烦，不易于维护，不能重复使用
HTML可以有效组织数据的展示，但是不同类型数据在浏览器中的分布没有办法实现

为了解决上面的问题，诞生了css语言，专门用来给网页进行样式开发

什么是css

css的概念：
层叠样式表
作用：
给网页进行简单的样式开发
给网页进行布局
特点：
语言特别简单
开发的样式可以进行重复使用

使用css

css的声明
css的选择器
css的常用样式
css的盒子模型
css的定位
css的布局

css的使用过程：

声明css代码域
使用选择器选择要添加样式的标签
1. 使用*选择器来给整个页面添加基础样式
2. 使用类选择器给不同的标签添加基础样式
3. 使用标签选择器给某类标签添加基础样式
4. 使用id、属性选择器、style属性声明方式给某个标签添加个性化样式
书写样式单
1. 边框设置
2. 字体设置
3. 字体颜色设置
4. 背景颜色设置
5. 背景图片设置
6. 高和宽设置
7. 浮动设置
8. 行高设置

css的声明

HTML内声明

<head>
	<style>
        hr{
            width: 50%;
            height: 20px;
            color: aquamarine;
            background-color: aquamarine;
        }
	</style>
</head>

 <hr style="background-color: aquamarine;">

写在head里的style标签声明是公共样式，作用于所有声明的标签；
单独写在标签里的style只针对当前标签

外部声明

<head>
     <link rel="stylesheet" href="css/my.css">
</head>

在外部添加一个my.css

hr{
     width: 50%;
     height: 20px;
     color: aquamarine;
     background-color: aquamarine;
}

外部声明方式解决了不同网页之间样式重复使用的问题，一次声明，随处使用

注意：css不同声明之间是有先后执行顺序的，后面执行的css声明会根据优先级对前面的有所覆盖。执行优先级是：link=style>标签内style，同时遵循就进原则

css选择器

标签选择器

table{
    width:300px;
    height:200px;
    border: solid 1px;
    background-color:red;
}

格式：标签名 { 样式名1：样式值1；…… }

作用：会将当前网页内的所有标签增加相同的样式

id选择器

<table id="t1"></table>

#t1{
    background-color:gary;
}

格式：#标签的id属性值{ 样式名1：样式值1；…… }

作用：给某个指定的标签添加指定的样式

类选择器

<table class="common" id="t1"></table>

.common{
    color:red;
}

格式：.类选择器名{ 样式名1：样式值1；…… }

作用：给不同的标签添加相同的样式

全部选择器

*{
    color: skyblue;
}

格式：*{ 样式名1：样式值1；…… }

作用：选择所有的HTML标签，并添加样式

样式显示优先级：标签>类>全部

组合选择器

.table{
    width:300px;
    height:200px;
    border: solid 1px;
    background-color:red;
}
.b{
    width:300px;
    height:200px;
    border: solid 1px;
    background-color:red;
}
以上代码可以写成
.table, b{
    width:300px;
    height:200px;
    border: solid 1px;
    background-color:red;
}

格式：*选择器1，选择器2{ 样式名1：样式值1；…… }

作用：解决不同的选择器之间重复样式的问题

子标签选择器

<ul>
    <li><a href="">哈哈</a></li>
    <li><a href="">呵呵</a></li>
    <li><a href="">嘿嘿</a></li>
</ul>
<a href="">嘻嘻</a>
    <p id="p1">
        <a href=""></a>
    </p>

ul li a{
    color:black;
}
#p1 a{
    color:yellow;
}

格式：选择器1 子标签选择{ 样式名1：样式值1；…… }

作用：选择标签内的标签，减少代码冗余

属性选择器

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

input[type=text]{
    backgroundcolor:red;
}

格式：标签名[属性名=属性值]{ 样式名1：样式值1；…… }

作用：选择某标签指定具备某属性并且属性值为某属性值的标签

书写样式单

边框设置

border:solid 1px;

字体设置

font-size:10px; 设置字体大小
font-family:"黑体"; 设置字体的样式
font-weight:blod; 设置字体加粗

设置字体颜色

color: black;

背景颜色设置

bakcground-img: url; 图片的相对路径
background-repeate: no-repeate; 设置图片不重复
bcakground-size: cover; 图片平铺整个页面

浮动设置

float: left/right;

行高设置

line-height: 10;

css的样式使用

一个标签和导航栏的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的样式使用</title>
    <!-- 声明css代码域 -->
    <style type="text/css">
        /* 添加网页背景图 */
        body{
            background-image: url("img/a1.jpg");/* 添加背景图片 */
            background-repeat: no-repeat;/* 设置图片不重复 */
            background-size: cover;/* 设置图片平铺 */
            background-position: center;/* 设置图片居中 */
            
        }
        /* 使用标签选择器 */
        table{
            /* border: solid 1px; */
            border-radius: 10px;

        }
        /* 设置table的行高 */
        tr{
            height: 40px;
        }
        /* 设置td */
        td{
            width: 100px; /* 设置宽 */
            border: solid 1px red; /* 添加边框及其颜色和大小 */
            border-radius: 10px;/* 设置表框的角度 */
            background-color: orange;/* 设置背景颜色 */
            text-align: center;/* 设置文本位置 */
            color: purple;/* 设置文本颜色 */
            font-weight: bold;/* 设置文本加粗 */
            letter-spacing: 10px;/* 设置字体间距 */
        }

        ul{
            background-color: gray;
            height: 50px;
        }
        li{
            list-style-type: none;/* 去除li的标识符 */
            display: inline-block;/* 设置左悬浮 */
            /* float: left; */ /* 设置左悬浮 */
        }
        li a{
            color: black;
            text-decoration: none;/* 设置超链接去除下划线 */
            font-weight: bold;
            font-size: 20px;
            margin-left: 20px;
            position: relative;
            top: 10px;
        }
    </style>
</head>
<body>
    <h3>css的样式使用</h3>
    <hr>
    <table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>爱好</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>唱歌</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>跳舞</td>
        </tr>
    </table>
        <hr>

        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">百战</a></li>
            <li><a href="">java风情</a></li>
            <li><a href="">客服</a></li>
        </ul>

</body>
</html>

一个照片墙的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照片墙案例</title>
    <!-- 声明css代码域 -->
    <style type="text/css">
        /* 设置body样式 */
    body{
        text-align: center;
        background-color: gray;
    }
    img{
        width: 12%; /* 设置图片高度 */
        /* border: solid 1px; */
        padding: 10px;/* 设置内边距 */
        background-color: white;/* 设置背景颜色 */
        transform: rotate(-10deg);/* 设置倾斜角度 */
        margin: 20px;/* 设置外边距 */
    }
    /* 使用伪类给标签添加样式 */
    img:hover{
        transform: rotate(0deg) scale(1.5);/* 设置旋转角度和缩放比例 */
        z-index: 1;/* 设置显示优先级别 */
        transition: 1.5s;/* 设置显示时间 */
    }
    </style>
</head>
<body>
    <img src="img/a1.jpg" alt="">
    <img src="img/a2.jpg" alt="">
    <img src="img/a3.jpg" alt="">
    <img src="img/a4.jpg" alt=""><br>
    <img src="img/a5.jpg" alt="">
    <img src="img/a6.jpg" alt="">
    <img src="img/a7.jpg" alt="">
    <img src="img/a8.jpg" alt="">
</body>
</html>

div标签

    <style type="text/css">
        img{
            width: 49.53%;
        }
        #showdiv{
            border: solid 3px;
            width: 40%;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="showiv">
        <img src="img/a1.jpg" alt="">
        <img src="img/a1.jpg" alt="">
    </div>
    
</body>

div标签作用：块级标签，主要是用来进行网页布局的，会将其中的子元素内容作为一个独立的整体存在。

特点：默认宽度是页面的宽度，可以设置；高度默认是没有的，可以设置（可以顶开）；如果子元素设置了百分比的高或宽，占据的是div的百分比，不是页面的。

盒子模型

    <style type="text/css">
        img{
            width: 49.53%;
        }
        #showdiv{
            border: solid 3px;
            width: 40%;
            height: 400px;
            margin-bottom: 10px;
            margin-left: 100px;
        }
        #div01{
            border: dashed 3px orange;
            width: 40%;
            height: 200px;
            margin-left: 100px;
        }
    </style>
<body>
    <div id="showdiv">
        <img src="img/a1.jpg" alt="">
        <img src="img/a1.jpg" alt="">
    </div>
    <div id="div01">

    </div>
</body>

外边距：margin
作用：用来设置元素和元素之间的间隔
居中设置：margin：0px auto;上下间隔0px，水平居中
注意：可以根据需求单独设置上下左右的外边距

边框：border
作用：用来设置元素边框的大小
注意：可以单独设置上下左右的大小

内边距：padding
作用：设置内容和边框之间的距离
注意：内边距不会改变内容区域的大小，可以单独设置上下左右的内边距

内容区域：
作用：改变内容区域的大小
注意：设置div的宽和高即会改变内容区域的大小

盒子模型的简单使用

基于上述内容对盒子模型的使用

  <style type="text/css">
        /* 设置div的基础样式 */
        div{
            width: 300px;
            height: 300px;
        }
        /* 设置header和footer的样式 */
        #header,#footer{
            width: 650px;
            margin-top: 20px;
            margin: auto;
        }
        #div01{
            border: solid 1px orange;
            float: left;
            margin-right: 20px;
        }
        #div02{
            border: solid 1px blueviolet;
            float: left;
        }
        #div03{
            border: solid 1px springgreen;
            float: left;
            margin-right: 20px;
        }
        #div04{
            border: solid 1px coral;
            float: left;
        }
    </style>
<body>
    <div id="header">
        <div id="div01">
            我是div01
          </div>
          <div id="div02">
            我是div02
          </div>
    </div>

    <div id="footer">
        <div id="div03">
            我是div03
        </div>
        <div id="div04">
            我是div04
        </div>
  </div>

css的定位学习

	 <style type="text/css">
        /* 给div01添加样式 */
        #div01{
            border: solid 2px orange;
            height: 200px;
            width: 800px;
            margin-bottom: 10px;
            margin-top: 50px;
            position: relative;/* 给div01添加相对定位成为其子元素绝对定位的参照元素 */
        }
        /* 给showdiv添加样式 */
        #showdiv{
            border: solid 3px;
            height: 50px;
            width: 50px;
            position: absolute;
            top: 10px;
        }
        /* 给div02添加样式 */
        #div02{
            border: dashed 2px coral;
            height: 200px;
            width: 800px;
            margin-bottom: 10px;
            position: relative;/* 使用相对定位 */
            left: 50px;
            top: 100px;
            background-color: coral;
            z-index: 3;
        }
        /* 给div03添加样式 */
        #div03{
            border: solid 2px blueviolet;
            height: 200px;
            width: 800px;
            background-color: blueviolet;
            position: relative;
            z-index: 4;
        }
        /* 给div04添加样式 */
        #div04{
            border: solid 3px blue;
            height: 50px;
            width: 50px;
            position: fixed;
            top: 270px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div id="div01">
        <div id="showdiv"></div>
    </div>
    <div id="div02">我是div02</div>
    <div id="div03"></div>
    <div id="div04"></div>
    <br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

position：

相对定位：relative

作用：相对元素原有位置移动指定的距离(相对自己原有位置)

可以是top，left，right，bottom来进行设置

注意：其他元素位置是不动的

绝对定位：absolute

作用：可以使元素参照界面或相对父元素来进行移动

注意：使用相对定位属性使父级元素成为参照元素，默认以浏览器界面为基准

固定定位：fixed

作用：将元素固定在页面的指定位置，不会随着滚动条的移动而改变位置

注意：以上定位都可以使用top，left，right，bottom来进行移动

z-index：此属性是用来声明元素的显示级别的

模拟百度首页

模拟百度首页：

使用css+div进行页面的布局

css代码一般使用外联的方式进行开发
使用html进行每一个块中的内容填充

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度首页模拟</title>
    <!-- 引入外部声明的css文件 -->
    <link rel="stylesheet" href="baidu01.css">
    <!-- 引入网页标题图片 -->
    <link rel="shortcut icon" href="img/favicon.ico">
</head>
<body>
    <!-- 声明头部分 -->
    <div id="header">
        <!-- 声明导航栏 -->
        <ul id="header_nav">
            <li><a href="">新闻</a></li>
            <li><a href="">hao123</a></li>
            <li><a href="">地图</a></li>
            <li><a href="">视频</a></li>
            <li><a href="">贴吧</a></li>
            <li><a href="">学术</a></li>
            <li><a href="">登录</a></li>
            <li><a href="">设置</a></li>
        </ul>
    </div>
    <!-- 声明主体 -->
    <div id="main">
        <!-- 引入百度logo -->
        <img id="img_logo" src="img/bd_logo.png" alt="" width="270px" height="129px"><br>
        <!-- 声明搜索框和按钮 -->
        <form action="https://www.baidu.com/s">
            <input type="text" name="wd" id="" value="">
            <input type="submit" value="百度一下">
        </form>
    </div>
    <!-- 声明底部 -->
    <div id="footer">

    </div>    
</body>
</html>

/* 设置页面的基础样式 */
    *{
        margin: 0px;
        padding: 0px;
    }
/* 设置header头部分的大小 */
    #header{
        width: 100%;
        height: 45px;
        /* background-color: orange; */
    }
/* 设置导航栏样式 */
    #header_nav{
        position: absolute;
        right: 92px;
        top: 26px;
    }
    #header_nav li{
        float: left;
        list-style-type:none;
        margin-left: 24px;
    }
    #header_nav li a{
        color: #333;
        font-size: 13px;
        font-weight: 700;
        line-height: 24px;
    }
/* 设置main主体部分的大小 */
    #main{
        width: 100%;
        height: 384px;
        /* background-color: blueviolet; */
        text-align: center;
    }
    #img_logo{
        margin-top: 30px;
        margin-bottom: 21px;
    }
    /* 设置搜索框样式 */
    input[type=text]{
        height: 31px;
        width: 539px;
        border: solid 1px #4992FF;
        background-image: url(./img/inp.png);
        background-repeat: no-repeat;
        background-position-x: 500px;
        background-position-y:-2px ;
    }
    input[type=submit]{
        width: 100px;
        height: 34px;
        font-size: 15px;
        color: #fff;
        background-color: #2d78f4;
        border: solid #2d78f4;
        letter-spacing: 1px;
        position: relative;
        right: 5px;top: 1px; 
    }
/* 设置footer底部部分的大小 */
    #footer{
        width: 100%;
        height: 206px;
        /* background-color: #4791FF; */
    }
/* 使用伪类给标签添加样式 */
#header_nav li a:hover{
    color: blue;
}

JavaScript

js的声明方式

在head标签中使用script标签进行js代码域的声明

作用：声明js代码域

特点：js的代码只会作用于当前网页
在head标签中使用script标签引入外部声明好的js文件

作用：引入外部声明好的js文件

特点：实现js的重复使用，避免代码的冗余

注意：因为js在HTML文档中是一门单独的语言，可以声明在文档中的任意位置，一般情况下声明在head中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的声明和引入</title>
    <!-- 声明js代码域 -->
    <script type="text/javascript">
        alert("这是我的第一个js")
    </script>
    <!-- 引入外部声明好的js文件 -->
    <script src="my.js" charset="utf-8"></script>
</head>
<body>
    
</body>
</html>

js的变量

变量声明

<script type="text/javascript">
    // js变量学习
    var a=123;
    var a1=3.1415;
    var a2="js";
    var a3='k';
    var a4=true;
    var a5=new Date();
    var a="js学习"
    alert(a);
</script>

注意：

js中的所有变量声明只有var关键字
js的变量名是严格区分大小写的
js的字符串可以使用双引号或单引号，没有字符和字符串的区分
js中可以声明同名变量，不会报错，后面的会将前面的声明覆盖

数据类型

使用关键字typeof判断数据类型

数据类型：

var b=456;
var b1=1.23;
alert(typeof b1);

number：数字类型

var b="今天天气真好，适合学习";
var b1='l';
alert(typeof b1);

string：字符串类型

var b=true;
var b1=false;
alert(typeof b1);

boolean：布尔类型

var b=new Date();
alert(typeof b);

object：项目类型

var b
alert(b);
alert(c);

null：空对象值

var b;
alert(typeof b);

undefined：未定义类型

注意：声明变量时要尽可能的赋值，否则可能会产生错误。

js的运算符

算术运算

<script>
var a="123a";
var b=2;
var c=true;
var d="1"
alert(c+d);
alert(a-d);
</script>

算术运算符：+，-，*，/，%

number类型和number类型的

number类型和boolean类型(true–1，false–0)

number类型和string类型( *，/，%，- )

string类型数字和boolean类型( *，/，%，- )

注意：

在字符串中，+符合代表的是字符串的连接符，不会参与运算，也就是出现了string变量，+就变成了连接符
在算术运算中如果两边的数据类型不是number的话，会使用Number()强转换后再进行运算

逻辑运算

<script>
var a=true;
var b=true;
alert(a&b);
if(a&b)
    {
        alert("haha");
    }
alert(!a);
</script>

逻辑运算符：!，&，&&，|，||(与java中一致)

& |返回的是0或1，&& ||返回的是true或false，不会影响正常逻辑判断

关系运算

关系运算符：!=，>=，<=，>，<

返回值都为true或false

自增运算

自增运算符：++，--，+=，-=

++a和a++的区别是先赋值与后赋值。

js的==和===判断

<script type="text/javascript">
    // 声明变量
    var a=1;
    var a1="1";
    var a2=true;
    var a3="true";
    var a4="a";
    var a5="a";
    var str=new String("123");
    var str2=new String("123");
    alert(a==a1);//true
    alert(a==a2);//true
    alert(a==a3);//false
    alert(a1==a2);//true
    alert(a1==a3);//false
    alert(a2==a3);//false
    alert(a4==a5);//true
    alert(123==str);//true
    alert(str2==str);//false
</script>

等值运算符：==

判断逻辑：先判断类型，类型一致，则直接比较，类型不一致，则先使用number()进行强转再比较内容，内容相等为true

注意：

objectt和object比的是内存地址，内存地址相同才为true

null == undefined返回true

null === undefined返回false

等同运算符：===

判断逻辑：先判断类型，类型一致则比较内容，内容一致才为true

js的逻辑结构

判断结构

if结构

<script type="text/javascript">
    var a=123;
    var b=45;
    if(a>10){
        alert(a+b);
    }
</script>

单分支结构：
if(判断条件){执行体}

双分支结构：
if(判断条件){执行体}else{执行体}

多分支结构：
if(判断条件){执行体}else if{执行体}

switch结构

<script type="text/javascript">
        var a=1;
        switch (a){
            case "1":
                alert("第一项选择");
                break;
            case "2":
                alert("第二项选择");
                break;
            default:
                alert("没有对应选择");
                break;
        }
</script>

注意：判断的变量可以是number类型也可以是switch类型，switch默认的判断运算为等同===

循环结构

for循环

    <script type="text/javascript">
        for(var i=0;i<3;i++){
            alert("好热:"+i);
        }
    </script>

//js九九乘法表
    <script type="text/javascript">
        for(var i=0;i<=9;i++){
            for(var j=1;j<=i;j++){
                document.write(i+"*"+j+"="+i*j+"&nbsp&nbsp&nbsp&nbsp");
            }
            document.write("<br />");
        }
    </script>

for(变量；条件；迭代条件){循环体}

while循环

while(循环条件){循环体}

do while循环

do{循环体}while{循环条件}

js数组

js数组的声明

<script type="text/javascript">
    var arr1=new Array();//第一种声明方式
    arr[0]="abc"
    alert(arr);
    var arr2=new Array(5);//第二种声明方式
    alert(arr2.length);
    var arr3=[1,2,3,4,5];//第三种声明方式
</script>

var arr=new Array(); 声明一个空数组对象

var arr=new Array(); 声明一个指定长度的数组

var arr=[元素]; 声明数组（最常用）

注意：js的数组声明不用指定长度，js的数组长度是不固定的，会随着元素的数量改变而改变

数组的赋值和取值

<script type="text/javascript">
    var arr=[];
    arr[0]=2;
    arr[1]="abc";
    arr[2]=true;
    arr[3]=new Date();
    arr[10]="哈哈"
    alert(arr);
    alert(arr[10]);
</script>

格式：数组名[角标]=值，角标可以是任意的正整数或者是0

注意：js数组可以存储任意类型的数据

数组的取出：数组名[角标]，返回当前角标对应存储的值

注意：如果角标不存在，返回undefine

数组的length属性

<script type="text/javascript">
    var arr=[];
    alert(arr.length);
    arr.length=100;
    alert(arr.length);
    arr[10]="abc";
    alert(arr.length);
</script>

作用：

数组名.length 返回当前数组的长度
数组名.length=新的值动态改变数组长度

注意：如果length大于原有长度，则使用逗号填充，length小于原有长度则删除后面的数据

数组的遍历

<script type="text/javascript">
    var arr=[1,"bnj",3,"a",4];
    alert(arr);
    //普通for循环：
    for(var i=0;i<arr.length;i++)
    {
        alert(arr[i]);
    }
    //for-in：
    for(var i in arr)
    {
        alert(i);//获取角标
    }
</script>

一个计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style type="text/css">
        /* 设置div样式 */
        #showdiv{
            border: solid 1px;
            border-radius: 10px;/* 设置边框角度 */
            width: 320px;
            height: 400px;
            text-align: center;
            margin: auto;
            margin-top: 50px;
            background-color: floralwhite;
        }
        /* 设置输入样式 */
        input[type=text]{
            margin-top: 10px;
            width: 290px;
            height: 40px;
            font-size: 20px;
        }
        /* 设置按钮样式 */
        input[type=button]{
            width: 60px;
            height: 60px;
            margin-top: 20px;
            margin-left: 5px;
            margin-right: 5px;
            font-size: 30px;
            font-weight: bold;
            font-family: "萝莉体第二版";
        }
    </style>
    <!-- 声明js代码域 -->
    <script type="text/javascript">
        // 声明函数
        function text(btn){
            //获取button按钮对象value里的值
            var num=btn.value;
            // 将按钮的值赋值给input输入框
            
            switch(num){
                case "=" :
                document.getElementById("inp").value=eval(document.getElementById("inp").value);
                break;
                case "c" :
                document.getElementById("inp").value="";
                break;
                default:
                document.getElementById("inp").value=document.getElementById("inp").value+num;
                break;
            }
        }
    </script>    
</head>
<body>
    <div id="showdiv">
        <input type="text" id="inp" value=""><br>
        <input type="button" id="" value="1" onclick="text(this)">    <!-- onclink使button单击时执行js代码 -->
        <input type="button" id="" value="2" onclick="text(this)">
        <input type="button" id="" value="3" onclick="text(this)">
        <input type="button" id="" value="4" onclick="text(this)"><br>
        <input type="button" id="" value="5" onclick="text(this)">
        <input type="button" id="" value="6" onclick="text(this)">
        <input type="button" id="" value="7" onclick="text(this)">
        <input type="button" id="" value="8" onclick="text(this)"><br>
        <input type="button" id="" value="9" onclick="text(this)">
        <input type="button" id="" value="+" onclick="text(this)">
        <input type="button" id="" value="-" onclick="text(this)">
        <input type="button" id="" value="*" onclick="text(this)"><br>
        <input type="button" id="" value="0" onclick="text(this)">
        <input type="button" id="" value="/" onclick="text(this)">
        <input type="button" id="" value="c" onclick="text(this)">
        <input type="button" id="" value="=" onclick="text(this)">
    </div>
</body>
</html>

js数组的常用操作

concat()

 <script type="text/javascript">
    // 声明数组
    var arr=[1,"abc","张三","12"];
    // 数组的操作
    var b=["今天天气不错","适合学习"];
    var c="js";
    var d=arr.concat(b,c,c);//arr数组和b,c,c合并
    alert(d);
    alert(d.length);
</script>

作用：数组的合并

join()

<script type="text/javascript">
    var arr=[1,"abc","张三","12"];
    var b=arr.join("-");
    alert(b);
    alert(typeof b);
    alert(arr);
</script>

作用：数组指定间隔符

pop()

  <script type="text/javascript">
      var arr=[1,"abc","张三","12"];
var ele=arr.pop();
      alert(ele);
      alert(arr);
  </script>

作用：数组移除最后一个元素并返回

push()

<script type="text/javascript">
    var arr=[1,"abc","张三","12"];
    var ln=arr.push("lol");
    var ln2=arr.push(["66",77]);
    alert(ln2);
    alert(ln);
    alert(arr);
</script>

作用：数组的追加，返回数组的长度

注意：追加的元素可以是一个数组，但是会作为一个新的角标值存在。

arr.shift()

<script type="text/javascript">
    var arr=[1,"abc","张三","12"];
    var ele=arr.shift();
    alert(ele);
    alert(arr);
</script>

作用：移除数组第一个元素，并返回值

arr.unshift()

<script type="text/javascript">
    var arr=[1,"abc","张三","12"];
    var a=arr.unshift("又是周五了");
    alert(a);
    alert(arr);
</script>

作用：数组在开始位置插入元素

splice()

<script type="text/javascript">
    var arr=[1,"abc","张三","12"];
    var arr2=arr.splice(1,3,"a");//从第一个开始删，删三个，删掉后加a
    alert(arr2);
    alert(arr);
</script>

作用：从一个数组中移除一个或多个元素，如果必要，在所移除的元素的位置上插入新元素，返回所移除的元素。

js的函数学习

函数的作用：代码块的封装，减少代码的冗余

函数的声明

方式一：function 函数名(形参名1，形参名2……){执行体}

<script type="text/javascript">
    // 声明函数
    function test1(a1,a2)
    {
        alert("函数的声明一");
    }
    // 调用声明的函数
    test1(1,2);
</script>

作用：声明了一个带有两个形参的test1函数

方式二：var 函数名= new Function("形参1","形参2"……，"函数执行体");

<script type="text/javascript">
    var test2=new Function("a1","a2","alert('函数声明二')");
    test2(1,2);
    alert(test2);
</script>

注意：该声明方法使用的思想是万事万物皆对象，test2只是一个变量名，但是指向了function函数。

变量名加上小括号就是执行函数的标志。

a1加""是作为new function的实参传进去

去掉双引号是把a1变量的值传进去

方式三：var 变量名=function(形参名1，形参名2……){函数执行体}

<script type="text/javascript">
    var text3=function(a1,a2){
        alert("我是函数声明三");
    }
</script>

函数的参数

<script type="text/javascript">
    function testParam(a1,a2){
        alert(a1);
        alert("函数的形参学习");
    }
    testParam(1);
</script>

注意：

js中的函数在调用时，形参可以不赋值，不会报错

js中的函数在调用时，形参可以不全部赋值，不会报错，但是实参会依次进行赋值

函数的返回值

<script type="text/javascript">
    var testReturn=function(){
        alert("函数的返回值学习");
        return "js";
    }
    alert(testReturn());
</script>

注意：在js中如果函数有返回值，执行alert(函数名())就会打印函数和函数返回值，没有返回值则调用undefined

直接调用函数不会打印返回值

函数的执行符

<script type="text/javascript">
    var text1=function(){
        alert("函数的执行符学习");
        return "js";
    }
    alert(text1());
</script>

注意：在js中函数的执行符是()

没有小括号则函数名其实就是一个变量，加上小括号函数则会被执行

函数作为实参传递

<script type="text/javascript">
    function testobj(a){
        alert();
    }
    var testParam=function(){
        alert("我是函数参数");
    }
    testobj(testParam);
    testobj(testParam);//报错代码
</script>

在js中，函数是可以作为实参传递的

在开发中经常用的传递方式：

<script type="text/javascript">
    function textobj2(fn){//testobj2函数在被调用的时候，实参必须是个函数对象
        fn();
    }
    textobj2(function(){
        alert("开发");
    })
</script>

此处的fn()是执行了function(){alert("开发");}这个函数

js中的类和对象

自定义类

作用：用于存储代码中公共的部分

<script type="text/javascript">
    function person(name,age){
        this.name=name;
        this.age=age;
        // this.test=function(a){
        //     alert(a);
        // }
    }
    function User(uname,pwd){
        this.uname=uname;
        this.pwd=pwd;
    }
    // 使用prototype
    person.prototype.test=function(){alert("嘿嘿")};
    person.prototype.user=new User();
    User.prototype.testU=function(){alert("我是user")};
    // 使用类
    var p1=new person("张三",32);
    var p2=new person("李四",23); 
    alert(p1.name);
    alert(p1.test===p2.test);
    p1.user.testU();//一个prototype链条
</script>

类的声明：

function 类名(形参1，形参2……){
this.属性名1=形参1;
this.属性名2=形参2;
……
this.属性名=fn;
}

类的使用：

var 对象名=new 类名(实参1,实参2……);

注意：js中类的内容只是对象的公共部分，每个对象还可以自定义的进行扩充

类的继承：prototype关键字

person.prototype.test=function(){alert("嘿嘿")};

通过prototype关键字实现了不同对象之间的数据共享

作用1：实现某个类所有子对象的方法区对象的共享，节省内存

自定义对象

<script type="text/javascript">
    // 创建自定义对象
    var obj=new Object();
    obj.name="张三";
    obj.age=23;
    obj.test=function(){
        alert("我是obj");
    }
</script>

作用：用来存储整体数据

原因：很多时候我们没有办法预先知道一个对象有哪些属性，所以只能临时的创建一个对象来自定义属性存储数据，来保证数据的完整性

应用：Ajax会使用

使用：

var 对象名=new OBject();
	对象名,属性名1=属性值1;
	对象名,属性名2=属性值2;
	对象名,属性名3=属性值3;
	……
    
var 对象名={};
	对象名,属性名1=属性值1;
	对象名,属性名2=属性值2;
	对象名,属性名3=属性值3;
	……

一般用来存储数据，不会在自定义对象中存储函数对象

js中的对象属性和内容是可以自定义地扩充的，不是依赖于类的声明的，类只是对象公共部分的一种声明，是为了节省代码的冗余的。

js的事件机制

什么是事件：当我们的行为动作触发了某一类事物引起另外一类事物的执行，叫事件

js事件机制：

解释：当我们的行为动作满足了一定的条件后，会触发某类事件的执行。

作用：主要是结合js的函数来使用

内容：

      1. 单双击事件
     		1. 单击：onclick
     		2. 双击：ondblclick
      2. 鼠标事件
     		1. 鼠标悬停：onmouseover
     		2. 鼠标移动：onmousemove
     		3. 鼠标移出：onmouseout
      3. 键盘事件
     		1. 键盘下压：onkeydown
     		2. 键盘下压：onkeyup
      4. 焦点事件
     		1. 获取焦点：onfocus
     		2. 失去焦点：onblur
      5. 页面加载事件
     		1. 页面加载：onload

注意：同一个html元素可以添加多个不同的事件，一个事件可以监听多个函数的执行，事件之间用;间隔

第一种方式：在HTML上直接使用事件属性进行添加，属性值为所监听执行的函数（js事件只在当前页面有效）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        // 单击事件
        function testOnclick() {
            alert("我是单击");
        }
        // 双击事件
        function testOndblclick() {
            alert("我是双击");
        }
        // 鼠标事件
        function testOnmouseover() {
            alert("我是鼠标悬停事件");
        }

        function testOnmousemove() {
            alert("我被移动了");
        }

        function testOnmouseout() {
            alert("我被移出了");
        }
        // 键盘事件
        function testOnkeyup() {
            alert("我是键盘弹起事件");
        }

        function testOnkeydp() {
            alert("我是键盘下压事件");
        }
        // 焦点事件
        function testOnfocus() {
            alert("我是获取焦点事件");
        }

        function testOnblur() {
            alert("我是失去焦点事件");
        }
        // 页面加载
        function testOnload() {
            alert("我是页面加载事件");
        }
        // 测试
        function test(){
            alert("测试一个事件的多个函数执行");
        }
        
    </script>
    <style type="text/css">
        #showdiv {
            width: 300px;
            height: 300px;
            border: solid 1px;
        }
    </style>
</head>

<body>
    <input type="button" value="测试单击" onclick="testOnclick();test();">
    <input type="button" value="测试双击" ondblclick="testOndblclick();">
    <hr>
    <br><br>
    <!-- 同一个html可以添加多个事件 -->
    <div id="showdiv" onmouseover="testOnmouseover()" onmousemove="testOnmousemove()" onmouseout="testOnmouseout()">
    </div>
    <hr>
    <br>
    键盘事件学习: <br>
    键盘弹起事件: <input type="text" onkeyup="testOnkeyup();"><br>
    键盘下压事件: <input type="text" onkeydown="testOnkeydp();">
    <hr>
    焦点事件学习: <br>
    获取焦点: <input type="text" onfocus="testOnfocus()"><br>
    失去焦点: <input type="text" onblur="testOnblur()">

</body>

</html>
<script type="text/javascript">
    testOnload();
</script>

事件进阶学习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        // 值改变事件
        function testOnchange(){
            alert("我被改变了");
        }
        // 单击事件
        function testOnclick(){
            alert("今天天气真好,不冷不热,贼适合学习");
        }
        // 双击事件
        function testOndblclick(){
            alert("老师说的对");
        }
        // 事件的阻断
        function testA(){
            alert("事件的阻断");
            return true; //false则不提交
        }
        // 超链接调用js函数
        function testHerf(){
            alert("我是js函数");
        }
    </script>
</head>

<body>
    值改变事件: <br>
    <select name="" id="" onchange="testOnchange();">
    <option value="">北京</option>
    <option value="">上海</option>
    <option value="">广州</option>
    </select>
    <hr>
    <br>
    事件的冲突: <br>
    <input type="button" value="事件的冲突" onclick="testOnclick()" ondblclick="testOndblclick()">
    <hr>
    事件的阻断: <br>
    <a href="https://www.baidu.com" target="_blank" onclick="return testA()">百度一下</a> <br>
    超链接调用js函数: <br>
    <a href="javascript:testHerf()">调用js函数</a>
</body>

</html>

给时候的HTML标签天加事件

onchange – select下拉框

onload – body标签

单双击 – 用户会进行点击动作的HTML元素

鼠标事件 – 用户会进行鼠标移动操作的

键盘事件 – 用户会进行键盘操作的HTML元素
给HTML元素添加多个事件时，注意事件之间的冲突

例子：单击和双击

当事件的触发条件包含相同部分的时候，会产生事件之间的冲突
事件的阻断

当世界所监听的函数将返回值返回给事件时：

false：则会阻断当前事件所在的HTML标签功能

true：则继续执行当前事件所在的HTML标签功能
超链接调用js函数

<a href="javascript:函数名()">调用js函数</a>

window对象

BOM浏览器对象模型：是规范浏览器对js语言的支持(js调用浏览器本身的功能)

BOM的具体实现是window对象

window对象使用学习：

window对象不用new，直接进行使用即可，类似Math的使用方式，window关键字可以省略不写，以下关键字全是window方法
框体方法

alert：警告框，提示一个警告信息，没有返回值

comfirm：确认框，提示用户选择一项操作(确定/取消)

点击确定返回true，点击取消返回false

prompt：提示框，提示用户某个信息的输入

点击确定返回当前用户输入数据，默认值为空

点击取消返回null
定时和间隔执行方法

setTimeout：指定的时间后执行指定的函数

参数1：函数对象

参数2：时间，单位毫秒

返回值：返回当前定时器的id

setInterval：每间隔指定时间执行指定的函数

参数1：函数对象

参数2：时间，单位毫秒

返回值：返回当前间隔器的id

clearTimeout：用来停止指定的定时器

参数：定时器的id

clearInterval：用来停止指定的间隔器

参数：间隔器的id

子窗口方法

window.open('子页面的资源(相对路径)','打开方式','配置')

注意：关闭子页面的方法window.close(),但是此方法只能关闭open方法关闭的页面

地址栏属性

location.href="新的资源路径(相对路径/URL)"：跳转页面

location.reload()：重新加载页面资源
历史记录属性

history.forward()：页面资源前进，历史记录的前进

history.back()：页面资源后退，历史记录后退

history.go(index(0,1,2,3……)) ：跳转指定的历史记录资源
屏幕属性

screen.width：获取屏幕的宽度分辨率

screen.height：获取屏幕的高度分辨率

浏览器配置属性

navigator.userAgent：获取浏览器配置属性

父页面：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        var idi;
        var ids;
        // 框体方法学习
        // 警告框
        function testAlert() {
            window.alert("我是警告框");
        }
        // 确认框
        function testConfirm() {
            window.confirm("你确定要删除嘛?");
        }
        // 提示框
        function testPrompt() {
            window.prompt("请输入昵称:");
        }

        // 定时执行
        function testSetTimeout() {
            idi = window.setTimeout(function () {
                alert("我是定时执行");
            }, 3000);
        }
        // 间隔执行
        function testSetInterval() {
            ids=window.setInterval(function () {
                alert("我是间隔执行");
            }, 2000)
        }
        // 停止当前的定时方法
        function testClearTimeout() {
            window.clearTimeout(idi);
        }
        function testClearInterval(){
            window.clearInterval(ids);
        }

        // 子页面方法
        function testOpen(){
            window.open('son.html','newwindow','height=400,width=600');
        }
        // 子页面调用父页面函数
        function testFather(){
            alert("父页面");
        }
    </script>
    
</head>

<body>
    <input type="button" value="测试警告框" onclick="testAlert();">
    <input type="button" value="测试确认框" onclick="testConfirm();">
    <input type="button" value="测试提示框" onclick="testPrompt();">
    <hr>
    <input type="button" value="测试定时执行" onclick="testSetTimeout();">
    <input type="button" value="测试间隔执行" onclick="testSetInterval();">
    <input type="button" value="测试停止指定的定时器" onclick="testClearTimeout();">
    <input type="button" value="测试停止指定的间隔器" onclick="testClearInterval();">
    <hr>
    <input type="button" value="测试子页面" onclick="testOpen()">
</body>

</html>

子页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>son页面</title>
    <script type="text/javascript">
        // 倒计时功能
        function testTime(){
            window.setInterval(function() {
                var span=document.getElementById("timeSpan");
                span.innerHTML=span.innerHTML-1;
                // 关闭子页面
                if(span.innerHTML==0){
                    window.close()
                }
            },1000);
        }
        // 子页面调用父页面函数
        function testFa(){
            window.opener.testFather();
        }
    </script>
</head>

<body onload="testTime()">
    <h3>son页面</h3>
    <hr>
    <b>欢迎访问,<span id="timeSpan" style="color: red; font-size: 40px;">5</span>秒后页面关闭</b>
    <input type="button" value="调用父页面函数" onclick="testFa()">
</body>
</html>

注意：新版本已经不能使用window.opener传递js了，因为这种方法不安全，会产生Blocked a frame with origin的错误

document对象

官方概念：每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

个人概念：浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存HTML文档的所有信息，供js解析执行

使用document

获取HTML元素对象

直接获取方式

通过id

通过name

通过标签名

通过class属性值

间接获取方式

父子关系

子父关系

兄弟关系

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document对象学习</title>
    <script type="text/javascript">
        // document获取元素对象
        // 直接方式
        // id方式
        function testGetEleById(){
            var inp=window.document.getElementById("uname");
            alert(inp);
        }
        // name方式
        function testGetEleByName(){
            var favs=document.getElementsByName("fav");
            alert(favs.length);
        }
        // 标签名
        function testGetEleByTagName(){
            var inps=document.getElementsByTagName("input");
            alert(inps.length);
        }
        // class属性
        function testGetEleByclassName(){
            var inps=document.getElementsByClassName("common");
            alert(inps.length);
        }
        // 间接获取方式
        // 父子关系学习
        function testParent(){
            // 获取父级元素
            var showdiv=document.getElementById("showdiv");
            // 获取所有子元素对象数组
            var childs=showdiv.childNodes;
            alert(childs.length);
        }
        // 子父关系学习
        function testChild(){
            // 获取子元素对象
            var inp=document.getElementById("inp");
            var div=inp.parentNode;
            alert(div);
        }
        // 兄弟关系
        function testBrother(){
        var inp=document.getElementById("inp");
        var preEle= inp.previousSibling;//弟获取兄
        var nextEle=inp.nextSibling;//兄获取弟
        alert(preEle+":::"+nextEle);
        }
        
    </script>
    <style type="text/css">
        .common{}
        #showdiv{
            border: solid 2px orange;
            width: 300px;
            height: 300px;
            
        }
    </style>
</head>
<body>
    <h3>document对象的概念和获取元素对象学习</h3>
    直接获取方式学习: <br>
    <input type="button" value="测试获取HTML元素id" onclick="testGetEleById()">
    <input type="button" value="测试获取HTML元素names" onclick="testGetEleByName()">
    <input type="button" value="测试获取HTML元素TagName" onclick="testGetEleByTagName()">
    <input type="button" value="测试获取HTML元素ClassName" onclick="testGetEleByclassName()">
    <hr>
    用户名:<input type="text" name="uname" id="uname" value=""><br>
    <input type="checkbox" name="fav" id="fav" value="" class="common">唱歌
    <input type="checkbox" name="fav" id="fav" value="" class="common">跳舞
    <input type="checkbox" name="fav" id="fav" value="">睡觉
    <input type="checkbox" name="fav" id="fav" value="">打游戏
    <hr>
    间接获取方式学习: <br>
    <input type="button" value="测试父子关系" onclick="testParent()">
    <input type="button" value="测试子父关系" onclick="testChild()">
    <input type="button" value="测试兄弟关系" onclick="testBrother()">
    <hr>
    <div id="showdiv">
        <input type="">
        <input type="" id="inp">
        <input type="">
        <input type="">
        <input type="">
        <input type="">
    </div>
</body>
</html>

js操作HTML元素的属性

获取：

元素对象名，属性名 返回当前属性的属性值—-固有

元素对象名，getArreibute("属性名"); 返回自定义属性值—-自定义

修改：

元素对象名，属性名=属性值 修改当前属性的属性值—-固有

元素对象名，getArreibute("属性名","属性值"); 修改自定义属性值—-自定义

注意：

尽量不要去修改元素的id值和name属性值
使用自定义方式获取固有属性内容，value的值获取的是默认值，不能够获取到实时的用户数据

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        function testField(){
            // 获取元素对象
           var inp=document.getElementById("uname"); 
        //    获取元素属性值
        alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value);
        }
        // 修改元素属性值
        function testField2(){
            // 获取元素对象
            var inp=document.getElementById("uname");
            // 修改元素属性
            inp.value="哈哈";
            inp.type="button";
        }

        // 声明函数--自定义属性
        // 获取
        function testOwnField(){
            // 获取元素对象
            var inp=document.getElementById("uname");
            // 获取自定义属性值
            alert(inp.getAttribute("abc"));
        }
        // 修改
        function testOwnField2(){
            // 获取元素对象
            var inp=document.getElementById("uname");
            // 修改自定义属性值
            inp.setAttribute("abc","呵呵");
        }
        // 使用自定义方式操作固有属性值
        function testOper(){
            // 获取元素对象
            var inp=document.getElementById("uname");
            alert(inp.getAttribute("type"));
            // 通过getAttribute()只能获取到html写死的内容
            alert(inp.getAttribute("value"));
        }
    </script>
</head>
<body>
    <h3>js操作HTML的元素属性</h3>
    <input type="button" value="测试获取元素属性--固有" onclick="testField()">
    <input type="button" value="测试修改元素属性--固有" onclick="testField2()">
    <input type="button" value="测试修改元素属性--自定义" onclick="testOwnField()">
    <input type="button" value="测试修改元素属性--自定义" onclick="tsestOwnField2()">
    <input type="button" value="测试元素自定义操作固有属性" onclick="testOper()">
    <hr>
    用户名: <input type="text" name="uname" id="uname" value="" abc="嘿嘿">
</body>
</html>

js操作元素的内容

获取：

元素对象名.innerHTML：返回当前元素对象的所有内容，包括HTML标签

元素对象名.innerText：返回当前元素对象的文本内容，不包括HTML标签

修改：

元素对象名.innerHTML=”新的值”：会将原有内容覆盖，并且HTML标签会被解析

元素对象名.innerHTML=元素对象名.innerHTML+”新的值”：追加效果

元素对象名.innerText=”新的值”：会将原有内容覆盖，但HTML标签不会解析，会作为普通文本显示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #div01{
            width: 200px;
            height: 200px;
            border: solid 1px orange;
        }
    </style>
    <script type="text/javascript">
        // 获取元素内容
        function getContext(){
            // 获取元素对象
            var div=document.getElementById("div01");
            // 获取元素内容
            alert(div.innerHTML);
            alert(div.innerText);
        }
        // 修改元素内容
        function updateContext(){
            // 获取元素对象
            var div=document.getElementById("div01");
            // 修改元素对象内容
            div.innerHTML="<b>你先上，皇军给你殿后，八嘎</b>";
        }
        function updateContext2(){
            // 获取元素对象
            var div=document.getElementById("div01");
            // 修改元素对象内容
            div.innerText="<b>你先上，皇军给你殿后，八嘎</b>";
        }
    </script>
</head>

<body>
    <h3>js操作元素内容学习</h3>
    <input type="button" value="测试获取元素内容--innerHTML&innerText" onclick="getContext()">
    <input type="button" value="测试获取元素内容--innerHTML" onclick="updateContext()">
    <input type="button" value="测试获取元素内容--innerText" onclick="updateContext2()">
    <hr>
    <div id="div01">
        <b>皇军，前面有八路的干活</b>
        <b>皇军，前面有八路的干活</b>
    </div>
</body>
</html>

js操作元素的样式

通过style属性：

元素对象名.style.样式名=”样式值”：添加或修改

元素对象名.style.样式名=””：删除样式

注意：以上操作，操作的是HTML的style属性声明中的样式，而不是其他css代码域中的样式

通过class属性：

元素对象名.className=”新的值”：添加类选择器样式或者修改类选择器样式

元素对象名.className=””：删除类样式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #showdiv{
            width: 200px;
            height: 200px;
            border: solid 1px;
        }
        .common{
            width: 200px;
            height: 200px;
            border: solid 1px;
        }
        .common2{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
    <script type="text/javascript">
        // js操作元素样式
        // js给元素操作样式--style
        function testOperCss(){
            // 获取元素对象
            var showdiv=document.getElementById("showdiv");
            // 添加元素样式
            showdiv.style.backgroundColor="#FFA500";
            // js获取元素样式
            showdiv.style.border="solid 2px red";
            // js删除style属性样式
            showdiv.style.border="";
        }
        // js操作样式--className
        function testOperCss2(){
            // 获取元素对象
            var div01=document.getElementById("div01");
            // 获取
            alert(div01.className);
            // 添加或修改
            div01.className="common2";
            // 删除
            div01.className="";
        }
    </script>
</head>

<body>
    <h3>js操作元素的样式</h3>
    <input type="button" value="测试添加元素样式--style" onclick="testOperCss()">
    <input type="button" value="测试添加元素样式--className" onclick="testOperCss2()">
    <hr>
    <div id="showdiv" style="border: solid 2px blue;">

    </div>
    <div id="div01" class="common">

    </div>
</body>
</html>

js操作文档结构

添加节点

删除节点

使用innerHTML
1. div.innerHTML=div.innerHTML+”内容”：增加节点
2. div.innerHTML=””：删除所有节点
3. 父节点.removeChild(子节点对象)：删除指定的子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script text="text/javascript">
        function testAdd(){
            // 获取元素对象
            var showdiv=document.getElementById("showdiv");
            // 给div追加上传按钮
            showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file'><input type='button' value='删除' onclick='delInp(this)'><br></div>";
        }
        function delInp(btn){
            var showdiv=document.getElementById("showdiv");
            // 获取要删除的子div
            var cdiv=btn.parentNode;
            // 父div删除子div
            showdiv.removeChild(cdiv);
        }
    </script>
</head>
<body>
    <h3>js操作元素的文档路径</h3>
    <input type="button"value="继续上传" onclick="testAdd()">
    <hr>
    <div id="showdiv">
        
    </div>
</body>
</html>

使用动态追加
1. 获取元素对象
  1. var obj=document.createElement(“标签名”);
  2. 元素对象名.appendChild(obj);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        // 创建元素对象
        function testOper2(){
            // 获取元素对象
            var showdiv=document.getElementById("showdiv");
            // 创建input对象
            var inp=document.createElement("input");
            inp.type="file";
            // 创建button按钮
            var btn=document.createElement("input");
            btn.type="button";
            btn.value="删除";
            
            btn.onclick=function(){
                showdiv.removeChild(inp);
                showdiv.removeChild(btn);
                showdiv.removeChild(br);
            }
            // 创建换行符
            var br=document.createElement("br");
            // 将创建的元素对象存放到div中
            showdiv.appendChild(inp);
            showdiv.appendChild(btn);
            showdiv.appendChild(br);
        }
    </script>
</head>
<body>
    <h3>js操作文档结构2</h3>
    <input type="button" name="" id="" value="继续上传" onclick="testOper2()">
    <hr>
    <div id="showdiv">

    </div>
</body>
</html>

js操作form表单

获取form表单对象
1. 使用id：var fm=document.getElementById("fm");
2. 使用name属性：var frm=document.frm;
获取form表单对象
1. fm.elements
form表单常用功能
1. js提交表单：fm.submit();
2. js重置表单：fm.reset();
form的属性操作：
1. 表单对象名.action=”新的值”：动态的改变数据的提交路径
2. 表单对象名.method=”新的值”：动态的改变提交的方式
js表单元素的通用属性
1. 只读模式：
  
  readonly="readonly"：不可以更改，但是数据可以提交
2. 关闭模式：
  
  disabled="disabled"：不可以进行任何操作，数据不会提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        function testForm(){
            // 获取form表单
            var fm=document.getElementById("fm");
            alert(fm);
            // 使用form表单的name属性来获取
            var frm=document.frm;
            alert(frm);
            // form表单常用方法
            fm.submit();
            fm.reset();
        }
    </script>
</head>
<body>
    <h3>js操作form表单</h3>
    <input type="button" value="测试操作form" onclick="testForm()">
    <hr>
    <form action="#" method="get" id="fm" name="frm">
        用户名: <input type="text" name="uname" id="uname" value="" readonly="readonly" ><br> <br>
        密码: <input type="possword" name="pwd" id="pwd" value="" disabled="disabled" ><br> <br>
        <input type="submit" value="登录">
    </form>
</body>
</html>

js-document操作表单元素

js多选框，单选框
1. 被选中状态下在js中checked属性值为true，未选中状态为false；
js下拉框
1. 被选择的option对象在js中selected属性值为true，未选中为false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        // 获取选项
        function testCheckBox(){
            // 获取所有多选框对象数组
            var favs=document.getElementsByName("fav");
            // 遍历数组
            for(var i=0;i<favs.length;i++){
                if(favs[i].checked)
                alert(favs[i].value+":"+favs[i].checked);
            }
        }
        // 全选
        function testCheckBox2(){
            var favs=document.getElementsByName("fav");
            for(var i=0;i<favs.length;i++){
                favs[i].checked=true;
            }
        }
        // 反选
        function testCheckBox3(){
            var favs=document.getElementsByName("fav");
            for(var i=0;i<favs.length;i++){
                favs[i].checked=!favs[i].checked;
            }
        }
        // 操作下拉框
        function testSel(){
            // 获取下拉框对象
            var sel=document.getElementById("address");
            // alert(sel.value);
            // 获取option对象集合
            var os=sel.options;
            for(var i=0;i<os.length;i++){
                if(os[i].selected){
                    alert(os[i].value+":"+os[i].text);
                }
            }
        }
    </script>
</head>
<body>
    <h3>操作表单元素</h3>
    <hr>
    <b>操作多选框</b><br><br>
    <input type="checkbox" name="fav" id="fav" value="1">远走高飞<br>
    <input type="checkbox" name="fav" id="fav" value="2">当<br>
    <input type="checkbox" name="fav" id="fav" value="3">李白<br>
    <input type="checkbox" name="fav" id="fav" value="4">杜甫<br>
    <input type="checkbox" name="fav" id="fav" value="5">see you again<br>
    <input type="checkbox" name="fav" id="fav" value="6">fade<br>
    <input type="button" value="播放" onclick="testCheckBox()">
    <input type="button" value="全选" onclick="testCheckBox2()">
    <input type="button" value="反选" onclick="testCheckBox3()">
    <select name="" id="address" onchange="testSel()">
    <option value="0">--请选择--</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
    </select>
</body>
</html>

js校验from表单

注意：写项目时可以注释先行后写代码，可以保证思路清晰

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        // 常见验证码
        function createCode() {
            // 创建随机四位数字
            var code = Math.floor(Math.random() * 9000 + 1000)
            // 获取元素对象
            var span = document.getElementById("codeSpan");
            // 将数字存放到span中
            span.innerHTML = code;
        }
        // 验证用户名
        function checkUname() {
            // 获取用户的用户信息
            var uname = document.getElementById("uname").value;
            // 创建校验规则
            var reg = /^[\u4e00-\u9fa5]{2,4}$/
            // 获取span对象
            var span = document.getElementById("unameSpan");
            // 开始校验
            if (uname == "" || uname == null) {
                // 输出结果
                span.innerHTML = "*用户名不能为空"
                span.style.color = "red";
                return false;
            } else if (reg.test(uname)) {
                // 输出结果
                span.innerHTML = "*用户名可以使用"
                span.style.color = "green";
                return true;
            } else {
                // 输出结果
                span.innerHTML = "*用户名不符合规则"
                span.style.color = "red"
                return false;
            }
        }

        // 校验确认密码
        function checkPwd(){
            // 获取第一次密码
            var pwd=document.getElementById("pwd").value;
            // 创建校验规则
            var reg=/^[a-z]\w{5,7}$/;
            // 获取span对象
            var span=document.getElementById("pwdSpan");
            // 开始校验
            if(pwd==""|| pwd==null){
                // 输出校验结果
                span.innerHTML="密码不能为空";
                span.style.color="red";
                return false;
            }else if(reg.test(pwd)){
                // 输出校验结果
                span.innerHTML="密码格式正确";
                span.style.color="green";
                return true;
            }else{
                // 输出校验结果
                span.innerHTML="密码格式不正确";
                span.style.color="red";
                return false;
            }
            checkPwd2();
        }
        // 校验确认密码
        function checkPwd2(){
            // 获取第一次密码
            var pwd=document.getElementById("pwd").value;
            // 获取确认密码
            var pwd2=document.getElementById("pwd2").value;
            // 获取span对象
            var span=document.getElementById("pwd2Span");
            // 比较两次密码是否相同
            if(pwd2==""||pwd2==null){
                span.innerHTML="确认密码不能为空";
                span.style.color="red";
                return false;
            }else if(pwd==pwd2){
                span.innerHTML="密码一致";
                span.style.color="green";
                return true;
            }else{
                span.innerHTML="两次密码输入不一致";
                span.style.color="red";
                return false;
            }
        }
        // 校验手机号
        function checkPhone(){
            return checkField("phone",/^1[3,4,5,7,8]\d{9}$/);
        }
        // 检验邮箱
        function cheeckMail(){
            return checkField("mail",/^\w+@[a-z0-9]+.[a-z]{2,4}$/)
        }
        // 校验籍贯
        function checkAddress(){
            // 获取用户数据
            var sel=document.getElementById("address").value;
            // 获取span
            var span=document.getElementById("addressSpan");
            // 校验
            if(sel!=0){
                span.innerHTML="籍贯选择成功";
                span.style.color="green";
                return true;
            }else{
                span.innerHTML="籍贯不能为请选择"
                span.style.color="red";
                return false;
            }
        }
        // 检验爱好
        function checkFav(){
            // 获取所有的爱好
            var favs=document.getElementsByName("fav");
            // 获取span
            var span=document.getElementById("favSpan");
            // 遍历
            for(var i=0;i<favs.length;i++){
                if(favs[i].checked){
                    span.innerHTML="爱好选择成功";
                    span.style.color="green";
                    return;
                }
            }
            span.innerHTML="爱好至少选择一项";
            span.style.color="red";
            return false;
        }
        // 封装校验:相同的保留,不同的传参
        function checkField(id, reg) {
            // 获取用户数据
            var inp = document.getElementById(id);
            var va = inp.value;
            var alt = inp.alt;
            // 创建校验规则
            // 获取span对象
            var span = document.getElementById(id+"Span");
            // 开始校验
            if (va === "" || va == null) {
                // 输出结果
                span.innerHTML = alt + "不能为空";
                span.style.color = "red";
                return false;
            } else if (reg.test(va)) {
                // 输出结果
                span.innerHTML = alt + "可以使用";
                span.style.color = "green";
                return true;
            } else {
                span.innerHTML = alt + "不符合规则";
                span.style.color = "red";
                return false;
            }
        }
        // 校验是否同意本公司协议
        function checkAgree(){
            document.getElementById("sub").disabled=!document.getElementById("agree").checked;
        }
        // 提交判断
        function checkSub(){
            checkUname();
            checkPwd();
            checkPwd2();
            checkPhone();
            cheeckMail();
            checkAddress();
            checkFav();
            return checkUname()&&checkPwd()&&checkPwd2()&&checkPhone()&&cheeckMail()&&checkAddress()&&checkFav();
        }
    </script>
</head>

<body onload="createCode()">
    <form action="#" method="get" onsubmit="return checkSub()">
        验证码: <input type="text" name="" id="">&nbsp;&nbsp;&nbsp;
        <span id="codeSpan" onclick="createCode()" style="color: black; background-color: palevioletred;"></span><br>
        用户名: <input type="text" name="uname" id="uname" value="" onblur="checkUname()" alt="">
        <span id="unameSpan">*2-4位汉字</span><br>
        手机号: <input type="text" name="phone" id="phone" value="" onblur="checkPhone()" alt="手机号">
        <span id="phoneSpan"></span><br>
        邮箱: <input type="text" name="mail" id="mail" value="" onblur="cheeckMail()" alt="邮箱">
        <span id="mailSpan"></span><br>
        密码: <input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()">
        <span id="pwdSpan"></span><br>
        密码: <input type="password" name="pwd2" id="pwd2" value="" onblur="checkPwd2()">
        <span id="pwd2Span"></span><br>
        籍贯: <select name="address" id="address" onchange="checkAddress()">
            <option value="0">--请选择--</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
        </select>
        <span id="addressSpan"></span><br>
        爱好: <br> 
        <input type="checkbox" name="fav" id="" value="1" onblur="checkFav()">LOL
        <input type="checkbox" name="fav" id="" value="1" onblur="checkFav()">睡觉
        <input type="checkbox" name="fav" id="" value="1" onblur="checkFav()">吃饭 <br>
        <input type="checkbox" name="fav" id="" value="1" onblur="checkFav()">打豆豆
        <input type="checkbox" name="fav" id="" value="1" onblur="checkFav()">看电影
        <input type="checkbox" name="fav" id="" value="1" onblur="checkFav()">听歌
        <span id="favSpan"></span> <br>
        是否同意本公司协议:<input type="checkbox" name="" id="agree" value="" onclick="checkAgree()"><br>
        <input type="submit" id="sub" value="立即注册" disabled="disabled" >
    </form>
</body>

</html>

原生AJAX

AJAX简介

AJAX全称Asynchronous JavaScript And XML，就是异步的js和XML

通过ajax可以在浏览器中向服务器发送异步请求，最大优势：无刷新获取数据

AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

XML简介

XML：可扩展标记语言

XML用途：曾被设计用来传输和存储ajax数据

注意：XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签

<student>
	<name>孙悟空</name>
    <age>18</age>
    <gender>男</gender>
</student>

AJAX的特点

AJAX的优点

可以无需刷新页面而与服务器端进行通信
允许根据用户事件来更新部分页面内容

AJAX的缺点

没有浏览历史，不能回退
存在跨域问题(同源)
SEO不好

HTTP协议

介绍：超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。

请求报文

重点是格式和参数

行：GET,POST（请求方式） + /s?ie=utf-8（请求内容） + HTTP/1.1（协议版本）

头：Host（域名）: atguigu.com

Cookie: name=guigu

Content-type（内容类型）: application/x-www-form-urlencoded

User-Agent（用户浏览器）: Chrome 83

空行：

体：username=admin&password=admin

响应报文

行：HTTP/1.1（协议版本）200，403，404（响应状态码）OK（响应状态字符串）

头：Content-Type（内容类型）：text/html;charset=utf-8

Content-length（内容长度）：2048

Content-encoding（压缩媒体类型）：gzip

空行：

体：

<html>
    <head>
        <body>
            <h1>学习ajax</h1>
        </body>
    </head>
</html>

express使用

下载安装express

npm i --yes
npm install express #将express安装在node_modules(全局目录)下

使用express

//1. 引入express
const express = require('express');

//2. 引入应用对象
const app = express();

//3. 创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/', (request,response)=>{
    //设置响应  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');//设置响应头
    response.send('HELLO EXPRESS');//设置响应体
});

//4. 监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动, 8000 端口监听中....");
})

AJAX请求

GET请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>

    <script>
        // 获取button元素
        const btn = document.getElementsByTagName('button')[0];
        // 绑定事件
        btn.onclick = function () {
            // 1.创建对象（ajax操作,xhr）
            const xhr = new XMLHttpRequest();
            // 2.设置请求方法和 url
            xhr.open('GET', 'http://127.0.0.1:8000/server');
            // 将http://127.0.0.1:8000/server加上?a=100&b=200&c=300即可传递a:100,b:200,c:300的参数
            // 3.发送
            xhr.send();
            // 4.事件绑定 处理服务端返回的结果
            // on when 当.....时候
            // readystate 是xhr 对象中的属性，表示状态,有五个值： 0 1 2 3 4
            // 0表示未初始化
            // 1表示open方法调用完毕
            // 2表示send调用完毕
            // 3表示服务端返回部分结果
            // 4表示服务端返回全部结果
            // change 改变
            xhr.onreadystatechange = function () {
                // 判断（服务端返回了所有结果）
                if (xhr.readyState === 4) {
                    // 判断响应状态码 200 40x 500
                    // 2xx 成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理结果 行 头 空行 体
                        // 1.响应行
                        console.log(xhr.status);// 状态码
                        console.log(xhr.statusText);// 状态字符串
                        console.log(xhr.getAllResponseHeaders());// 所有响应头
                        console.log(xhr.response);// 响应体
                    }
                }
            }
        }
    </script>
</body>

</html>

//1. 引入express
const express = require('express');

//2. 引入应用对象
const app = express();

//3. 创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/server', (request,response)=>{
    //设置响应  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');//设置响应头
    response.send('HELLO AJAX GET');//设置响应体
});

app.post('/server', (request,response)=>{
    //设置响应  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');//设置响应头
    response.send('HELLO AJAX POST');//设置响应体
});

//4. 监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动, 8000 端口监听中....");
})

POST请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        // 获取元素对象
        const result = document.getElementById("result");
        // 绑定事件
        result.addEventListener("mouseover", function () {
            // 1. 创建对象
            const xhr = new XMLHttpRequest();
            // 2. 初始化 设置类型与URL
            xhr.open('POST', 'http://127.0.0.1:8000/server');
            // 设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.setRequestHeader('name','atguigu');
            // 3. 发送
            // post可以在send中设置请求体内容
            xhr.send('a=100&&b=200&c=300');
            // xhr.send('a:100&&b:200&c:300');
            // 可以随意发送请求内容但是要有与之相匹配的响应结果
            xhr.send('1233211234567');
            // 4. 事件绑定
            xhr.onreadystatechange = function () {
                // 判断
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理服务器返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })

    </script>
</body>

</html>

//1. 引入express
const express = require('express');

//2. 引入应用对象
const app = express();

//3. 创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/server', (request,response)=>{
    //设置响应  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');//设置响应头
    response.send('HELLO AJAX GET');//设置响应体
});

app.all('/server', (request,response)=>{
    //设置响应头
    //设置响应  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置允许所有响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    //设置响应体
    response.send('HELLO AJAX POST');

});

//4. 监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动, 8000 端口监听中....");
})

JSON请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON响应</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #89b;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result =document.getElementById('result');
        // 绑定键盘按下事件
        window.onkeydown=function(){
        // 发送请求
        const xhr=new XMLHttpRequest();
        // 设置响应体数据的类型(自动转换)
        xhr.responseType='json';
        // 初始化
        xhr.open('get','http://127.0.0.1:8000/json-server');
        // 发送
        xhr.send();
        // 事件绑定
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                if(xhr.status>=200 &&xhr.status<300){
                    // console.log(xhr.response);
                    // result.innerHTML=xhr.response;
                    // 1.手动对数据转化
                    // let data=JSON.parse(xhr.response);
                    // console.log(data);
                    // result.innerHTML=data.name;
                    
                    // 2.自动转换
                    console.log(xhr.response);
                    result.innerHTML=xhr.response.name;
                    
                }
            }
        }
        }
        
    </script>
</body>
</html>

//1. 引入express
const express = require('express');

//2. 引入应用对象
const app = express();

//3. 创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/server', (request,response)=>{
    //设置响应  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');//设置响应头
    response.send('HELLO AJAX GET');//设置响应体
});

// 可以接受任意类型的请求
app.all('/server', (request,response)=>{
    //设置响应头
    //设置响应  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置允许所有响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    //设置响应体
    response.send('HELLO AJAX POST');

});

app.all('/json-server', (request,response)=>{
    //设置响应头
    //设置响应  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置允许所有响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    // 响应一个数据
    const data={
        name: 'atguigu'
    };
    // 设置响应体
    let str=JSON.stringify(data);
    // 设置响应体
    response.send(str);
});
//4. 监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动, 8000 端口监听中....");
})

安装nodemon

npm install -g nodemon

使用：在运行js时输入nodemon sever.js即可在保存时自动刷新js服务。

IE缓存问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IE缓存问题</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #258;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn=document.getElementsByTagName('button')[0];
        const result=document.querySelector('#result');
        btn.addEventListener('click',function(){
            const xhr=new XMLHttpRequest();
            xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());
            xhr.send();
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<300){
                        result.innerHTML=xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

//1. 引入express
const express = require('express');

//2. 引入应用对象
const app = express();

//3. 创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/server', (request,response)=>{
    //设置响应  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');//设置响应头
    //设置响应体
    response.send('HELLO AJAX GET');
});

// 可以接受任意类型的请求
app.all('/server', (request,response)=>{
    //设置响应头
    //设置响应  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置允许所有响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    //设置响应体
    response.send('HELLO AJAX POST');

});

app.all('/json-server', (request,response)=>{
    //设置响应头
    //设置响应  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置允许所有响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    // 响应一个数据
    const data={
        name: 'atguigu'
    };
    // 设置响应体
    let str=JSON.stringify(data);
    // 设置响应体
    response.send(str);
});

// 针对IE缓存
app.get('/ie',(request,response)=>{
    //设置响应  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');//设置响应头
    //设置响应体
    response.send('HELLO IE - 3');
})
//4. 监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动, 8000 端口监听中....");
})
//调用nodemon，在sever文件修改时自动重启服务
//nodemon sever.js
//npm install -g nodemon(安装nodemon)

请求超时与网络异常

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请求超时与网络异常</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');

        btn.addEventListener('click', function () {
            const xhr = new XMLHttpRequest();
            // 超时设置2s
            xhr.timeout = 2000;
            // 超时回调
            xhr.ontimeout=function(){
                alert('网络异常，请稍后重试!!');
            }
            // 网络异常回调
            xhr.onerror=function(){
                alert('你的网络似乎出了一些问题!');
            }
            xhr.open("GET", 'http://127.0.0.1:8000/delay?t=' + Date.now());
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })

    </script>
</body>

</html>

//1. 引入express
const express = require('express');

//2. 引入应用对象
const app = express();

//3. 创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/server', (request,response)=>{
    //设置响应  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');//设置响应头
    //设置响应体
    response.send('HELLO AJAX GET');
});

// 可以接受任意类型的请求
app.all('/server', (request,response)=>{
    //设置响应头
    //设置响应  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置允许所有响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    //设置响应体
    response.send('HELLO AJAX POST');

});

app.all('/json-server', (request,response)=>{
    //设置响应头
    //设置响应  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置允许所有响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    // 响应一个数据
    const data={
        name: 'atguigu'
    };
    // 设置响应体
    let str=JSON.stringify(data);
    // 设置响应体
    response.send(str);
});

// 针对IE缓存
app.get('/ie',(request,response)=>{
    //设置响应头
    //设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('HELLO IE - 3');
})

// 延时响应
app.get('/delay',(request,response)=>{
    //设置响应头
    //设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    setTimeout(() => {
        //设置响应体
        response.send('延时响应');
    }, 3000);
})

//4. 监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动, 8000 端口监听中....");
})

取消请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>取消请求</title>
</head>

<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        // 获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;

        btns[0].onclick = function () {
            x = new XMLHttpRequest();
            x.open("GET", 'http://127.0.0.1:8000/delay');
            x.send();
        }
        
        // abort 
        btns[1].onclick = function () {
            x.abort();
        }
    </script>
</body>

</html>

取消用户重复请求

目的：减缓服务器压力，防止用户发送多个请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重复请求问题</title>
</head>

<body>
    <button>点击发送</button>
    <script>
        // 获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;
        // 标识变量(是否正在发送ajax请求)
        let isSending = false;

        btns[0].onclick = function () {
            // 判断标识变量
            // 如果正在发送，则取消发送，创建一个新的请求
            if (isSending) {
                x.abort();
            }
            x = new XMLHttpRequest();
            // 修改标识变量值
            isSending = true;
            x.open("GET", 'http://127.0.0.1:8000/delay');
            x.send();
            x.onreadystatechange = function () {
                if (x.readyState === 4) {
                    // 修改标识变量
                    isSending = false;
                }
            }
        }
    </script>
</body>

</html>

同源策略

性值：同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。

作用：它能帮助阻隔恶意文档，减少可能被攻击的媒介。

同源：协议、域名、端口号、必须完全相同

注意：违背同源策略就是跨域，ajax默认遵循同源策略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <h1>wqa</h1>
    <button>点击获取用户数据</button>
    <script>
        const btn=document.querySelector('button');
        btn.onclick=function(){
            const x=new XMLHttpRequest();
            // 这里因为是满足同源策略的,所以url可以简写
            x.open("GET",'/data');
            // 发送
            x.send();

            x.onreadystatechange=function(){
                if(x.readyState===4){
                    if(x.status>=200&&x.status<300){
                        console.log(x.response);
                    }
                }
            }
        }
    </script>
</body>
</html>

const express=require('express');

const app=express();

app.get('/home',(request,response)=>{
    // 响应一个页面
    response.sendFile(__dirname+'/index.html');
})

app.get('/data',(request,response)=>{
    response.send('用户数据');
})

app.listen(9000,()=>{
    console.log("服务已经启动...");
})

如何解决跨域

CORS

性值：CORS，跨域资源共享，官方的跨域解决方案

特点：

不需要再客户端做任何特殊操作，完全在服务器中进行处理，支持get和post请求
跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些资源站通过浏览器有权访问哪些资源

工作原理：通过设置响应头告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行

使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>发送请求</button>
    <div id="result"></div>
    <script>
        const btn=document.querySelector('button');
        btn.onclick =function(){
            // 1.创建对象
            const x=new XMLHttpRequest();
            // 2.初始化设置
            x.open("GET","http://127.0.0.1:8000/cors-server")
            // 发送
            x.send();
            // 绑定事件
            x.onreadystatechange=function(){
                if(x.readyState===4){
                    if(x.status>=200&&x.status<300){
                        // 输出响应体
                        console.log(x.response);
                    }
                }
            }
        }
    </script>
</body>
</html>

app.all('/cors-server',(request,response)=>{
    // 设置响应头
    response.setHeader("Access-Control-Allow-Origin","*");
    response.setHeader("Access-Control-Allow-Headers","*");
    response.setHeader("Access-Control-Allow-Method","*");
    response.send('hello CORS');
})

JSONP

性质：JSONP是一个非官方的跨域解决方案，只支持get请求

工作原理：在网页有一些标签天生具有跨域能力，比如：img link iframe script，JSONP就是利用script标签的跨域能力来发送请求的

使用：

原理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原理</title>
    <style>
        #result {
            width: 300px;
            height: 100px;
            border: solid 1px #78a;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        // 处理数据
        function handle(data) {
            // 获取result元素
            const result = document.getElementById('result');
            result.innerHTML = data.name;
        }

    </script>
    <!-- <script src="http://127.0.0.1:5500/express%E6%A1%86%E6%9E%B6/%E8%B7%A8%E5%9F%9F/JSONP/app.js"></script> -->
    
    <!-- jsonp跨域请求，请求内容只能是js代码 -->
    <script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>

</html>

const data={
    name:'尚硅谷atguigu'
};

handle(data);
// console.log(data);

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
</head>
<body>
    用户名: <input type="text" name="" id="username">
    <p></p>
    <script>
        // 获取input元素
        const input = document.querySelector('input');
        const p = document.querySelector('p');

        // 声明handle函数
        function handle(data){
            input.style.border="solid 1px #f00";
            // 修改p标签提示文本
            p.innerHTML =data.msg;
        }

        // 绑定事件
        input.onblur=function(){
            // 获取用户输入值
            let username=this.value;
            // 向服务器发送请求 检测用户名是否存在
            // 1. 创建 script标签
            const script =document.createElement('script');
            // 2. 设置标签的src属性
            script.src='http://127.0.0.1:8000/check-username';
            // 3. 将script插入到文档中
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

// 用户名是否存在
app.all('/check-username',(request,response)=>{
    // response.send('console.log("hello jsonp")');
    const data={
        exist:1,
        msg:'用户名已存在'
    };
    // 将数据转换为字符串
    let str=JSON. stringify(data);
    // 返回结果   
    response.end(`handle(${str})`);

});