HTML/CSS/JS/JQ

HTML

HTML中的内容

1.HTML样图

 <!DOCTYPE html>    声明解析内容（以什么方式解析标签）告诉浏览器用标准版解析，避免兼容问题（标准h5规范解析）
 
<html lang="en">  
根标签（树形结构）head 和 body 字标签
只要不是在网页中显示的内容都要放到head中取（标题，解释器）
 
<head>  head 告诉浏览器 解释性内容
    
    <meta charset="UTF-8">  用的编码格式解析
    <title>Title</title>    网站标题内容
	css代码
	js代码
	jq代码
</head>
 
<body>
 
标签存放位置
body 网站内呈现的内容放到body里面
 
</body>
</html>

2.格式分类

 功能：
1.块级标签：独占一行
2.内联标签：可以和其他标签共享一行

3.标签格式

 <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
 
标签内有不同的属性，不同的属性和不同的属性值，页面呈现效果不同

4.标签的嵌套

 标签嵌套的格式
1.<a><b>123<b><a>  可以
2.<a><b>123<a><b>  不行

HTML标签-基础标签

1.标题标签

 主要是做为网页标题使用
一共分为6个级别从大到小
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

2.段落标签

 用于文章段落作用，可以起到间隔作用（中间会有一些空隙）
<p>这是段落1</p>
<p>这是段落2</p>

3.换行标签

 用于将一行的内容进行换行（用的很少）
 
这是换行<br>
这是换行<br>

4.字体加粗标签

 使用后可以使字体变粗
 
<b>这是字体加粗</b>
<strong> 内容  </strong>

5.字体倾斜标签

 使字体倾斜
<i>这是字体倾斜</i>
<em>字体会变为斜体</em>

6.删除标签

 在页面中呈现内容中间被一条横线贯穿的效果
<del> 内容  </del>

7.特殊符号（空格）

 网址：http://www.fhdq.net/ts/177.html 
 
&nbsp; # 相当于一个空格呈现
&copy; # ©

8.水平分割线

 作用：水平分割线
<hr>
内容1
--------------
内容2

HTML标签-高级标签

1.div和span标签

 <div> 书写内容 </div>  块级标签 没有样式 主要定义文档中的分区
<span> 书写内容  </span>  内联标签 没有样式 定义组合文档中的行内元素
 
处了这两个标签没有样式，其他的别签都带有样式。

2.超链接标签 a标签

 内联标签，主要负责网页内部跳转作用
格式：
    <a href="网络地址">内容</a>
 
属性：
1.href="网络地址" 必须存在
2.target = "_self" 默认在跳转网页时，覆盖原来的网页   target ="_blank" 保留原网页
3.title属性：主要作用：提示用户，当鼠标悬浮在标签上时，会出现提示内容：title="提示内容"

3.img图标标签

 书写方式：
<img src="图片地址" title="当将鼠标放到图片上时提示内容" alt="当图片加载不出来时提示的内容">
 
height="" 设置显示的高
width=""  设置显示宽
 
用于显示图片使用，图片的大小主要还是，设置块级是应占的大小

4.列表标签

 1.有序列表标签
<ol>
        <li> 内容</li>
        <li> 内容</li>
        <li> 内容</li>
</ol>
存在默认样式 1.2.3的形式（存在排序的）
 
2.无序列表标签（使用较多）
<ul>
        <li> 内容</li>
        <li> 内容</li>
        <li> 内容</li>
</ul>
 
存在默认样式 一个实心圆为样式（不存在排序）
 
3.自定义
作用： 定义列表，列表显示
<dl>
    <dt>帮助中心</dt>  定义的title dt
    <dd>账户管理</dd>  定义的描述 dd
    <dd>购物管理</dd>  定义的描述 dd
    <dd>联系帮助</dd>  定义的描述标签 dd
</dl>
默认显示效果：
帮助中心
    账户管理
    购物管理
    联系帮助

5.表格标签

 在页面中以表格形式呈现
作用：在网页中显示表格 订单操作
由表头和表内容组成
tr ： 行的意思
th ： 表头
td ： 表头下面对应的每一个内容
caption ： 是表格的标题，会在表格正上方进行居中显示
border : 中文边界 给table 表格设置边框线 (表格带有间隙)
cellspacing ： 设置单元格的表格间隙
<table border='1' cellspacing="0">
    <caption>商品清单</caption>
    <tr>
        <th>名称</th>
        <th>品牌</th>
        <th>数量</th>
        <th>入库时间</th>
    </tr>
    <tr>
        <td>电视</td>
        <td>ll</td>
        <td>160</td>
        <td>2022/10/10</td>
    </tr>
</table>
 
****** table 表格的横向合并和纵向合并 ****
<th colspan="2">数量/入库时间</th> 跨横向列进行合并(合并的列)
<td rowspan="2">160</td>  跨纵向合并(合并单元格)
 
 
 属性：border="1"，表格的外部框架的粗细

6.网页小标题标签

 <link rel="icon"  href="图标的地址">
 
也是一个外部链接标签，链接其他的内容
href 参数：规定被链接文档的位置

HTML标签-表单标签

HTML 表单用于搜集不同类型的用户输入

 格式：
<form action="提交地址" method="提交方式">
 .
form elements
  <input type="text" placeholder="提示信息用户名">
    <input type="password" placeholder="提示信息密码">
    <input type="submit" value="立即提交">
    
</form>
 
form代表一个表单域（内部都是表单标签）
 
action: 提交数据的目标地址
method:  设置请求参数格式 get post
get 是将用户的数据放到url的路径后面，不安全
post 将数用户据放到了请求体 后面，非常安全
 
enctype: 决定服务端用什么方法去解开 默认为 urlencoded格式
content-type：multipart/form-data  用于文件上传（文件数据使用）

1.input单行文本标签

 自闭合，内联标签标签
自带参数 type="text"
<input type="text">  当参数是text是，可以显示输入的文本
<input type="password"> 当参数是password ，输入的文本是不显示的
<input type="submit"> 当参数时submit，就会显示一个提交按钮，当点击后触发事件，将参数的以有效键值对形式传入服务器
 
例如：
<p>姓名：<input type="text" name="user"></p>
<p>密码：<input type="password" name="pwd"></p>
 
将用户输入的内容，和name的值进行打包传入服务器

2.input多选选框

 当input标签内的type属性的值设置：type="checkbox"
 
格式：
<input type="checkbox" name="" value="">
必须要设置name和value，当勾中后提交，会将name和value打包发给服务器
checked = "checked" 当添加后，就会默认勾选
 
例如：
<p>爱好
篮球<input  checked = "checked" type="checkbox" name="hobby" value="basketball">
足球<input type="checkbox" name="hobby" value="football">
双色球<input type="checkbox" name="hobby" value="shuangseqiu">
</p>

3.input单选框

 当input标签内的type属性的值设置：type="radio"
单选框，只能选中一个值。
<input type="radio" name="" value="">
必须要设置name和value，当勾中后提交，会将name和value打包发给服务器
 
无论多少个选项，name值必须是同一个，要不然就不属于单选框了
 
例如：
<p>性别：
      男<input type="radio" name="gender" value="1">
      女<input type="radio" name="gender" value="2">
      其他<input type="radio" name="gender" value="3">
</p>

4.input事件标签

 当input标签内的type属性的值设置：type="date"
<input type="date" name="">
 
name属性必须存在
当选好日期后，提交，name的值和选好的日期打包给服务器
 
例如：
<p>日期
    <input type="date" name="birth">
</p>

5.select下拉菜单

 书写格式：
 
<select>
  <option value ="">内容</option>
  <option value ="">内容</option>
  <option value="">内容</option>
  <option value="">内容</option>
</select>
 
属性：
 multiple="multiple"  可以选着多个值提交
 size="设置显示数量"
 
 当选择完毕后，会将value的内容 返回

6.textarea多行文本框

 格式：
<textarea name="键值对的键" cols="宽值" rows="长值" placeholder="设置在文本框内让用户看到的内容"></textarea>
 
rows ：代表的是行数
cols ：代表的是列数
用来控制文本域的大小
主要用与写大型的文章使用

7.按钮标签

 1.没有带标签事件，0事件标签 value是为了展示和提示大致功能
<input type="button" value="文本">
 
2.重置用户选中全部内容，用户重置标签 带事件
<input type="reset">
 
3.拥有事件，与submit效果相同，只不过要在form表单内容才有效果，只会上传表单内部的内容给服务器
<button>本文</button>
 
4.提交数据标签，将用户输入的内容提交给服务端上
<input type="submit">

8.label标签

 提升用户的体验效果
当用户点击文本部分是，自动将光标跳到内容框内等待用户输入
格式：
<label for="坐标值">文本</label>
<input type="text" name="user" id="坐标">
 
label需要配合其他的标签使用
需要设置坐标，input，id坐标 == label ，for坐标

HTML标签-表格标签

 <table>  # 设置一个表格
    <thead> # 定义的表头
    <tr> # 表格行
        <th>1行1列内容</th> # 表头(1个或者多个)
        <th>1行2列内容</th> # 表头(1个或者多个)
        <th>1行3列内容</th> # 表头(1个或者多个)
    </tr>
    </thead>
    
    <tbody> # 定义的表中的内容
        <tr> # 表格行
            <td>2行2列内容</td> # 表内容行
            <td>2行3列内容</td>
            <td>2行3列内容</td>            
        </tr>
    </tbody>
</table>

CSS

 css是对网页进行的一种渲染
 
1.内嵌式优先级最高
<p style='color:red'>wkx</p>
 
2.嵌入式
<style>
	css的代码
</style>
 
3.外部引用
<link rel="stylesheet" href="css代码链接">
 
内联式：少用
	维护难,重复多
	不会产生额外的请求
 
嵌入式：
	代码复用不方便，适合单页面引用
	不会产生额外的请求
 
外部式：
	方便维护
	可以重复使用
	会产生额外的请求(技术的更新不影响)
 
优先级：
	与先后顺序有关
	内联式 > 嵌入式 > 外部式
 
嵌入式 > 外部式 link 是写在style 上面还是下面
	<link rel="stylesheet" href="index.css">
    <style type="text/css"> 
    p{
        color: red;
    }
    </style>
那么 style 就会覆盖 link 标签的样式
如果 link 在下面，就会覆盖style的样式

css的选择器

签基本选择器

 根据标签名字进行的选择
可以控制全部的选中的标签
1.标签选择器
div {
	css代码
}
 
<div>内容</div>  标签名
 
2.id选择器
#i1 {
	css代码
}
 
<div id="i1">内容</div>  标签内部的id值
 
3.class选择器
.c1{
	css代码
}
 
<div class="c1">内容</div>
 
4.通配符选择器
*代表通配符，整个页面的全部标签
*{
	css代码
}
 
<div>内容</div>
....
....

类选择器与id选择器

 <span id='span'></span>
<div class='active'></div>
 
#span{  # id选择器
    color: blue; 
}
 
选择网站中独有的特性的标签 id 就像身份证号一样，全网页只能出现一个独特的存在
 
.active{ # 类选择器
    color: gray;
}

组合选择器

后代和子代选择器

 针对多层嵌套标签进行选择
 
1.后代选择器
<span id='span'></span>
<div class='active'>
	<div>
        111
    </div>
</div>
 
.active div{
	// 当前active 标签下的div全部都会赋予当前样式
}
 
 
2.子代选择器（会更加准确）
<div class="c1">
        <div class="c2">
</div>
 
.c1 > .c2{    // 找到c1父级的c2子级进行选择 
	css代码
}

与或选择器

 1.与选择器
div.c1{      当两个class都是c1，使用与选择器指定c1是什么
   css代码
}
<div class="c1"> item1</div>
<p class="c1">item2</p>
<div> item3</div>
 
 
2.或选择器
div.c1,#i1{     根据条件可以选择class 和id 选中标签
	css代码  
}
<div class="c1" > item1</div>
<p class="c1" id="i1">item2</p>
<div> item3</div>

兄弟选择器

 1.毗邻兄弟选择器
.c2+.c3{     根据条件找到标签的下一个兄弟发生变化 c3变化
   css代码
}
 
<div class="c1"> item1 </div>
<div class="c2"> item2 </div>
<div class="c3"> item3 </div>
<div class="c4"> item4 </div>
<div class="c5"> item5 </div>
 
2.普通兄弟选择器
根据条件，除了选中的标签的下面兄弟发生变化 c2不发生变化 一下的发生变化
.c2 ~ .c5{
     css代码
}
 
<div class="c1"> item1 </div>
<div class="c2"> item2 </div>
<div class="c3"> item3 </div>
<div class="c4"> item4 </div>
<div class="c5"> item5 </div>

组合选择器交际选择器

 1.组合选择器
<span>测试</span>
<span>测试吧</span>
<h3>6666</h3>
 
span,h3{ // 标签名称使用逗号隔开,是标签使用同一个样式
	color: blue;
}
 
2.交集选择器
就是将两个样式重合的部分
a{
    color: blue;
}
p{
    color: blue;
}
可以写成
ap{
    color: blue;
}

属性选择器

根据标签的属性进行选择

 1.属性选择器
[type]{    根据标签的所带属性进行选择
 	css代码 
}
 
<input type="text">
<input type="password">
 
2.带名属性选择器
input[type="text"]{    根据标签的所带属性和标签的名字进行选择（更准确）
 	css代码 
}
 
<input type="text">
<input type="password">
 
3.模糊匹配选择器（和正则re差不多）
^= 以什么开头查询
$= 以什么形式结尾
*= 包含全部的值
 
[href$=".png"]{   以.png结尾全部选中
     css代码
}
 
<a href="1.png">click1</a>
<a href="2.png">click2</a>

伪类选择器

 设置鼠标在点击，悬浮，进入的标签颜色状态
1.设置标签本身的颜色
a:link{
	color: red;
}
 
2.设置访问标签后的颜色
a:visited{
   color: red;
}
 
3.设置鼠标悬浮时标签的颜色
a:hover{
	color: red;
}
 
4.设置鼠标点击时标签的颜色
a:active{
    color: red;   
}
 
<a href="">文本</a>

添加标签块级标签和内联标签

 1.添加一个块级标签
#i1:after{	
	content: "这是一个伪类构造的块级标签";
	display: block;  
}
display设置block时就是块级标签
content: 设置标签的文本
 
2.添加一个内联标签
#i1:before{	
	content: "这是一个伪类构造的内联标签";
	display: inline;
}
display设置inline时就是内联标签
content: 设置标签的文本
 
<div id="i1">aiv标签</div>

样式继承与选择器优先级

 指当父标签下面的子标签没有设置颜色时，父标签设置颜色，子标签也会继承父标签设置的颜色。
不是全部的都会继承，只有一部分继承。

 选择器的优先级
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
 
    1 内联样式表的权值最高               style=""           1000；
 
    2 统计选择符中的ID属性个数。         #id                100
 
    3 统计选择符中的CLASS属性个数。      .class             10
 
    4 统计选择符中的HTML标签名个数。     标签名

 注意事项：
1、有!important声明的规则高于一切。
2、如果!important声明冲突，则比较优先权。
3、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
4、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
5、用数字表示只是说明思想，一万个class也不如一个id权值高

文本操作

 1.设置字体倾斜
    font-style:italic;	
    font-style:oblique;
 
2.设置文字的粗细
    font-weight: bolder; 100-900 设置数值
 
3.设置字体大小em为单位1em=16像素px
    px 是页面的绝对单位
    em 是页面的相对单位 如果字体为10px  那么 1em=10px默认字体大小16px 
    font-size: 1em;
 
4.设置字体族（字体样式）确认电脑中是否安装了这个字体
    font-family:sans-serif ; 
 
5.设置字体的颜色
    color:颜色；
    color:rgb(255,255,255) # rgb设置
          rgba(255,255,255,0.4) # 将透明程度调整0.4 可以调整透明程度
    color:#fff; # 16进制设置
 
 
6.文本在区域内居中
    text-align: center  居中对齐
    text-align: right;  右对齐
    text-align: justify;  两端对齐
	text-align: left; 左对齐
 
7.文本属性上下线
    文本默认 text-decoration: none;
    text-decoration: line-through; 对字体设置中间线
    text-decoration: overline; 对字体设置上划线
    text-decoration: underline; 对字体设置下划线
 
    a标签一般会将下划线进行设置取消
    text-decoration: none; 使用这个属性可以实现取消
 
8.文本的缩进
	假如 文本为16px   那么1em = 16px
    text-indent: 2em;
 
9.文本的行高(文本自动垂直居中)
	无论设置多少的行高，文本永远在垂直居中的位置
	字体的大小一定要小于行高，不然就会溢出
    line-height: 60px; 设置行高60px、
 
10.文本字间距
    letter-spacing: 5px;  只对字符和中文有效果 h间距e间距l间距l间距o
    word-spacing: 100px; 设置文字距离，对英文单字的距离 hello 间距 word

清除某些html元素的默认样式

 1.body 标签默认是存在一个外边距样式
	默认margin:8px; 的样式
	margin: 0; 将8px清楚为0
 
2.p 标签默认存在外边距样式
	margin:16px;
	margin: 0; 将16px清楚为0
	
3.ul ol dl 都是存在默认样式
	margin:0; 
	padding:0;
	list-style:none; # 清楚默认样式的.
 
4.input默认样式 自带边框样式与外线样式
	border:none;
	outline:none;
5.a标签去除下划线样式
text-decoration:none;

标签背景设置

 .c1{
background-image: url(图片路径);
background-repeat:图片背景参数；
background-position:图片背景的起始位置
}
 
<div class="c1">文本</div>
 
background-repeat属性参数
    repeat-x 背景图像将在水平方向重复。
    repeat-y 背景图像将在垂直方向重复。
    no-repeat 背景图像将仅显示一次。取消默认填充
 
background-position属性设置
    x%
    y%
    默认参数0,0
    center center 居中设置
 
background-size 属性
	length
	如果只设置一个值，则第二个值会被设置为 "auto"。
	20px  30px 第一个值设置宽度，第二个值设置高度
 
	percentage
    以父元素的百分比来设置背景图像的宽度和高度。
    第一个值设置宽度，第二个值设置高度。
    如果只设置一个值，则第二个值会被设置为 "auto"。
 
	contain		
	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
	背景图像的某些部分也许无法显示在背景定位区域中。
	cover
	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
 
body{
    height: 100%;
    width: 100%;
    background-image:url('./R\ -\ 副本.jfif') ;
    background-repeat:no-repeat;
    background-size:cover;
}

补充属性

列表（默认格式取消）

 ul {
list-style-type: none;  设置将列表的默认格式取消
}
 
<ul>
    <li>内容</li>
</ul>

设置属性设置一个元素的垂直对齐方式

 img{
vertical-align: 修改进行对齐底部;
}
<img src="" alt="" class="c1">

标签悬浮小手

 cursor: pointer;  文本标签在鼠标悬浮时是一条杠 使用这个属性可以变为小手与a标签相似

display属性

 修改标签的属性
 
文本标签
h1-h6
p
strong
em
a
span
img
 
排版标签
br/hr
ul/ol/dl
li
div
input
table
select
form
option
 
 
块级元素
div ul ol p h table form
	特点
	1.独占一行
	2.可以设置宽高，如果不设置宽度那么就是父级元素的100%
行内元素
a span em strong label
	特点
	1.在一行内显示
	2.不能设置宽高，默认的宽高为文本内容占据的宽高(文本就是撑起标签的宽高)
 
行内块
input img
	特点 既有行内元素也有块级元素的特性
	1.在一行内显示
	2.可以设置宽高
 
可以进行标签的属性转换
display中对块/行/行内块的对应竖向
控制元素的显示特性
display:block;  # 显示块级元素
display:inline;  # 显示行内元素
display:inline-block;  # 显示行内块元素
display: none; # 隐藏当前标签(设置元素的隐藏)
 
使用的最多的 是行内转为行内块

盒模型

 盒子模型是什么：
	css model 属于用来设计和布局时使用的
所有的html元素可以看做一个盒子
他包括 外边距 边框 内填充 和实际内容
 
实际内容： 文本 图片 或者其他标签
例如：
	将月饼盒  与  月饼的距离 ： 内填充 padding
	月饼盒1   与  月饼盒2的距离 ： 外边距 margin
	月饼盒外面的一圈 ： 边框 border
 
块级元素都具备盒子模型的特征

属性

 1.padding ： 内边距 盒子边框到内容的的距离
	作用:设置盒子与内容之间的距离
    padding: 上下左右 4个方向
    padding-bottom:下;
    padding-top:上;
    padding-left:左;
    padding-right:右;
	例如：
    内边距的 50px 上下左右 实际300px * 300px 
	height:200px
	width:200px
	padding: 50px; 
	如果还是想要200*200的盒子那么就需要进行计算，真正的内容设置为100*100
	height:100px
	width:100px
	padding: 50px; 
 
2.border: 盒子的边框
    border: none; /*清楚标签的默认边框*/
    outline: none; /*清除外线默认样式*/
    边框3要素：粗细(width) 样式(style) 颜色(color)
            border-width:10px ;
            border-style: solid ; solid实线 dotted点线 double双线 deshed虚线
            border-color: red;
    例如：
    边框宽度3px  实线 颜色为green
    border: 3px solid green;
 
 
3.margin: 盒子与盒子之间的外边距
    margin-right: 10px; # 盒子外边距左 水平方向
    margin-left: 10px; # 盒子外边距右 水平方向
    margin-top: 10px; # 盒子上方10px 垂直方向
    margin-bottom: 10px; # 盒子外边距下方10px 垂直方向
    在垂直方向上 会出现外边距合并的现象，小的会被大的合并 外边距塌陷
    尽量只设置一个方向的距离，防止外边距塌陷
 
    注意：设置height 与 width 宽高是内容的宽高，而不是盒子模型的宽高
 
 
    可以使用padding 来填充行内元素 只要填充的高度 = 设置的行高就可以

盒子剧中

 *{
    padding: 0;
    margin: 0;
}
.class{
   width: 100%;
   height: 40px;
   background-color: black;
}
.content{
    width: 1200px;
    height: 100%;
    background-color: antiquewhite;
    /* 只显示左右居中,上下不显示 */
    margin: 0 auto;
}
</style>
</head>
<body>
    <div class="class">
        <div class="content"></div>
    </div>
</body>
</html>

浮动属性

介绍

 1.正常文档流  从上到下，用左到右逐一加载
    块级元素，随着浏览器读取文档的顺序，自上而下垂直分布，一行一个形式
    行内元素，晦涩者浏览器文档的顺序，从左往右水平分布，一行多个形式占据页面的位置，行内元素满一行才会
    接着排列
2.浮动文档流
    浮动元素的特性
    1. 任何申明为float 的元素都会自动被设置为一个行内块状元素，具有行内块状元素的特性。
    2. 假如某个元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
    3. 在标准浏览器中如果浮动元素a脱离了文档流，那么排在浮动元素a后的元素将会往回排列占据浮动元素a本来所处的位置，使页面布局产生变化。
    4. 如果水平方向上没有足够的空间容纳浮动元素，则转向下一行。
    5. 字围效果：文字内容会围绕在浮动元素周围。
    6. 浮动元素只能浮动至左侧或者右侧。
    7. 浮动元素只能影响排在其后面元素的布局，却无法影响出现在浮动元素之前的元素。
    
    
    
    css提供的浮动特性float属性
    浮动就是漂浮的意思，当设置浮动是就漂浮在上空。
    假设有三个元素ABC
    1.当A未设置浮动，B设置浮动，C未设置浮动。
    呈现的效果就是A第一行，C在第二行，B在C上面漂浮进行覆盖
    2.当A设置浮动，B未设置浮动，C设置浮动。
    A在第一行浮动，B在第一行，A覆盖B，B占据了第一行。C在第二行浮动

格式

 浮动的属性：
	float:none; 不浮动 默认情况下
	left 左浮动
	right 右浮动
	inherit 继承父元素的浮动效果
 
实现多列的排版布局

字围

 float浮动的字围效果
    在设置浮动是，不会对文本进行覆盖（图片浮动，文字不会被覆盖，会被围到，）
    
    
环绕图片显示
 
只需要对图片进行设置浮动，那么文字就会围绕着图片
因为当浮动时，会出现盒子收缩的现象
img{
	float:left;
}
.div{
    height: 500px;
    width: 500px;
}
<div class="div"> 
	<img> 图片
	<p>文字p>
</div>

浮动元素现象

 正常网页属于流式网页，从左往右，从上往下  被称为标准文档流
当盒子设置了float 浮动时，那么这个盒子就脱离了标准的文档流。
 
浮动的现象：
	1.脱离标准的文档流
	2.浮动元素的互相贴靠
	3.浮动的盒子有收缩现象
要浮动就一起浮动，要是不浮动那么就浮动
 
浮动具有破坏性：父级塌陷的情况
	父级元素内的子元素浮动，子元素无法撑起父级元素
	浮动脱离了标准文档流，浮动的元素会飘在文档流之上

父级塌陷

 float浮动的父级塌陷
    1.在设置父级是没有设置宽和高，
    2.使用子级的宽和高撑起来了父级的高度
    3.当子级使用float浮动特性是，子级浮在空中，父恢复原先的状态，没有高度和长度
    4.当其他父设定内容是，就会和上一层父贴合，浮空的子级覆盖其他父的高宽

塌陷的解决方式

 1.给父盒子设置固定高度
        缺点：不灵活，后期不好维护
        应用：网页中的固定高度区域，比如固定的导航栏
 
2.内墙法
        在浮动的div下设置一个div 设置属性
        clear:both
        <div style='float:left'></div>	
        <div style="clear:both"></div>
        规则就是在最后一个浮动元素后面加上一个空的块级元素，并且设置该属性clear:both
        缺点：结构冗余
 
3.伪元素(选择器)清除法
    标签/类/id::after 是一个伪元素：主要作用创建一个伪元素，作为选中的元素内的最后一个子元素
    主要内部的属性就是一个content:'对应创建的文本内容'
    父类标签::after{
        结合内墙法
        content: ''; # 设置一个元素空的
        display: block; # 块级标签
        clear: both; # 设置clear 属性清除浮动，将设置浮动的元素当做没有设置浮动元素来看待
    }
    .div::after{
         content: ''; 
         display: block; 
         clear: both; 
    }
	<div class='div'>
	<div style='float:left'></div>
    </div>
 
4.overflow:
        overflow: visible; 默认属性 超出的部分进行可见
        overflow: hidden; 超出部分隐藏
        overflow: scroll; 超出的部分 用滚动条进行显示
        overflow: auto; 超出部分由浏览器进行决定
        overflow: inherit; 继承父级的overflow
 
        在存在浮动的的父标签属性中 设置overflow: hidden;形成bfc
	<div class="div" style="overflow: hidden">   
        <div class="div1" style='float: left;'></div>
    </div>
 
清除塌陷的最好方式：给浮动元素的父标签设置高度

解决父级塌陷的代码实例

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .top_bar{
        border: 1px solid red;
        /*方式1的属性清除浮动，给父设置相同的高度*/
        /*height: 200px;*/
        /*方式4 overflow
            存在一个规则:计算bfc(块级盒子)的高度时，浮动的元素也会计算在内
            形成bfc条件:除了overflow:visitable的属性 其他的都会形成bfc区域
        */
        overflow: hidden;
    }
 
    .child1 {
        background-color: #747070;
        float:left;
        height: 200px;
        width: 200px;
    }
 
    .child2 {
        /*width: 300px;*/
        background-color: red;
        float:right;
        height: 200px;
        width: 200px;
 
    }
    .her{
        height: 40px;
        width: 1800px;
        background-color: #111515;
    }
    .clear{
        /*方式2的属性*/
        /*clear: both;*/
    }
    /*.top_bar::after{*/
    /*    !*方式3 设置伪元素,结合内墙法清除浮动效果*!*/
    /*    content: '';*/
    /*    display: block;*/
    /*    clear: both;*/
    /*    overflow: inherit;*/
    /*}*/
 
</style>
<body>
<div class="top_bar">
    <div class="child1">左盒子</div>
    <div class="child2">右盒子</div>
<!--方式2 内墙法-->
<!--    <div class="clear"></div>-->
</div>
<div class="her">
 
</div>
</body>
</html>

清除浮动

 清除悬浮属性
设置的float的属性，只会影响自己块状元素，不会影响其他块状元素
clear: left;左边不能有浮动元素
clear: right;右边不能有浮动元素
clear: both; 两边都不能有浮动元素

position定位

 position属性（重要）
 
1. 相对定位 
 
参数 relative，position: relative;
相对定位，在正常的的文档流中，可以使用正常的left、right、top、bottom 进行调整
 
相对定位：
按照自己的位置进行偏移，下面的元素不会进行补位（只会空出来）
 
2.绝对定位
参数  absolute，position:  absolute;
 
绝对定位，脱离正常文档流，可以使用正常的left、right、top、bottom 进行调整，只能根据最近的父级模块 进行绝对的定位调整
父级相对定位，子级绝对定位，两个模块进行覆盖
 
绝对定位：
它会按照自己的父级定位进行移动，如果父级没有定位，那么他就会按照body进行移动，并且，下面的元素块会进行补（占据原先它的位置）
 
3.固定定位
参数 fixed，position: fixed;
完全脱离文档流，参照物窗口
 
固定定位与绝对定位有点相似，但是固定定位是使用left、right、top、bottom属性相对于整个浏览器的窗口进行定位，而不再相对于某个HTML页面元素了，所以当元素使用了固定定位以后，就算页面的滚动条滚动了，固定定位的元素也不会变化位置。也就是说固定定位是相对于窗口的定位，不受文档流的影响了。
 
固定定位：
按照窗口进行定位,根据上下左右设置与窗口的距离.(固定不动)

相对定位

 设置了position:relative
可以使用top left  right bottom 对盒子进行移动
简单微调元素的位置
	1.不脱离标准文档流，可以调整元素
	2.移动的参考点，是当前盒子原来的位置进行参考进行移动(自己原来的位置)
	重点：移动的位置按照原位置最为参照 进行top left...
案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        width: 200px;
        height: 200px;
    }
    .x1{
        background-color: #747070;
        position: relative;
        left: 100px;
        bottom:100px;
    }
    .x2{
        background-color: red;
    }
    .x3{
        background-color: blue;
    }
</style>
<body>
<div class="x1">1</div>
<div class="x2">2</div>
<div class="x3">3</div>
</body>
</html>

绝对定位

 position:absolute
可以使用top left  right bottom 对盒子进行移动
特定：
	1.脱离了标准的文档流，不在页面上占位置，与float类似，没有文本环绕的效果
	2.存在压盖现象，层级提高，覆盖其他盒子
参考点：
	单独给盒子设置绝对定位，会根据跟body元素为参考点
	以父盒子位置为参考点
	相对定位于最近的static祖先元素定位，如果没有非static祖先元素，那么以跟页面元素左上角进行定位
 
按照子绝对定位，父相对定位(不脱离文档流)，让子元素根据父元素进行调整
 
 
 
重点:
	1.脱离标准文档流 与浮动相似
	2.使用top left的标准按照 当前绝对定位的父盒子作为标准(如果没有父盒子就会以body作为top0移动)
 
子绝对 父相对 可以实现盒子的剧中垂直显示
 
 
子绝对 父相对 案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    form {
        width: 500px;
        height: 50px;
        /*父相对定位*/
        position: relative;
        background-color: #111515;
    }
    input{
        height: 100%;
        width: 100%;
    }
    div .wb{
        /*子绝对定位*/
        position: absolute;
        top: 16px;
        right: 45px;
    }
    div .wb .span1{
        background-color: blue;
    }
    div .wb .span2{
        background-color: red;
    }
    div .wb span:hover{
        cursor: pointer;
        background-color: #111515;
    }
 
</style>
<body>
<div>
    <form action="">
        <input type="text">
        <div class="wb">
            <span class="span1">小米9</span>
            <span class="span2">小米10</span>
        </div>
    </form>
</div>
</body>
</html>

固定定位

 position:fixed
可以使用top left  right bottom 对盒子进行移动
特点：
	1.脱离固定文档流
	2.一旦设置固定定位，在页面中进行滚动，位置永远不会变化
参考点：
	按照浏览器的左上角范围为参考点，也可以理解为按照html(跟参考点
 
例如： 这个盒子就永远不会变化
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        background-color: red;
        width: 100px;
        height: 100px;
        position: fixed;
        top: 0;
        right: 0;
    }
</style>
<body>
    <div>我就固定在这里不动了</div>
 
</body>
</html>

侧边栏固定案例

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定导航栏</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .site-ber ul li{
            height: 50px;
            width: 50px;
            padding-bottom: 5px;
        }
        img{
            height: 100%;
            width: 100%;
        }
        .site-ber{
            position: fixed;
            width: 50px;
            border: 1px solid red;
            bottom: 150px;
            right: 0;
            margin-right: 10px;
 
        }
    </style>
</head>
<body style="height: 2000px">
    <div class="site-ber">
        <ul>
            <li>
                <a href="">
                    <img src="" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="" alt="">
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

浮动和定位对行内元素的影响

 对行内元素设置了浮动，是可以设置宽高的，当前行内元素就脱离的标准文档流
与 display: block; 还是有区别的 这个是设置变为块级元素
 
设置定位
 position:absolute; 绝对定位
 position:fixed; 固定定位
 脱离了标准文档流，可以设置宽高

z-index层级属性

 默认出现压盖现象时
z-index:auto; 只能用于定位元素上，可以进行设置值越大就会压盖越小的
z-index:正整数 越大就会压盖越小的
 
z-idnex 比较的是父级，父级牛逼 儿子就牛逼，不管儿子大小
 
注意：
	1.z-index只能使用在定位上面
	2.如果父级存在z-index 就会按照父级的进行对比，不管内部子级是否存在这个属性
	以父级的为基准
 
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .a {
        position: relative;
        height: 100px;
        width: 100px;
        background-color: #747070;
        border: 1px solid aliceblue;
        z-index: 1;
    }
 
    .b {
        position: relative;
        height: 100px;
        width: 100px;
        background-color: red;
        border: 1px solid aliceblue;
        top: -30px;
        left: 50px;
        z-index: 10;
 
    }
 
    .c {
        position: relative;
        height: 100px;
        width: 100px;
        background-color: peru;
        border: 1px solid aliceblue;
        top: -50px;
        left: 100px;
        z-index: 20;
    }
</style>
<body>
<div style="position:relative;z-index: 30">
    <div class="a">1</div>
</div>
<div style="position:relative;z-index: 10">
    <div class="b">2</div>
</div>
<div style="position:relative;z-index: 5;">
    <div class="c">3</div>
</div>
 
</body>
</html>

css背景属性

 最常用的背景属性
background-color
可以按照直接设置颜色 yellow
可以按照RGB模式 rgb(255,0,0)
可以按照16进制设置  #00ff00
可以按照RGBA模式 rgba(255,255,255,0.5) # 最后一个参数为颜色的透明程度0.1(100%透明)-1(不透明)
 
设置背景图片 默认使用平铺状态
background-image: url("图片路径")
background-repeat: repeat; 默认情况下 平铺方式
background-repeat: no-repeat; # 设置不平铺
background-repeat: repeat-x; 横向平铺 左右
background-repeat: repeat-y; 纵向平铺 上下
 
背景图片定位
 background-position: 500px 0;
对应的关键字
center 中间  top 上 left 左 right 右 bottom 下
将背景图片至于中间的位置
 background-position: center center
 
百分比
0% 50% 100% 
 background-position:50% 50%
 
还可以使用px 
 
水平百分比计算:
	容器的百分比-背景图片的百分比
 
控制背景图的缩放比例
1.宽度
2.高度
background-size: 24px 597px;

background-image背景图案例

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <STYLE>
        .bg{
            background-image: url("788899989..webp");
            height: 1125px;
            width:100%;
            background-repeat: no-repeat;
            background-position: center top;
        }
    </STYLE>
</head>
<body>
<div class="bg">1</div>
</body>
</html>

css sprite 雪碧图技术

 是什么：
	他是一种图像的拼接合并技术
	将多个小图标和背景图片合并在一张图片上
	利用css的背景定位来显示需要显示的图片部分
	
1.静态图片，不随用户信息变化而变化
2.小图片, 图片比较小(2-3kb)
3.加载比较大
 
优点：
	1.有效减少http请求数量
		因为之请求了一张大的图片，从大的图片中切割小的图片
	2.加速内容的显示
	
通过css 背景图属性的background-position 来控制雪碧图的显示
 
好多小图片整合到一张大图中，从大图中进行裁剪下来需要的小图
 
案例：
根据一整张大图进行 x y 进行切割 
x 就是 当前图片的顶部位置
y 就是 当前图片的下面的位置
也就是使用 background-position 将位置裁剪出来，而显示的内容就是当前选选中图片的大小
在一张大图中，切割小图进行显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <STYLE>
        .bg1{
            background-image: url("雪碧图.png");
            height: 40px;
            width: 24px;
            background-repeat: no-repeat;
            background-position: 0 0; 就是第一张图
        }
        .bg2{
            background-image: url("雪碧图.png");
            height: 40px;
            width: 24px;
            background-repeat: no-repeat;
            background-position: 0 -40px;  就是第二张图片
        }
        .bg3{
            background-image: url("雪碧图.png");
            height: 40px;
            width: 24px;
            background-repeat: no-repeat;
            background-position: 0 -80px;
        }
        .bg4{
            background-image: url("雪碧图.png");
            height: 40px;
            width: 24px;
            background-repeat: no-repeat;
            background-position: 0 -120px;
        }
    </STYLE>
</head>
<body>
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
<div class="bg4"></div>
</body>
</html>

淘包列表导航案例

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            list-style: none;
            padding: 0;
            margin: 0;
            text-decoration: none;
        }
 
        .tobao_list {
            float: left;
            border-top: 1px solid #f4f4f4;
        }
 
        .tobao_list ul {
            width: 292px;
            overflow: hidden;
        }
 
        .tobao_list ul li {
            float: left;
            width: 71px;
            height: 75px;
            border: 1px solid #f4f4f4;
            /*清除覆盖的线的颜色，设置为透明色 transparent*/
            border-top-color: transparent;
            border-left-color: transparent;
        }
 
        .tobao_list ul li a {
            text-align: center;
            display: block;
            /*设置字体粗细*/
            font-weight: 75;
            /*设置字体大小*/
            font-size: 12px;
            /*line-height: 75px;*/
            color: #888;
        }
 
        .tobao_list ul li span {
            width: 24px;
            height: 24px;
            background-image: url("雪碧图1.png");
            background-position: 0 0;
            background-repeat: no-repeat;
            display: inline-block;
            margin-top: 12px;
        }
 
        .tobao_list ul li .span1 {
            background-position: 0 0;
        }
 
        .tobao_list ul li .span2 {
            background-position: 0 -44px;
        }
 
        .tobao_list ul li .span3 {
            background-position: 0 -88px;
        }
        /*只需要进行修改 background-position 进行切图就行*/
    </style>
</head>
<body>
<div class="tobao_list">
    <ul>
        <li style="border-left:none">
            <a href="">
                <span class="span1"></span>
                <p>充话费</p>
            </a>
        </li>
        <li>
            <a href="">
                <span class="span2"></span>
                <p>充话费</p>
            </a>
        </li>
        <li>
            <a href="">
                <span class="span3"></span>
                <p>充话费</p>
            </a>
        </li>
        <li style="border-right:none">
            <a href="">
                <span class="span4"></span>
                <p>充话费</p>
            </a>
        </li>
        <li style="border-left:none">
            <a href="">
                <span class="span5"></span>
                <p>充话费</p>
            </a>
        </li>
        <li>
            <a href="">
                <span class="span6"></span>
                <p>充话费</p>
            </a>
        </li>
        <li>
            <a href="">
                <span class="span7"></span>
                <p>充话费</p>
            </a>
        </li>
        <li style="border-right:none">
            <a href="">
                <span class="span8"></span>
                <p>充话费</p>
            </a>
        </li>
        <li style="border-left:none">
            <a href="">
                <span class="span9"></span>
                <p>充话费</p>
            </a>
        </li>
        <li>
            <a href="">
                <span class="span10"></span>
                <p>充话费</p>
            </a>
        </li>
        <li>
            <a href="">
                <span class="span11"></span>
                <p>充话费</p>
            </a>
        </li>
        <li style="border-right:none">
            <a href="">
                <span class="span12"></span>
                <p>充话费</p>
            </a>
        </li>
    </ul>
</div>
</body>
</html>

页面上制作圆的效果盒子角弧度效果

 使用属性
radius ： 中文弧形
border-radius:20px; 将盒子的4个脚全部设置为20px的弧度
 
border-radius:10px  50px ; 对角设置弧度 10px负责第一个脚  50px 第二个脚
 
border-radius:10px  50px  80px 100px; 分别设置4个脚不一样的弧度

网页中阴影效果

             /*
            单位为px
            第一个值是水平偏移方向
            正值水平方向的正方向 右
            负值水平方向的负方向 左
            负 --------- 正
            第二个值垂直偏移方向
            上 负值
            下 正值
            这两个值主要作用调整阴影的角度和位置
            第三个值是阴影的模糊程度
            第4个值 是阴影的颜色
            第5个值 设置内射阴影，阴影在内部，凹凸  inset
             */
            box-shadow: 10px 10px  5px #5f5a5a;
 
 
可以实现一个效果，当鼠标悬浮时，会出现一个向上移动并且出现阴影的悬浮效果
案例：鼠标悬浮 盒子移动出现阴影效果 和小米商城的相似
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <STYLE>
        .y{
            /*相对定位*/
            position: relative;
            height: 200px;
            width: 200px;
            background-color: #888888;
            /*box-shadow: 10px 10px  5px #5f5a5a;*/
 
        }
        .y:hover{
            top: -3px;
            z-index: 2;
            box-shadow: 0 10px  5px #e0e0e0;
            -webkit-transition: all .3s linear; /*渐变*/
            transition: all .3s linear; /*过度效果*/
            /*transform: translate3d(0, -2px, 0); !*语法 translate3d(tx, ty, tz)*!*/
            /*
            translate3d css 函数
            3d效果
            tx
            其 <length> (en-US) 代表平移向量的橫坐標。
 
            ty
            其 <length> (en-US) 代表平移向量的縱坐標
 
            tz
            其 <length> (en-US) 代表平移向量的 z 分量
            */
        }
    </STYLE>
</head>
<body>
<div class="y"></div>
</body>
</html>

布局

单列

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         html,body{
             margin: 0;
             height: 100%;
         }
         /*头部 主体 脚部 的主要显示内容并且居中显示 父级标签占据页面的100% 子级只占用1200 并且居中*/
         .container{
             width: 1200px; /*宽度1200px*/
             margin: 0 auto; /*居中显示*/
         }
         .header{
             width: 100%; /*占据整个网站的100%宽度*/
             height: 60px; /*固定显示60 高度*/
             line-height: 60px;
             text-align: center;
             background-color: #000;
         }
         .header .container{ /*头部的显示内容 设置高度与父级高度一致 设置背景颜色*/
             height: 60px;
             background-color: orange;
         }
         .wrap{
             width: 100%;
             height: 100%;
         }
         .wrap .container{
             height: 100%;
             background-color: red;
         }
         .footer{
             width: 100%;
         }
         .footer .container{
             height: 100px;
             background-color: #888888;
         }
    </style>
</head>
<body>
<!--头部-->
<div class="header">
    <div class="container">头部主要显示内容</div>
</div>
<!--主体内容-->
<div class="wrap">
    <div class="container">主体主要显示内容</div>
</div>
<!--脚部内容-->
<div class="footer">
    <div class="container">脚注主要显示内容</div>
</div>
</body>
</html>

多列

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            margin: 0;
            height: 100%;
        }
        /*头部 主体 脚部 的主要显示内容并且居中显示 父级标签占据页面的100% 子级只占用1200 并且居中*/
        .container{
            width: 1200px; /*宽度1200px*/
            margin: 0 auto; /*居中显示*/
        }
        .header{
            width: 100%; /*占据整个网站的100%宽度*/
            height: 60px; /*固定显示60 高度*/
            line-height: 60px;
            text-align: center;
            background-color: #000;
        }
        .header .container{ /*头部的显示内容 设置高度与父级高度一致 设置背景颜色*/
            height: 60px;
            background-color: orange;
        }
        .wrap{
            width: 100%;
            height: 100%;
        }
        .wrap .container{
            height: 100%;
            background-color: red;
        }
        .footer{
            width: 100%;
        }
        .footer .container{
            height: 100px;
            background-color: #888888;
        }
 
        /*多列布局主要是在主体内容上面进行多个块区域*/
        /*左区域*/
        .wrap .container .left{
            width: 15%;
            height: 100%;
            float: left; /*因为父类存在高度，就不存在父级塌陷问题 不需要设置清除浮动问题*/
            background-color: blue;
        }
        .wrap .container .right{
            width: 15%;
            height: 100%;
            float: right;
            background-color: rebeccapurple;
        }
        .wrap .container .center{
            height: 100%;
            background-color: lavender;
            /*与左右存在一点距离*/
            margin: 0 190px;
        }
    </style>
</head>
<body>
<!--头部-->
<div class="header">
    <div class="container">头部主要显示内容</div>
</div>
<!--主体内容-->
<div class="wrap">
    <div class="container">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="center">中</div>
    </div>
</div>
<!--脚部内容-->
<div class="footer">
    <div class="container">脚注主要显示内容</div>
</div>
</body>
</html>

网站注意事项

 1.命名规范
http://www.divcss5.com/jiqiao/j4.shtml#no3
 
2.目录规范
项目名
	css 样式文件
	fonts 第三方图标
	images 图片
	js js脚本文件
	index.html 出口文件
	
3.确定错误的位置

网页元素中的居中问题

行内元素居中

 方式1 
设置 text-align: center; 使文本进行水平居中
设置 行高 line-height = 盒子的高度 使用文本垂直居中
两个组合就是水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            color: #e0e0e0;
            text-align: center; /*水平居中*/
            line-height: 200px; /*如果进行垂直居中，需要设置行高等于盒子的高度 达到垂直居中*/
        }
    </style>
</head>
<body>
<div class="box">
    <span>123</span>
</div>
</body>
</html>
 
 
方式2 
将元素设置为  display: table-cell; 表格
在使用 属性vertical-align: middle; 设置垂直居中
这是一个表格元素属性 默认table 的vertical-align: middle
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            color: #e0e0e0;
            /*单元格默认时垂直居中的状态*/
            display: table-cell; /*将标签设置为一个单元格*/
            vertical-align: middle; /*设置属性 变为垂直居中 */
            text-align: center; /*水平居中*/
        }
    </style>
</head>
<body>
<div class="box">
    <span>123</span>
</div>
</body>
</html>

块级元素水平居中显示

 水平居中  margin: auto;
 
 
1.使用子绝对 父相对 + margin 进行水平垂直居中显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            background-color: black;
            height: 200px;
            width: 200px;
            position: relative;
        }
        .child{
            position: absolute;
            background-color: #888888;
            height: 100px;
            width: 100px;
            margin: auto;
            将上下左右 4个属性设置为0 系统自动计算
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="child"></div>
</div>
</body>
</html>
 
 
方式2 
将父的属性设置为 table-cell table单元格标签类型
在设置独有的属性  vertical-align: middle; 达到垂直居中
 
将子元素设置为 行内块元素  可以使用text-align: center; 就可以达到水平居中
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            background-color: black;
            height: 200px;
            width: 200px;
            /*内部的盒子垂直居中显示*/
            display: table-cell;
            vertical-align: middle;
            /*设置行内内容居中，必须是行内元素，所以需要将子设置为行内块*/
            text-align: center;
        }
        .child{
            /*如果单纯设置行内元素 高度和宽度不起作用 所以使用行内块元素*/
            display: inline-block;
            height: 100px;
            width: 100px;
            background-color: #888888;
        }
 
    </style>
</head>
<body>
<div class="box">
    <div class="child"></div>
</div>
</body>
</html>
 
 
3.使用子绝父相 纯计算
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            background-color: black;
            height: 200px;
            width: 200px;
            position: relative;
 
        }
        .child{
            position: absolute;
            height: 100px;
            width: 100px;
            background-color: #888888;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
        /*纯计算*/
    </style>
</head>
<body>
<div class="box">
    <div class="child"></div>
</div>
</body>
</html>

补充

 overflow: hidden; /*超出内容隐藏*/
white-space: nowrap; /*超出字体不让换行*/
text-overflow: ellipsis; /*字体超出部分省略号显示*/
 
/*清除浮动属性*/
.clearfix::after {
    content: '';
    clear: both;
    display: block;
}
 
/*清除样式*/
*{
    padding: 0;
    margin: 0;
    text-decoration:none;
    list-style: none;
}
input{
    border: none;
    outline: none;
}

图标库

 https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
 
清除塌陷和间距调整没效果的最好方式就是 给设置高度，哪里存在浮动，那么就对那个位置的父设置高度

JavaScript

JavaScript引入方式

 1 直接编写
    <script>
        console.log('hello yuan')
    </script>
2 导入文件
    <script src="文件路径"></script>

JavaScript声明变量

 全局变量声明
var 变量名=变量参数
 
局部变量声明
let 变量名=变量参数
 
var x = 30; // 变量初始化
var y;  // 空容器 声明变量
y = 50 // 将50赋值给y 变量赋值

 注释
// 单行注释
 
/**/多行注释

JavaScript的数据类型

 变量类型
	基本数据类型
	Number String Boolean undefined null
	var a = 1  数值类型
    var b = '1' or "1" 字符串类型
    var c = ture 布尔类型 0 1  true false
    var d = undefined; 没有被定义的变量就是undefined 只声明
    var e = null ; 空的值
	复杂数据类型
    object array function
 
typeof 查看变量的类型

字符串string

 字符串定义
 
var 变量名="变量值"
 
字符串的内置函数
1.获取长度
变量.length
 
2.字符串的大小写
变量.toLowerCase()  小写
变量.toUpperCase() 大写
 
3.根据索引值获取 索引
变量.indexOf("字符串")
 
4.根据索引获取值
变量2=变量1["索引"]
 
5.字符串分割
变量 = 变量.split("分割符号")
 
6.字符串切片（取头不去尾）
1.起始位置 2.结束位置
str.slice(int,int)
str.substring(int,int)
 
7.字符串截断方法（取范围内的全部数值）
1.起始位置 2.从起始位置返回字符个数
str.substr(int,int)
 
8.清除字符串前后空格
str.tirm()
 
9.查找字符串的索引位置
从 0索引找
str.indexOf('字符串中的字符','从那个字符位置到int') // 返回字符串的索引位置
从末索引找
str.lastIndexOf('字符串中的字符','从那个字符位置到int') // 返回字符串的索引位置
 
10.获取指定的字符串的位置的字符
str.charAt(index) // 返回当前index的对应的字符
str.charCodeAt(index) // 获取index位置指定字符的编码 
 
注意：
// 字符串转义
a = " i 'm \"666\""
 
// 字符串拼接
a = '666'
b = '8888'
a + b = '666 8888'
 
// 数字和字符串转换
a = 'wkx' + 555 // 浏览器会将555隐式转换为字符串，进行字符串拼接 (数值转字符串隐式转换)
 
b = '18' + '40' // 结果1840 浏览器不会将字符串数值 转换数值
 
字符串转数值(必须是整数类型的数值)
    var b = '18'
    console.log(typeof Number(b))
 
整数转字符串
	var a = 18
    console.log(typeof String(a))
	console.log(typeof a.toString())
 
在字符串转换为整数时
	var a = '66ssswx'
    console.log(Number(a)) // 结果 NaN not a number 数值运算结果的错误体现
 
//字符串与数值的转换
var num = '102255.2122'
console.log(parseFloat(num)) // 将字符串保留整数和小数部分
console.log(parseInt(num)) // 将字符串转为整数，提取整数部分，如果解析的不是数值就停止解析
console.log(Number(num)) // 强制转换，如果带有不是数字 显示nen
console.log(isNaN(num)) // 判断是不是nen 返回false or ture
 
// 数值转换字符串
var num = 1235.22
// 强制转换
console.log(num.toString())
console.log(String(num))
// 隐式转换
console.log(''+num)
console.log(''.concat(num))
// 将整数转为字符串，指定小数位的个数，四舍五入
console.log(num.toFixed(2))

数组arr

 数组是从0开始的
数组是[]
数组：['1','1','2'] 1维数组 , [1,2,3,[1,2]] 2维数组
 
获取数组的元素
a = ['1','1','2']
a[0] // 结果1
 
// 内部方法(重点)
 
 
var arr = [1,2,3,4]  // 创建数组
 
// 使用js提供的构造函数
var arr = new Array()
 
// 给第0个索引存放值
arr[0] = 10
 
// 查看数组长度
arr.length
 
//判断是不是数组
Array.isArray(arr) //是返回tuer 不是返回false
 
// 数组转换字符串
arr.toString()
arr.toLocaleString()
 
// 数组分割字符串
arr.join('分割符号') // 将数组中的值进行分割，按照分割符号进行拼接 返回字符串
 
//数组的栈方法 后进先出 只对栈中的顶部元素启作用
// 末尾元素要不被删除要不被添加
len = arr.push('添加的元素')  // 将元素添加到数组的末位，获取返回值数组长度
last = arr.pop() // 删除末尾的元素 返回删除数组的内容
 
// 队列 先进先出 只数组中的第一个元素启作用
// 第一个元素要不被删除要不被添加
len = arr.unshift('添加元素') // 将元素添加到数组的第一个元素，获取数据的长度
last = arr.shift() // 删除元素的第一个元素，返回删除的元素
 
//数组的排序
arr.reverse() // 将数组进行倒叙
arr.sort()  // 默认 升序，内部逻辑调用toString()，转为字符串，调用ask码
 
function compare(a, b) {
if (a < b) {
            return -1 // a 在 b 之前
   } else if (a > b) {
            return 1
   } else {
            return 0
    }
}
arr.sort(compare) //内部可以传入一个函数 ,会将两个值进行对比
 
// 操作数据的方式
1.concat('可以传入多个值或者参数') 数组的合并，返回一个新的值
arr1 = [1,2,3]
arr2 = arr1.concat('4') // 如果是一个元素或者对象，那么就会将元素添加到arr1中末尾
结果:[1,2,3,4]
如果添加的是一个数组,那么会将被添加的数组中的元素追加到添加的数组中，生成一个新数组
arr2 = arr1.concat([10,12])
结果:[1,2,3,10,12]
 
2.slice(start,stop) 返回一个新的数组接收两个值启开始到结束的内容
顾头不顾尾,返回一个新数组
arr = [1,2,3]
arr1 = arr.slice(1,2) // 结果[2]
 
3.splice() // 可以删除 替换 插入
splice() 需要传入3个参数 开始 结束 插入的值(可以添加多个)
删除功能
arr = [1,2,3]
arr.splice(0,1)  // 结果就是[2,3] 顾头不顾尾
 
插入功能，使用插入功能，需要将 结束参数为0代表不删除元素
arr = [1,2,3]
在数组的第0个元素插入一个666
arr.splice(0,0,'666') // 结果就是['666', 1, 2, 3]
 
删除元素
先删除，后添加
arr = [1,2,3]
删除第0个元素添加一个666
arr.splice(0,1,'666') // 结果就是['666', 2, 3]
 
 
// 数组的位置方法
indexOf('查询元素','从哪里开始查询的位置') 和 lastIndexOf('查询元素','从哪里开始查询的位置')
arr = ['wkx','66','heihi']
idnex = arr.indexOf('wkx') // 返回查询到元素的索引 从0开始
index = arr.lastIndexOf('wkx') // 返回查找元素的索引 从末尾开始
 
如果查询不到返回-1
 
// 数组的迭代方法
1.filter()
filter('内部传入函数') 过滤方法，对数组的每一项进行遍历过滤
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9] // 过滤掉小于5的参数
案例：
filterres =  arr.filter((item, index, array) => { // 返回一个新数组
// item 当前循环元素
// index 是当前循环元素的数组索引位置
// array 当前的原数组
    return item > 5 // 将大于5的参数全部留下
})
console.log(filterres) 结果[6, 7, 8, 9]
 
2.map()
map('内部传入函数') 对数组进行每个值的操作，对数组的每一项进行遍历操作
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9] // 对每个值进行*2
案例：
mapres =  arr.filter((item, index, array) => { // 返回一个新数组
// item 当前循环元素
// index 是当前循环元素的数组索引位置
// array 当前的原数组
    return item * 2 // 对数组的每个值进行操作
})
console.log(mapres) 结果[2, 4, 6, 8, 10, 12, 14, 16, 18]
 
3.forEach('传入一个函数') // 对数组的循环，与for一样
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9] 
arr.forEach((item, index, array) => { 
        // item 当前循环元素
        // index 是当前循环元素的数组索引位置
        // array 当前的原数组
        console.log(item) // 循环每个当前元素
})

对象object

 var person = {
    name:'wkx',
    age: 18,
    fav:function(){
        console.log('1')
    }
}
 
获取值
person.name
修改值
person.name = 新值

布尔值

 var 变量=false  假
var 变量=true   真

空值

 var 变量=unescape   
var 变量=null

类型转换

 转换为数值型
a = “100件”
a = “100”
parseInt(a) 可以转换
 
转换浮点型
a = 3.14  可以转换
a = 3.1.4  不可以转换
parseFloat(a) 转换后小数点 后一位
 
字符串转换
a = 100
toString(a)
 
布尔值转换
Boolean(4>5) false
Boolean(5>4)  true
 
一切皆对象 ，只有空的数据和数值0位false
 
暗转换
 
相加时 优先字符串拼接，在做加减
相减时 优先对数值相减，在对字符串操作

引用值和原始值(概念)

 根据数据类型不同，有的变量储存在栈中，有的储存在堆中。
 
 
原始变量及他们的值储存在栈中，当把一个原始变量传递给另一个原始变量时，是把一个栈房间的东西复制到另一个栈房间，且这两个原始变量互不影响。
 
 
引用值是把 引用变量的名称储存在栈中，但是把其实际对象储存在堆中，且存在一个指针由变量名指向储存在堆中的实际对象，当把引用对象传递给另一个变量时，复制的其实是指向实际对象的指针， 此时 两者指向的 是同一个数据，若通过方法改变其中一个变量的值，则访问另一个变量时，其值也会随之加以改变；但若不是通过方法 而是通过 重新赋值 此时 相当于 重新开了一个房间 该值的原指针改变 ，则另外一个 值不会随他的改变而改变。

JavaScript的运算符

 算术运算符
+   数值相加
-   数值相减
*   数值相乘
/   数值相除
%   数值求余
**  数值求幂
a++ 数值后自增1   a=a+1
++a 数值前自增1   a=a+1
b-- 数值后自减1   b=b-1
--b 数值前自减1   b=b-1
   
   
赋值运算符
=
+=
-=
*=
/=
%=
**=
 
 
比较运算符,比较的结果要么是true, 要么是false
>   大于
<   小于
>=  大于或者等于
<=  小于或者等于
!=  不等于[计算数值]
==  等于[计算]
!== 不全等[不仅判断数值,还会判断类型是否一致]
=== 全等[不仅判断数值,还会判断类型是否一致]
 
 
逻辑运算符
&&   并且  and    两边的运算结果为true,最终结果才是true
||   或者  or     两边的运算结果为false,最终结果才是false
!    非    not    运算符的结果如果是true,则最终结果false ,反之亦然
 
 
逻辑运算符进阶用法:
1. 实现短路
var a = false || 2      >>> a = 2
var a = true && "hehe"  >>>  a = "hehe"
     
2. 快速布尔化[把数据快速转换成布尔类型]
var a = 100
!!a  >>> true
 
 
条件运算符[三目运算符]
格式： 
变量 = 条件?"条件成功返回给变量":"条件失败返回给变量"
 
条件?true:false
例如:
var age = 12;
var ret = age>=18?"成年":"未成年"; 
 
相当于 python中的"成年" if age >= 18 else "未成年"

JavaScript三元运算

 条件比较 ? '条件为真' : '条件为假';
 
案例
var res = 1 === 2 ? '这个是真的' : '这个是个假的' // 结果：假的

JavaScript的条件控制语句

 ******* if else 语句 ******
if(条件1){
	// 条件成立执行
} else if(条件2){
	// 条件成立执行
}else{
	// 条件不成立执行
}
案例：
    var distance = 10;
    var nowDistance = 15;
    if (distance < nowDistance) {
        console.log('自动驾驶')
    } else {
        console.log('人为行驶')
    }
    
多条件案例
    var a = 10;
    if (a === 10){
        console.log('1')
    }else if (a < 10){
        console.log('2')
    }else {
        console.log('3')
    }
 
 
****** switch(开关) *******
// 相当于条件循环，只要比对成功，遇到break就会退出循环
// 如果不写break ，那么就会cash穿透，遇到下一个break才会停止循环
switch(num){
    case A值:
    	// 执行逻辑
    	break //条件通过直接结束
    case B值:
    	//执行逻辑
    	break
    default:
    	//上述条件都比较不通过
    	break
    .....
}
 
案例
var a = 10
    switch (a) {
        case 10:
            console.log(1)
            break
        case 11:
            console.log(2)
            break
    }

JavaScript的循环语句

 ******** for 循环 *********
// 知道初始条件和结束条件时
for(初始条件;结束条件;递增条件){
	执行内容
}
案例：
    var i = 1;
    var sum = 0;
    for (i = 1;i <=10;i++){
        sum += i
    }
    console.log(sum)
循环数组
 
for(;;){ // 死循环写法
   
}
break // 停止循环，不会向下走
continue // 跳出当前循序 开始下次循环
 
 
 
 
***** while 循环 ******
先判断，在执行
初始条件
while(判读循环的结束条件){
	
    递增条件
}
 
案例 计算基数的和
var i = 0;
var sum = 0;
while (i < 100) {
   if (i % 2) {
      sum += i
  }
   i++
}
    console.log(sum)
 
 
****** do - while 循环 ****** 
先执行，在判断
语法
do{
    先执行逻辑
}while(判读条件)
    
案例
var sum=0
var i=1
do {  // 先执行逻辑
     sum +=i
     i++
}while (i < =100) // 在进行判断
console.log(sum)

JavaScript的序列化

 json字符串解析成为js能识别的数据类型：反序列化。解析其他语言传入得数据结构：反序列化
var 接受变量 = JSON.parse("其他语言传入的json数据")
 
 
js数据类型转换为json字符串：序列化。将数据打包成为 json格式文件，传入其他语言中处理
var 接受变量 = JSON.stringify("需要转换json格式的数据")

JavaScript的时间对象

 date 日期对象 utc时间
无参数，就是当前的时间
var now= new Date() // 知道怎么创建就可以
console.log(now)
带参数 传入符合的字符串
var now= new Date('1995 13:30:00')
console.log(now)
传入数值
var now = new Date(1995,11,25)
console.log(now)
 
 
*** 日期对象常用方法 ***
var now= new Date()
console.log(now.getDate()) // 获取月份的第几天(1-31)
console.log(now.getMonth()) // 获取月份(0-11) 月份需要+1
console.log(now.getFullYear()) // 获取年份
console.log(now.getDay()) // 获取当天星期几(0-6) 0代表周天
console.log(now.getHours()) // 获取小时(0-23)
console.log(now.getMinutes()) // 获取分钟(0-59)
console.log(now.getSeconds()) // 获取秒(0-59)
 
*** 日期格式化 ****
// 星期几 月 日 年  Sat Aug 13 2022
console.log(now.toDateString()) 
// 时分秒 时区 15:06:09 GMT+0800 (中国标准时间)
console.log(now.toTimeString()) 
 
// 年月日 2022/8/13 常用
console.log(now.toLocaleDateString()) 
// 时分秒 15:07:07  常用
console.log(now.toLocaleTimeString()) 
// 年月日时分秒 2022/8/13 15:07:48  常用
console.log(now.toLocaleString()) 
 
 
// 国际utc时间 Sat, 13 Aug 2022 07:08:53 GMT
console.log(now.toUTCString())

JavaScript的math 数字对象

 1.取正数，负数转正数，正数不能转负数
Math.abs(-10000)
 
2.取小数的后几位 参数是几就去小数点几位，带有四舍五入
var num = 3.1415926
num.toFixed（5）
 
5.四舍五入
var num = 24.3
Math.ceil(num) // 将小数部分进1，无论小数是多少
Math.floor(num) // 只会保留当前整数不会四舍五入
Math.round(num) // 标准的四舍五入
 
6.取幂次方 参数1，参数2
Math.pow()
 
7.0-1随机取值 （取小数）
Math.random()
 
8.获取0-100的随机数
Math.random()*100
 
9.最大值最小值
console.log(Math.max(1,2,3,5,8)) // 最大值
console.log(Math.min(1,6,5,8,9,5)) // 最小值
 
10.循环取值
var arr = [6,2,5,87,69]
max = Math.max.apply(null,arr) // 相当于将每个值取出来进行对比
min = Math.min.apply(null,arr) // 相当于将每个值取出来进行对比
 
 
//Math的计算属性
console.log(Math.E)
console.log(Math.LN2)
console.log(Math.LN10)
console.log(Math.LOG2E)
console.log(Math.PI)
console.log(Math.SQRT2)
console.log(Math.SQRT1_2)

JavaScript的函数

 1.声明函数
 function 函数名（形参1，行参2）{
       函数体....（语句体）
       return 返回值
}
 
函数名（形参）  函数的调用
 
2.匿名函数
var 变量=function () {
            函数体
}
变量()   函数调用
 
匿名函数自执行
 (function (x,y) {
           console.log(x+y);
       })(2,3)
 
 
3.匿名函数的闭包
 function bar() {
	return function(){  //匿名函数当成返回值进行处理
         console.log("匿名函数")}}
bar()()  //调用匿名函数
 
 
4.关于返回值
return 没有书写返回值 默认返回 undefined
undefined 作用：1.变量未赋值，2.函数没有返回值
 
5.函数的参数
1.默认参数
例如：
function stu_info(name,gender="male"){
    console.log("姓名："+name+" 性别："+gender)
}
 
stu_info("yuan")
 
2.位置参数
例如
function add(a,b){
    console.log(a);
    console.log(b);
}
add(1,2)
 
3. 动态参数 arguments
例如:
function add(a,b){
        console.log(a+b);//3
        console.log(arguments.length);//2
        console.log(arguments);//[1,2]
    }
add(1,2)
 
 
6.函数的作用域
var a = 1; // 定义到全局中的变量 全局作用域变量
function func() {
        var b = 12; // 定义在函数内部的变量，局部作用域变量
        console.log(a)
}
func()
 
全局作用域污染
变量被覆盖 或者 函数被覆盖

window方法

global对象全局对象

 var url= 'http://baidu  .com'
// 编码
console.log(encodeURI(url)) // 识别空格进行编码
console.log(encodeURIComponent(url)) // 识别与斜杠编码
// 解码
console.log(decodeURI(encodeURI(url))) // 解码 空格
console.log(decodeURIComponent(encodeURIComponent(url))) // 解码 空格与斜杠
 
global = win对象(浏览器的顶层对象)

JavaScript的弹窗方法

 window弹窗方法
 
1.警告弹窗
window.alert(文本)
 
2.提示弹窗返回布尔值
 window.confirm("提示内容")  返回true/false根据布尔值进行下一步操作
 
3.用户输入弹窗
window.prompt("提示内容")  会跳出弹框，让用户输入，输入什么返回什么。没有输就返回null
 
4.跳转弹窗
window.open("访问地址")
 
5.弹窗关闭
window.close()

JavaScript的定时器方法window

 // 只执行一次
window.setTimeout(回调函数,毫秒)
window.setTimeout(()=>{
    console.log(1)
},2000) // 两秒后调用传入的函数
 
 
// 按照周期性执行
var a = window.setInterval(回调函数,毫秒) // 存在一个返回值
window.setInterval(()=>{
    console.log(1) // 每1秒打印一个1
},1000)
clearInterval(a) // 根据返回值 清除定时器

JavaScript的地址栏对象

 **** location对象 *****
    
console.log(window.location.host) // 获取ip 和端口
console.log(window.location.hostname) // 获取当前的ip地址
console.log(window.location.href) // 获取完整url，url已经被编译
console.log(window.location.pathname) // 获取端口号往后的目录
console.log(window.location.port) // 获取当前的端口号
console.log(window.location.protocol) // 获取当前的协议 http:
console.log(window.location.search) // 获取url查询的参数
 
**** 浏览器的位置操作 *****
location.href = 'https://www.baidu.com' // 跳转网址 或产生历史记录
location.replace('https://www.baidu.com') // 不会产生历史记录
location.reload() // 刷新网页
 
***** 检查浏览器插件navigator对象 ******
console.log(window.navigator.plugins) // 查看浏览器的插件
var arr = window.navigator.plugins // 对象
for(let i=0 ;i<arr.length;i++){
    console.log(arr[i].name) // 获取浏览器插件的name名称
}
 
****** 历史对象history ******
    
console.log(window.history)
window.history.go(0)  go = 0 刷新
window.history.go(1)  go = 1 表示前进1次
window.history.go(-1)  go = -1 表示后退1次

JavaScript的本地储存

 1.本地永久存储，可以在相同域名下进行共享（键值对的临时存储）
localStorage
//保存一个数据到存储对象
localStorage.setItem("变量名","变量值")
localStorage.变量名= 变量值
 
//获取存储对象
localStorage.setItem("变量名")
localStorage.变量名
 
//参数指定的存储对象
localStorage.removeItem("变量名")
//删除全部存储对象
localStorage.clear()
 
 
2.本地暂时存储
sessionStorage
//保存数据到存储对象
sessionStorage.setItem("变量名","变量值")
sessionStorage.变量名=变量值
 
//获取存储对象值
sessionStorage.setItem("变量名")
sessionStorage.变量名
 
//参数指定的存储对象
sessionStorage.removeItem("变量名")
//删除全部存储对象
sessionStorage.clear()

JavaScript的DOM

 dom：文档对象模型 document object model
js 对象3类：
1.自定制 var
2.内建 data对象..
3.宿主对象 win对象
 
model:事物的表示模型
 
****** 节点的3个属性 ******
nodeName: 节点的名字
nodeType: 节点的类型
nodeValue: 节点值
 
nodeName：
元素： 标签名想相同
属性: 与属性名相同
文本节点: #text
文档节点: #document
 
nodeValue:
元素: undefined or null
文本: 当前自己本身
属性: 属性值
 
nodeType:
元素 ： 1
属性 ： 2
文本 ： 3
注释 ： 8
文档 ： 9
 
例如：文本
标签与标签的空格 或者没有标签的文本(都属于文本，兼容问题)
nodeName: "#text"
nodeType: 3
nodeValue: "\n" 当前是一个空格(也就是标签和标签之间的空格是一个文本标签)
 
例如注释
nodeName: "#comment"
nodeType: 8
nodeValue: "注释中的内容" 当前是一个空格(也就是标签和标签之间的空格是一个文本标签)
 
// 文本与注释是没有用的，根据浏览器兼容的问题，显示出来的内容，要的只是当前网页中的元素

DOM节点查找

 1.id查找
document.getElementById("id值")
获取标签id的dom对象
 
2.class查找
document.getElementsByClassName("类名")
通过class对应的值查找（可能是一个，可能是多个）
多个是数组，数组的元素是dom对象
 
3.按照标签名查找
document.getElementsByTagName('标签')
 
3.通过父级找子级标签
1.根据索引查找子级标签
document.getElementsByClassName("类名")[0]   
父级标签的 数组对象 的第一个元素
 
2.根据索引查找子级标签
变量 = document.getElementsByClassName("类名")  父级
变量.getElementsByClassName("类型") 某个子级

DOM节点对象属性

 1.找到父级标签
节点.parentElement
 
2.找父级下面的全部子级标签
节点.parentElement.children
 
3.找到父级的第一个标签
节点.parentElement.firstElementChild
 
4.父级的最后一个子标签
节点.parentElement.lastElementChild
 
5.父级的第一个子级标签的下一个标签
节点.parentElement.nextElementSibling
 
6.找到父级标签的子标签的上一个标签
节点. parentElement.previousElementSibling
 
 
7.节点对象属性
<div>我是上一个兄弟</div>
<div id="father">
    <p>1</p>
    <p>2</p>
    <p>1</p>
</div>
<div>我是下一个兄弟</div>
 
var father = document.getElementById('father')
console.log(father.childNodes) // 获取当前标签下的全部字标签集合
console.log(father.firstChild) // 获取当前标签下的第一个字标签
console.log(father.lastChild) // 获取当前标签下的最后一个字标签
console.log(father.parentNode) // 获取当前标签的父级标签
console.log(father.nextSibling) // 获取当前标签的下一个同级标签
console.log(father.previousSibling) // 获取当前标签的上一个同级标签
 
会出现兼容问题:谷歌浏览器会出现将标签空格当做节点获取
 
封装方法 获取当前标签下面的全部字标签(剔除标签中的#text(空格兼容性问题))
function get_childNodes(father) {
    var nodes = father.childNodes
    var arr = [] // 保存已经获取的元素节点列表
    nodes.forEach((value, key, parent) => {
        if (value.nodeType === 1) { // 如果标签对象type = 1 那么当前就是正常的标签
            arr.push(value)
        }
    })
    return arr
}
console.log(get_childNodes(father))
 
 
封装方法 获取兄弟标签 下一个标签可以是空格 或者 注释需要过滤掉
function get_nextSibling(n) {
    var x = n.nextSibling
    while (x && x.nodeType != 1) {
        x = x.nextSibling
    }
    return x
}
 
console.log(get_nextSibling(father))

DOM的class找标签

 1.找一个符合条件的 .c1 .c2 .c3 和css的class一样
变量 = document.querySelector(".class属性的值 ")
变量 是一个dom对象
 
2.根据标签找到 找全部符合条件的 ul li
变量 = document.querySelectorAll("父标签 子标签")
变量 是一个符合条件的数组对象，内部的元素都是dom
 
 
<div class="c1"> </div>  找到一个标签
 
<ul>
	<li></li>
    <li></li>
    <li></li>
</ul>   找到3li 标签[li,li,li]

DOM的文本操作

 var ele = document.querySelector(".c1")   获取dom 对象
 
1.获取信息
ele.innerHTML 获取文本信息 赋值一些特殊标签
ele.innerText  获取文本信息
 
2.文本赋值
ele.innerHTML = “新文本”
ele.innerText="新文本"
 
 
<div class="c1">1231</div>

DOM的value的操作

 像input标签，select标签以及textarea标签是没有文本的，但是
1.input取值
 
显示内容由value属性决定
 
var ele = document.querySelector(".c1")  获取标签
 
res.value  取标签的value值
res.value="新内容" 重新赋值value
<input type="text" class="c1" value="holle，js">
 
 
2.select 下拉菜单取值
 
获取标签select 
var ele = document.querySelector("#il")
res.value 获取第一个value值
res.value="hebei" 赋值
 
获取button标签，绑定事件，当点击标签是将地址个value的值变换
document.querySelector(".but").onclick=function(){
	res.value="hebei"
}
<select name="" id="il">
    <option value="henan">河南</option>
    <option value="hebei">河北</option>
    <option value="hunan">湖南</option>
</select>
<button class="but">点击</button>
 
 
3.textarea大文本取值
获取标签
ele = document.querySelector("#i2")
ele.value 读取文本值
ele.value = "新文本"  赋值文本值
 
 
 
<textarea name="" id="i2" cols="30" rows="10" >12313</textarea>

DOM的css样式的操作

 var div = document.getElementById('box')
console.log(div.style) // 打印的样式对象
1.使用对象.style.进行设置
div.style.color = 'red' // 将对象字体设置为红色
 
2.使用setAttribute
div.setAttribute('class','样式标签')

DOM的标签内属性值操作

 变量.setAttribute("属性名","属性值")    自定义属性 键值对
变量.getAttribute("属性名")       获取自定义属性
变量.removeAttribute("属性名");   删除自定义属性
 
<div class="id" id="id">123</div>
var div = document.getElementById('id')
// getAttribute('标签对象中的名字')
 
// 获取标签中class属性的值  获取不到就是null
className = div.getAttribute('class') // 结果就是 id
 
// 给标签设置属性 setAttribute(属性名,属性值)
div.setAttribute('自定义','自定义') 
 
// 删除自定义属性值
div.removeAttribute("自定义名")

DOM的 class的操作增删改查

 .c2{
color：red；
}
 
1.获取标签
ele =  document.querySelector(".c1")
 
2.给div添加一个样式
ele.classList.add("c2")  字体变为红
 
3.删除一个样式
ele.classList.remove("c2")  字体恢复
 
4.取当前的class的值
ele.className   查看 class的值都有什么
 
<div class="c1" > adsa1d32131</div>

DOM的节点操作

 <div id="box">
    <div id="box2">666</div>
</div>
var div = document.getElementById('box')
var div2 = document.getElementById('box2')
 
//1. 对象.innerHTML = '插入的标签或者文本' 对象.innerText='只能插入文本'
// 插入的内容就存在于当前标签对象的下面
div.innerText = '我是文本' // 只能插入文本
div.innerHTML = '<p>66</p>' // 可以插入文本和标签
 
 
// 2. 创建标签 使用document.createElement('什么样式的标签')
var p = document.createElement('p') // 创建一个p标签
var a = document.createElement('a') // 创建一个a标签
var h2 = document.createElement('h2') // 创建一个h2标签
 
// 3.插入创建的标签 标签对象.appendChild(插入的标签对象)
// 将创建的标签添加到当前对象的标签下面
div.appendChild(p) // 传入尾部
//对象.insertBefore(新插入节点,参考节点)
div.insertBefore(a, div2) // 新插入节点，会在插入到参考节点之前
 
// 4.创建文本对象(只是一个文本，没有标签包裹) document.createTextNode(文本内容)
var text = document.createTextNode('666')
 
// 5.删除节点 父对象.removeChild(子对象)
// 删除当前 父对象下的子对象
div.removeChild(div2)
 
// 6.替换标签 替换父级标签的子标签
// 对象.replaceChild(替换的新标签对象,被替换的旧标签对象)
div.replaceChild(h2,div2)
 
// 对于创建的标签，需要进行释放，因为一直存储在内存中
// 对于释放对象在执行之后
p = null

DOM的事件

 1.onclick 点击事件
例如：
<div id="box" onclick="func(this)">点击</div>
function func(thiss) {
    // 点击时，this就是当前的对象
    console.log(thiss)
}
 
2.onmouseover 和onmouseout 这两个事件一起用
onmouseover 鼠标经过事件
onmouseout 鼠标离开事件
例如：
var div = document.getElementById('box')
div.onmouseover =()=>{ // 经过字体变为绿色
    div.style.color = 'green'
}
div.onmouseout = ()=>{ // 离开变为红色
    div.style.color = 'red'
}
 
3.onchange onselect
onchange 文本框内容改变事件(原内容改变,回车确认才会被触发)
onselect 文本框内容被选中事件(只有内容被选中的了才会触发，点击不会)
oninput 当原内容被改变,就会触发(实时触发,只要改变的内容与原内容不同就会触发)
例如：
<input type="text" id="users" value="111">
<textarea cols="30" rows="10" id="user">
    请输入个人简介，字数不少于200字
</textarea>
var input = document.getElementById('user')
var inputs = document.getElementById('users')
input.onselect = ()=>{
    console.log('内容被选中')
}
inputs.onchange = ()=>{
    console.log('内容改变')
}
inputs.oninput = ()=>{
    console.log(inputs.value) // 实时获取内容进行打印
    console.log('实时改变')
}
 
4.onfocus onblur
onfocus 光标聚集事件
onblur 光标失去焦点事件
例如：
<input type="text" id="user">
var input = document.getElementById('user')
input.onfocus = ()=>{
    console.log('你的鼠标已经获取焦点')
}
input.onblur = ()=>{
    console.log('你的鼠标已经离开')
}
 
5.obload 
网页加载事件 等待文档元素加载完成后才会调用(当整个文档加载完毕后,就会指定onload中的代码)
obload事件只能写一个，多个会出现覆盖的问题
例如:
window.onload = ()=>{
    console.log('等待页面加载完毕后,才会执行内部的内容')
}

其他事件

 1.onkey键盘事件
获取标签
var c1=document.querySelector(".c1")
onkeydown 每次点击键盘触发 事件
onkeyup  每一次点击键盘，按下去，抬起来 才会触发
 
c1.onkeydown=function (e) {  e参数用来捕捉全部的信息
console.log(e.keyCode)    e.keyCode主要用于捕获全部的信息 keyCode表示键盘编码
console.log(e.key)			 e.key  获取点击键盘的对应的内容
}
 
<input type="text" class="c1">
 
 
2.onsubmit提交事件
用于阻止用户提交信息的格式是否正确，正确传输，不正确拦截（用于拦截格式错误）
1.获取标签信息
var i1=document.querySelector("#i1")
var user=document.querySelector(".c1")
 
2.绑定事件
i1.onsubmit=function (e) { e捕捉全部信息
	if (user.value.length<5){   判断输入的长度是不是大于5
       	alert("用户名的长度应该大于5") 输入错误提示
		user.value=""    输入错误 情况内容
		阻止提交默认事件
		return false;  方法1
		e.preventDefault() 方法2 利用e 阻止默认事件
		
}
 
<form action="" id="i1">
    <input type="text" name="user" class="c1">
    <input type="submit">  默认提交按钮
</form>
 
 
3.冒泡事件
当子级区域延伸到父级区域 被称为冒泡事件
.c1{
height: 300px;
width: 300px;
background-color: #e4393c;}
 .c2{
height: 100px;
width: 100px;
background-color: blue;}
 
绑定事件
c1.onclick=function () {
alert("c1区域")
}
c2.onclick=function (e) {  c2为c1的子级会触发冒跑事件
alert("c2区域")
e.stopPropagation()   消向外延伸，阻止事件冒泡
}
 
<div class="c1">
    <div class="c2"></div>
</div>

补充文本插入

 以文本形式插入标签
insertAdjacentHTML(position, text)
 
"position"：一个字符串，表示相对于元素的位置，必须是以下字符串之一
    "beforebegin"
    在 元素之前。仅当元素位于 DOM 树中并且具有父元素时才有效。
 
    "afterbegin"
    第一个子元素之前。
 
    "beforeend"
    最后一个子元素之后。
 
    "afterend"
    在 元素之后。仅当元素位于 DOM 树中并且具有父元素时才有效。
 
 "text" : 要解析为 HTML 或 XML 并插入到树中的字符串
 
 div = `<div>
 	${变量}
 </div>`
 
 insertAdjacentHTML(beforeend,div)

jQuery

jQuery导入

 远程导入
<script src="网络地址">
本地导入
<script src="文件地址">

jQuery与dom的关系

 jQuery的语法
1.$(id class).方法()
$(id class) 查找标签 相当于实例化一个对象
 
2.jQuery("id class 标签名").方法
 
例如：
将标签的文本变换颜色
jQuery(".c1 ").css("color","red")
$(".c1 ").css("color","red")
 
<div>123</div>
 
dom与jq对象的转换
dom对象：
找到标签ele就是一个dom对象
ele = document.querySelector(".c1")
 
jq对象：
$(".c1") 这就是一个jq对象
jq对象 是一个集合数组对象内部放着dom的元素[dom1,dom2....]
 
jq对象转换为dom对象
$(".c1")[0]  因为是一个集合数组 取元素，每一个元素就是一个dom  结果：dom1
 
dom转换为js
$(ele)  转换为dom对象 结果 [dom1]  
不论内部有多少个元素，1...100只要在转换后都是dom对象

jQuery的选择器

 1.类选择器
$(".c1")
 
2.id选择器
$("#i1")
 
3.标签名选择器
/$("div")
 
4.通配选择器  全部
$("*")
 
5.组合标签，可以选择多个，只要符合条件就可以，里面可以有id，class，标签名（）
$("#li,p")
 
6.后代选择器 定位到 标签的孙子
$(".c1 .c2 ul li")
 
7.子代选择器 只确定父级标签下面的子级标签
$(".c2 > ul")
 
8.属性选择器 选择标签内的特有属性
$(".z1z  [href]")
 
9.属性选择器 中的正则内容 后面的选择内容必须要用单引号
$(".z1z [href$='peg']")
 
10表单选择器 选择属性，和属性值
$("[type ='text']")
$(":text") 简写
 
 
 
div class="c1">
    <div class="c2">
        <ul>
            <li>1</li>
        </ul>
	</div>
</div>
</div>
<input type="text">
<input type="password">
</body>
 
<div class="z1z" >
    <a href="1.peg">1</a>
    <a href="">2</a>
    <a href="">3</a>
</div>

jQuery的筛选器

 准却的找到多个标签的其中一个
在一堆dom对象向中，选中想要变化的dom对象，使用筛选器进行筛选。
这种在内部属于字符串
 
1.找到标签的第一个
$(".c1 li:first")
 
2.找到标签的最后一个
$(".c1 li:last")
 
3.按照索引找到标签
$(".c1 li:eq(2)")
 
4.找到索引大于相应
$(".c1 li:gt(2)")
 
5.找到索引小于相应
$(".c1 li:lt(2)")
 
6.根据索引偶数
$(".c1 li:even")
 
7.根据索引奇数
$(".c1 li:odd")
 
 
8.写法不同，根据变量（推荐）
var index=2  定义变量 在外部就是数字2
$(".c1 li").eq(index)  在找到定义变量相对应的标签
 
<ul class="c1">
    <li class="c2">11</li>
    <li>122</li>
    <li>33</li>
    <li>44</li>
    <li>551</li>
    <li>66</li>
</ul>

jQuery的的导航查找

 1.查看子代标签
children()不加条件就是将全部的子代标签找出来，加上条件就是指定那个标签
$(".c1").children("p")
$(".c1").children()
 
2.找下一个兄弟标签
$(".c5").next()
 
3.找下一个所有的兄弟
$(".c5").nextAll()
 
4.找上一个兄弟
$(".c5").prev()
 
5.找上一个所有的兄弟
$(".c5").prevAll()
 
6.找范围内的兄弟
$(".c5").prevUntil()
 
7.找除了自己以外的全部兄弟
$(".c5").siblings()
 
8.找标签的父级
$(".c3").parent()
 
9.父级的父级
$(".c3").parent().parent()
 
<div class="c1">
    <div class="c2">
        <div class="c3"></div>
        <p>p1</p>
    </div>
    <p>p2</p>
</div>
<ul class="c4">
    <li>1</li>
    <li class="c5">2</li>
    <li>3</li>
    <li>4</li>
    <li id="i1">5</li>
</ul>

jQuery的绑定事件普通

 三中用法
 
 
1.on绑定事件  （动态绑定参数）
on 和off
$(“写入标签的父级”).on("事件名 click",匿名函数(){
	事件代码
 
})
 
取消事件
$().off("事件名")
 
 
2.bind绑定事件
 $(“锁定的标签”).bind("事件名：click" ,function () {
 		事件代码
 }
 
取消事件
$().off("事件名")
 
 
 
3.$(“锁定的标签”).click（function(){
		事件函数
		this代表当前绑定事件的标签
		$(this)就是当前标签的 转换为jquery对象
}）
 
取消事件
$().off("事件名")

jQuery的绑定事件其他

 1.ready和hover事件
鼠标悬浮和离开的事件，在悬浮时发生，在离开时发生
hover鼠标绑定事件，离开和悬浮的发生的事件
$(".c1").hover(over,out)
两个函数
function over() {console.log("over")}  
function out() {console.log("out")}
 
 
2.ready 加载事件
可以在标签上面先加载执行
$(document).ready(function () {事件})
 
 
<div class="c1" >  </div>

jQuery的操作标签

 1.标签操作
获取文本信息
 
$(this).html() 纯文本和处理其他标签
$(this).text()  纯文本
 
修改文本信息
 
$(this).html("修改的文本信息")
$(this).text("修改的文本信息")
 
 
2.value取值
只限于select option，input，textarea标签使用，只能用value
 
获取文本信息
$(this).val()
 
修改文本
$(this).val("新内容")
 
 
3.属性操作
 
获取属性值
$("标签id，class..").attr("属性名")
 
设置属性值
$("标签id，class..").attr("属性名","属性值")
 
获得属性值返回真假
$("标签id，class...").prop("属性名")

jQuery的循环

 var arr=[11,22,33]
 
$.each(arr,function(i,j){
	i 是数组索引
	j 是数组的值
})
 
 
案例：
$("ul li").each(function () {
//循环函数中的this：代指的是每一次循环中的dom对象
//因为this是dom对象，需要转换为jquery，在将转换为整形parseInt进行对比
 
if(parseInt($(this).html())>30){
$(this).css("color","red")
        }
        })
 
 
<ul>
    <li>30</li>
    <li>20</li>
    <li>50</li>
    <li>100</li>
</ul>

jQuery的css用法

 单样式
$("c1").css("color","red")
 
多样式
$(".c1").css({"color":"red","backgroundColor":"#369"})
 
<div class="c1">adads</div> 
 
获取内容边框尺寸
 
1.获取内容的宽高尺寸
$("this").width()
$("this").height()
 
2.获取内边距padding+内容的宽高尺寸
$("this").innerHeight()
$("this").innerWidth()
 
3.不加参数 边框+内边距+内容的宽高属性
$("this").outerHeight()
$("this").outerWidth()
 
加参数是内容+内边距+边框+外边距的全部宽高
$("this").outerHeight(true)
$("this").outerWidth(true)

jQuery的属性操作

 添加属性
$(this).addClass("属性名")
 
删除属性
$(this).removeClass("属性名")
 
悬浮事件
$("标签名，class，id").mousemove(function () {
//添加属性c3，当悬浮在c1上面字体变为倾斜
     $(this).addClass("属性名")
})

jQuery的节点操作

 1.创建节点
var $变量 = $("标签名字")
 
2.节点赋值
$变量.attr("属性名"，'属性值')
 
3.添加属性
按照父级添加
append 追加给父级追加一个子标签 放到最后一个
appendTo 将子级标签添加到父级标签下 放到第一个
perpend  追加给父级追加一个子标签 放到第一个
perpendTo 将子级标签添加到父级标签下  放到第一个
 
$("父级标签").append($变量)
$("父级标签").appendTo($变量)
 
按照兄弟添加
 
添加到兄弟上面
$("兄弟").before($变量)
 
添加到兄弟下面
$("兄弟").after($变量)
 
3.删除节点
 
删除整个标签
$("选中删除的标签id class ..").remove()
 
删除标签内的文本
$("选中删除的标签id class ..").empty()
 
4.替换标签
$("需要替换的标签 id class").replaceWith(新建的新标签)
 
 
5.字符串形式添加标签
$("按照兄弟标签").after("添加的标签")
 
例如
$("需要添加标签的父级标签").after("<div>123</div>")
 
 
6.复制标签
$(this).clone()

jQuery的事件委派

 $(" ul").on("click"," li",function () {
       //this触发事件的标签
       console.log($(this).html())
   })
将事件委派给父级，触发事件的标签还是li
事件委派 ，将事件给父级，只要添加标签，就会有事件效果，因为事件委派给了父级，下面所有的子标签都会有效果
 
<ul>
    <li>123</li>
    <li>234</li>
    <li>345</li>
</ul>

jQuery的css位置

 $("").offset([coordinates])  // 获取匹配元素在当前视口的相对偏移。
$("").position()             // 获取匹配元素相对父元素的偏移，position()函数无法用于设置操作。
$("").scrollTop([val])       // 获取匹配元素相对滚动条顶部的偏移。

 位置偏移案例
   .c1{
            width: 800px;
            height: 500px;
            margin: 100px auto;
            background-color: #e4393c;
            position: relative;
        }
 
        .c2{
            width: 200px;
            height: 200px;
            background-color: #333333;
        }
        
<div class="c1">
    <div class="c2"></div>
</div>
 
//获取位置信息
//offset：相对于窗口的偏移  position：相对于已经定位的父标签的偏移量
var off=$(".c2").offset()  //获得偏移量对象
var pos = $(".c2").position()// 不能定位，只能获取父级的相对位置
console.log("off.top：",off.top)
console.log("off.left：",off.left)
 
//父相对定位，位置left top 才为0
console.log( "pos.left：",pos.left)
console.log("pos.top:",pos.top)
 
//设置offset
$(".c2").click(function () {
//只有offset才能传参只能时top和left 才能设置，设置上 和左的位置
$(this).offset({top:100,left:100})
    })

 返回顶部案例
 
	 *{
            margin: 0;
        }
        .c1{
            height: 2000px;
            background-color: #b0b0b0;
        }
        .c2{
            width: 120px;
            height: 50px;
            background-color: #333333;
            color: #e4393c;
            text-align: center;
            line-height: 50px;
 
            position: fixed;
            bottom: 50px;
            right: 20px;
        }
        /*隐藏内容*/
        .hode{
            display: none;
        }
 
<div class="c1">
    <h3>文章...</h3>
</div>
<div class="c2">返回顶部</div>
 
 
//.scrollTo() 获取的是滚动条 与上面顶部的距离，参数是几就会返回到多少位置
console.log($(window).scrollTop())
$(".c2").click(function () {
$(window).scrollTop(0)
})
//隐藏事件，当滚动条到一定距离，显示返回顶部
//相对偏移量
//获取相对偏移量，判断相对偏离大于多少显示返回顶部，小于多少隐藏顶部
$(window).scroll(function () {
console.log($(this).scrollTop())
var v = $(this).scrollTop()
if (v>100){
$(".c2").removeClass(".hode")
}else {
$(".c2").addClass(".hode")
}
})

jQuery的动画

 .c1{
            width: 250px;
            height: 250px;
            background-color: #333333;
            position: absolute;
            top: 240px;
            left: 200px;
}
.hide{
            display: none;
}
<p><button class="c2"> animate</button></p>
<div class="c1"></div>
 
<p>
<button class="s1">显示</button>
<button class="s2">隐藏</button>
</p>
<p>
<button class="s11">显示</button>
<button class="s22">隐藏</button>
</p>
<p>
<button class="s111">显示</button>
<button class="s222">隐藏</button>
</p>
<p>
<button class="s1111">显示</button>
<button class="s2222">隐藏</button>
</p>
 
 
1.显示与隐藏
 
 //显示
$(".s1").click(function () {
$(".c1").removeClass("hide")
})
    //隐藏
$(".s2").click(function () {
$(".c1").addClass("hide")
})
 
2.show hide效果显示与隐藏
 
回调函数，只有当前执行完毕后，回调函数才能触发效果
//显示
$(".s11").click(function () {
       $(".c1").show(1000,function () {
           alert(132132)
       })
    })
//隐藏
$(".s22").click(function () {
       $(".c1").hide(1000,function () {
       		alert(123613)
       })
    })
    
3.滑动动画隐藏效果.
 
(1000,function ()回调函数
//显示
$(".s111").click(function () {
        $(".c1").slideDown(1000,function () {
            alert(132132)
        })
    })
    
//隐藏
 $(".s222").click(function () {
        $(".c1").slideUp(1000,function () {
        alert(123613)
        })
    })
 
4.fadeIn与fadeOut 淡入淡出的动画效果
 
//(1000,function ()回调函数
//显示
  $(".s1111").click(function () {
        $(".c1").fadeIn(1000,function () {
            alert(132132)
        })
   })
//隐藏
     $(".s2222").click(function () {
        $(".c1").fadeOut(1000,function () {
        alert(123613)
        })
    })
 
5.自定义动画
 
$("").animate(动画效果，动画完成时间，动画完成事件后的回调函数)
 
$(".c2").click(function () {
        $(".c1").animate({
            "border-radius":"50%",
                "top":340,
            "left":200
            }
        ,1000,function () {  //回调函数，当上面代码执行完毕后，执行回调函数
            $(".c1").animate({
                "border-radius":"0",
                "top":240,
                "left":240}
             ,1000,function () {
            $(".c2").trigger("click")  //trigger模拟事件，当代码点击了c2对应的按钮
 
            })
            })
    })

扩展方法 (插件机制)

  和python的类方法一样
 
 //自己制作插件
    jQuery.extend({
        //方法1
        方法名:function (参数) {
                //代码
        }
 
        //方法2
    })
    //调用方法
    $.方法1
    $.方法2
 
    jQuery.fn.extend({
        方法名:function() {
            //内部代码
    }
    })
    //调用方法
    $("父类值：子类值").方法名

占位符

 例如：
 var name="1223";
    var age = 18;
 
    
 
    var s=
    `
    姓名:${name},
    年龄:${age}
    `
    console.log(s)

ES6语法

let和const声明变量

 1.let变量声明 不存在变量提升问题
特点：
	1.是一个块级的作用域 类似在类中的实例变量一样，只能在声明内部使用,外部不能使用
	2.不允许在相同作用域内，重复声明同一个变量
1-1.变量提升测试
    console.log(b); // 报错，变量b初始化不存在(不存在变量提升问题)
    let b = 100
    console.log(b)
 
1-2.变量名重复
    let a = 40
    var a = 5000
    console.log(a) // 报错 提示a变量重出现
 
1-3. 变量可以被覆盖
    let a = 10 ;
    a = 100
    a = 1000
    console.log(a); //1000
 
 
2.const变量声明
声明一个只读的常量。一旦声明，常量的值就不能改变
const一旦声明变量，就必须立即初始化，不能留到以后赋值
const foo; // 报错,不能留着以后复制
特点:
	1.声明后不能修改,块级的作用域
	2.变量不能重复,不能被覆盖
 
console.log(a); // 保存 初始化a变量不存在
const a = 100
 
2-1.变量声明后就无法在重新赋值
    const a = 100
    a = 1000  // 无法重新赋值，报错
    虽然无法直接修改a变量，但是如果a变量是个对象的情况下是可以对内部的值进行修改的
    const p = {
     name : '123',
     age : 456,
    }
    p.name = '1xx222'
 
3.var变量声明
特点：
	1.在启动时,将全部的var声明的变量提升到全局作用域中
	2.声明变量是可以被覆盖,可以重复的
 
 var a;
 console.log(a);  //提示undefind 说明变量提升全局
 var a = 1000

变量提升

 使用var
arr  =  [];
for (var i = 0; i < 10; i++) {
        arr[i] = function () {
            return i
        }
    }
console.log(arr);  // [ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ] 10个函数的数组
console.log(arr[5]()); // 获取arr的第5个元素的结果是10
 
 
使用let 因为let不会存在变量提升的问题,不会污染全局
 
arr  =  [];
for (let i = 0; i < 10; i++) {
        arr[i] = function () {
            return i
        }
    }
console.log(arr);  // [ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ] 10个函数的数组
console.log(arr[5]()); // 5

模板字符串

 <div class="box">
 
</div>
 
 
<script>
    // 追加结构
    const obox = document.querySelector('.box')
 
    let id = 1, name = 'xxx';
 
    //使用tab上面的反引号 构造一个htmlstr的一个字符串
    // ${} 进添加值  ${} 相当于 python进行占位符
    let htmlstr = `
    <ul>
        <li>
            <p id="${id}">${name}</p>
        </li>
    </ul>
    `
    obox.innerHTML = htmlstr
</script>

剩余运算符与扩展运算符

 1.函数的默认参数
    function bba(a = 10, b = 20) {  // 带默认参数
        return a + b
    }
    console.log(bba(100, 300));  // 传入 传入100 和300值，覆盖原来的带有参数的值
 
//默认参数可以是一个函数    
    function add(a,b=date(5)){
        return a+b
    }
    function date(val){
        return 5 + val // 必须是有返回值的
    }
 
2.剩余运算符
    //es6写法  剩余参数 由... 紧跟者一个参数实现的
    // ...key 剩余参数固定写法 参数名可以随便写
    //  ...key剩余参数解决了 arguments(伪数组)的意思 
    function pick(object, ...key) { // ...key 返回一个数组
        console.log(key)  // ...key 接受到 传入'title', 'author', "year"3个名称
 
        let res = Object.create(null)
        for (let i = 0; i < key.length; i++) {
            res[key[i]] = object[key[i]]
        }
        return res
    }
    // book对象
    let book = {
        title: '1231',
        author: "65465",
        year: 2019,
    }
    //获取pick函数处理的值赋值给bookdata // pick接受了pick
    let bookdata = pick(book, 'title', 'author', "year") 
    console.log(bookdata)
    // 剩余参数：接受函数中剩余的参数 返回一个数组 和python中的*args一样属于位置参数
 
3.扩展运算符
扩展运算符：将数组进行分割，将改革想作为分离的参数进行传入函数中
const arr = [11,22,33,44,566,778979,9879]
console.log(Math.max(...arr))  // 使用扩展运算符 ...数组  可以将数组进行分离为一个个的元素，进行比较

箭头函数

 es6的箭头函数 => 来定义 取代function(){} 等价于 ()=>{} 匿名函数
 
add = function(a,b){
	return a + b
}
 
add = (a,b)=>{
	return a + b
}
 
add = (a,b) => a+b // 默认存在一个return
 
1.无参数 必须有()存在
()=>{
    return '123456'
}
 
2.单个参数
val => { return val+5
       }
 
3.单个参数返回
val => val
 
4.返回对象参数
let getobj = obj => (
    {name:'666',age:18}
)
 
闭包：
 //闭包函数 fn 可以表达式进行()起来也可以不用括起来
let fn = (function(){
           return function(){ 
               return 123 
           } 
        })()
fn(); // 需要执行一下
 
箭头函数闭包
let fns = (() => {
            return () => {
                return 123
            }
        }) (); // 第一层函数执行，获取到的第二层的function函数(没有执行) 需要执行
        fn();

箭头函数指向this问题

 es6 解决this指向问题 使用=> 就会找上层的作用域
箭头函数之后没有this指向，通过查找作用域进行找 
一但使用箭头函数，当前有没有作用域，就找上层的作用域
3层作用域    this
 
let pa = {
    id : 10,
    // 2级作用域 this
    init:function(){  
        // 1级作用域 this
        document.addEventListener('click',(event)=>{
            console.log(this); 
            this.doSomeThings(event.type) 
            // console.log(event.type) 
        },false)
    },
    doSomeThings:function(type){
        console.log(`事件类型${type},事件id${this.id}`)
    }
 
}
pa.init()
console.log(pa.doSomeThings());
 
怎么查找作用域
在 document.addEventListener方法定义的内部是一个作用域
这个作用域上层指向了 init:function init变量
init 变量的上层作用域 指向了对象pa 所以 this指向pa对象
 
假设 int：function  定义为箭头函数 => 那么相当于 init没有作用域，就会找到pa对象的作用域
在找到window 作用域练 最外层.
 
箭头函数注意:
1.使用箭头函数就会内部就没有 arguments 方法，因为使用箭头函数就没有作用域链，就会指向weindow
 
 let pa = ()=>{
     console.log(arguments)
     return 10+20
 }
 console.log(pa())
 
2 箭头函数不能使用new关键字实例化对象
let pa = ()=>{} // 因为箭头函数无法实现作用域
console.log(pa) // ()=>{}  他不是一个对象 语法糖 表达式  function 类型
let p = function(){}
console.log(p()) // ƒ (){} 也是一个对象 function 类型
let p = new pa

解构赋值

 let info = {
    type: 'id',
    name: ' askjh'
}
es6 完全结构
let { type, name } = info // 进行了赋值
console.log(type, name)  // id,askjh
 
//不完全结构 可以忽略某些属性
let obj = {
     a: {
        name: '张三'
     }, // 对象
     b: [], // 数组
     c: 'hello world'
 
}
let {a} = obj // 获取obj对象一些值
console.log(a) // {name: '张三'}
 
还可以使用 剩余运算符进行获取
let {a,...bs} = obj
console.log(bs) // {b: Array(0), c: 'hello world'} 获取剩余参数的对象
 
 
// 使用默认值
let {a,b=30} = {a:40}
console.log(a,b) // 40 30
 
 
 
// 对于数组的使用
let arr = [1,2,3]
let [a,b,c] = arr
console.log(a,b,c) // 1 2 3 
 
// 嵌套结构
let [n,[d],e] = [1,[2],3] // 相当于python 中的 a,b = 1,3 但是需要根据对应参数的形式获取值
console.log(n,d,e) //1 2 3

对象的扩展

 1. es6 直接写入变量的函数 作为对象的属性
const name = '消息下', age = 12
const pe = {
name,
age,
sayName(){
console.log(name) //  消息下
}
}
pe.sayName() // 执行函数
 
 
2. set 方 与 get 方法的使用
// 当直接执行get 方法就会根据默认值执行
// 如果对set方法传入参数，就会现去set方法中进行判断 在执行get方法
let caet = {
    wheel:4 ,
    set(val){ // 取值
        if (val < this.wheel){
            throw new Error('数量太少') // throw 抛出异常
        }
    },
    get(){ // 读值
        return this.wheel
    }
}
caet.set(3) // 对方法传入3时，在执行 get 就会获取set值的判断结果
console.log(caet.get()) // 如果不对set传入值，那么默认就会参数就是wheel
 
3. 属性表达式
const obj = {}
obj.isshow = true // 对obj对象进行赋值
console.log(obj); // {isshow: true}
const name = 'a'
obj[name+'bc'] = 123 // 将name变量 和 bc 进行拼接进行写入对象中
console.log(obj) // {isshow: true, abc: 123}
obj['f'+ 'cc'] = function(){
    console.log(this);
}
console.log(obj) // {isshow: true, abc: 123, fcc: ƒ}
 
 
 
4.对象方法
// is() 相当于 ===  比较与两个值是否严格相同
console.log(NaN === NaN); //  不严谨 false
console.log(Object.is(NaN,NaN));  // true
 
5.assign() 对象的合并  // 属于浅拷贝
let t = {
 
}   
let b = {
    a:10
}
Object.assign(t,b) // 将第二个以后的全部对象，合并到第一个对象中  返回一个新对象
console.log(t) // {a: 10}

symbol类型

 原始数据 symbol ，表示他他是一个独一无二的值
const name = Symbol('name') // 内存地址不一样
const name2 = Symbol('name') // 独一无二的一个值
const name3 = "name" 
 
console.log(name3 ===name)//false 
console.log(name === name2); //false 
console.log(typeof name ) // 类型symbol不是字符串
# 用来定义对象的私有变量,可以设置对象的私有的属性
# 不能使用new命令 因为生成的 Symbol 是一个原始类型的值，不是对象，所以不能使用new命令来调用
# 也不能作为对象进行使用, 可以认为他是一个字符串
let obj = {
    'name' : '123' 
}
let s2 = Symbol(obj)
console.log(s2); // Symbol([object Object])
 
# Symbol 值不能与其他类型的值进行运算，会报错
let a = Symbol('a')
console.log('bcd' + a); // 报错
 
#  Symbol 可以作为if中的参数可以作为bool，但是不能转为数值
let a = Symbol() // 没有描述也是true
console.log(Boolean(a)); // true
if(a){
    console.log('123');
}
console.log(Number(sym)); // 报类型错误
 
 
内部方法
const sym = Symbol('foo');
1.返回symbol('描述') 描述
console.log(sym.description ); // "foo"
 
2.可以作为对象的属性名
let obj = {}
obj[sym] = 123456
或者
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });
 
3.可以作为消除魔术字符串
魔术字符串:在程序中多次出现的
const a = {
    'b':'name' //   魔术字符串
}
const a = {
    'b': Symbol() //  代替 因为每次创建 Symbol 都是不一样的
}
 
 
4.Symbol.for()，Symbol.keyFor()
s1 = Symbol.for('123') # 如果希望使用同一个Symbol对象就是for方法，他会全局环境中进行搜索,而Symbol不会,如果Symbol.for已经存在就会调用存在的Symbol.for不会重新创建
Symbol.keyFor('s1') # 为了找到Symbol.for登记的值

set集合类型

 无序不可以重复的类型
let set = new Set() // Set(0) {size: 0}
console.log(set); //Set(0) {size: 0} 其中 size 表示集合的长度
 
常用方法:
set.add('name') // 可以使数值 集合 对象 字符串 布尔值
set.delete('name') // 删除
set.has('name')  // 查看当前值是否存在 返回flase true
set.size // 访问集合的长度
set.forEach((key,val)=>{ // 进行对当前集合的数组进行 遍历 无意义
    console.log(key,val);
})
 
//将set 变为一个数组
let set2 = new Set([1,2,3,4,4,5,66,44]) // 集合将元素中的数组进行重复的剔除
let arr = [...set2] // 使用扩展用算符转换为一个数组 // 将集合展开
console.log(arr);
 
 
// 释放当前资源
// set 无法被释放
let arr1 = [ 1,2,3,4]
arr1 = null
 
 WeakSet() // 弱类型的set对象 可以被释放

map类型

 map类型是键值对的有序列表，键和值的任意类型
无法被释放
 
// 声明 map
let map = new Map();
// 进行设置值
map.set("name", '张三')  //Map(1) Map(1) {'name' => '张三'}
//循环遍历 key ：name val：张三
console.log(map) // Map(0) { size: 0 } 打印的结构
 
// 获取值
console.log(map.get('name')); // 张三
 
// 校验值
console.log(map.has('name')) //  true
 
//删除值
console.log(map.delete('name')) // 删除后 打印的结果也是 bool类型
 
// 清除值
map.clear()  //清空值
 
// 因为这个map结构使数任何类型  key val 可以使任意结构
map.set([11, 2, 3, 44, 5, 6,], 'hello') //{Array(6) => "hello"}
console.log(map);
// 设置多元数组
let m = new Map([["a", 1], ["b", 2]])
console.log(m) // {'a' => 1, 'b' => 2}

数组补充

 数组的方法 from of
function add(){
    arguments // 当前对象在函数中引用函数的参数
	console.log(arguments); // 返回一个伪数组 好多方法不能使用
	let arr = Array.from(arguments); // 变为真正的数组
}
 
add(1,2,3,4)
 
 
2.使用扩展用算符进行快送转换运算符
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
let lis = document.querySelectorAll('li') // 获取全部的li标签
 
console.log([...lis]); // 直接转换
 
3.使用form对元素进行处理
let lis = document.querySelectorAll('li') // 获取全部的li标签
let list = Array.from(lis, (ele) => { return ele.textContent }) // 第二个参数是一个回掉函数处理转换的数组中的元素
 
 let list2 = Array.from(lis, ele =>  ele.textContent )
 
 4.of方法 将一组的值转换为数组 任意的数据类型转换为数组
 console.log(Array.of(3,1,2,4,5,6,7,88,9)); //[3, 1, 2, 4, 5, 6, 7, 88, 9]
 
 
5.数据的其他的方法
5-1.copywithin() 方法 了解
// 复制替换将数组中的值进行替换 返回当前的数组
let a = [1, 2, 3, 4, 5, 6].copyWithin(0, 3) // 原结果[1,2,3,4,5,6]
console.log(a); // [4,5,6,4,5,6]
//从第三个元素开始到后面的全部数替换前面的数0-3的元素
 
 
5-2.find查找数值 findindex查找数值的元素
//find 方法找出第一个满足条件的 数组元素
[1, 2, -103, 4, 5, -10, 7].find((n) => {
    return n < 0
}) // -103 结果  找出第一个条件的数组成员
 
//findindex 找出第一个数组成员的下标索引
[1, 2, -103, 4, 5, -10, 7].findindex((n) => {
    return n < 0
})
 
5-3.includes 返回一个bool值 表示一个数组是否包含这个值
//作为if 判断条件 是否包含这个元素
console.log([1,2,3,4].includes(2)); // true
console.log([1,2,3,4].includes(10)); //false
 
6.entries方法
keys(对键的遍历) values(对值的遍历) 返回一个遍历起  可以使用for ... of 进行遍历 通过这些方法生成遍历器
 
6-1.keys 获取索引
let a = [1, 2, 3, 4, "a", 6].keys()
console.log(a); // 获取的结构 就是一个遍历器Array Iterator
//就可以使用for of 进行遍历
for (let index of a) {
    console.log(index)  // 将数组的数据遍历出来（获取的索引） 和python中的for遍历一样 不同的就是需要生产一个遍历器
}
 
6-2.values 获取元素
let b = [1, 2, 3, 4, "a", 6].values()
for (let index of b) {
    console.log(index) // 获取的是数组的值 于python中的for相似但是有和dict方法相似
}
 
6-3.entries 获取val 和key
let c = [1, 2, 3, 4, "a", 6].entries()
for (let [key, val] of c) {
    console.log('这是键', key) // 获取索引
    console.log('这是值', val)  // 获取值
}

迭代器interator

 // 迭代器 一种新的遍历机制
// 遍历起就是迭代器
const item = ['1',2,55,'asd'] //只能是数组类型
 
 
 
// func 就是一个函数，是可以执行的函数  迭代器
let func = item[Symbol.iterator]() // 获取数组的中的迭代器，返回一个函数 ƒ values() { [native code] }
 
console.log(func); // Array Iterator {}迭代器 
 
// 迭代器的next方法
console.log(func.next()) // {value: '1', done: false} 返回的一个对象 value代表时数组中的值 done false 代表是遍历还没有完成 当done为teru时，说明便利完成
console.log(func.next())
console.log(func.next())
console.log(func.next())
console.log(func.next()) // {value: undefined, done: true} done为true 说明为遍历完成 value变为 空
 
 
// 迭代器两个核心：
// 1 迭代器是一个接口，能快捷的访问数据  [Symbol.iterator]( 创建迭起，同给迭代器的next的结果
// 2 迭代器遍历数据结构的指针 第一次调用指向了 1  value指向 1 dome为false 以此类推 
// 当done 为true时，遍历结束

生成器

 生成器的应用，异步编程，让异步编程同步执行
1.
function* func(){
    // request是一个方法 res 接受第二次nxet res 参数赋值给 let res变量
    let res = yield request('传入的网络地址') // 3.res 不是yield执行的结果返回的值
    // res 是谁：恢复执行传入next(实参)
 
    }    
const ite = func() // 1.迭代器对象
ite.next() // 2.恢复yield进行执行 // 执行这个生成器函数
function request(url){
    $.ajax({
        url:url,
        method:'get',
        success(res){
            ite.next(res) // 4.恢复执行并且 将res传入给 生成器值的变量res    
        }
    })
} 
 
2.加载效果
function* en(){
    add() // 执行第一个开始加载提示
    yield del() // 卡在加载提示这里，当加载提示执行
    func()
}
const ite = en() // 生成器对象
console.log(ite);
ite.next() // 执行第一次
function add(){
    console.log('开始加载... 图片');
} 
 
 
function func(){
    console.log('隐藏加载提示...显示图片')
}
 
function del(){
    //  setInterval计时器
    setTimeout(() =>{
        console.log('加载完成,隐藏加载效果')
        // 加载提示执行后执行
        // 执行生成器中的下一次next方法
        ite.next() // 执行第二次
    },5000)
 
}

生成器generator

 作用:
1.generator 函数 可以通过yield关键字 将函数挂起，为了改变执行流程提供了可读性
2.为异步编程(解决异步代码)
区别:
1.function后  函数名前 * 
2 只能在函数内部使用yield表达式 让函数挂起
 
1.例如：生成器函数
function* func(){
yield 1; // 当使用yield关键字时，就会在这个位置挂起不走，当使用next才会执行
}
// 返回一个遍历器对象， 可以调用next()方法调用
let fn = func() // 返回一个对象给 fn变量 返回遍历器对象
// 使用next()方法 
// 可以.value取值 done 获取状态(false还可以next true不能next)
console.log(fn.next().done); //打印的结果就是 {valse：1 ，done：false}
// 当第一次调用next 就会卡在第一个yield
// generator 函数是分段执行，yield语句是暂停执行，next就是恢复执行
 
案例
 // 对迭代器的传值
function* add(){
    console.log('hehehe');
    // x 不是 yield 2 的返回 是当前next 调用 恢复调用yield执行传入的实参
    let x = yield "a" // 当使用next时 卡在这个位置
    console.log('hahah',x);
    let y = yield '123'
    console.log('hahahz',y);
    return x+y
}
let fn = add()
// 先打印 log 中的数据  在进行打印yield关键字中的内容，函数进行挂起
// 在进行执行next 时就恢复执行
console.log(fn.next(10)); // {value: 'a', done: false}
 
// 当进行传值时，这个next的值传给乐 let 中的x
//  hahah 20
console.log(fn.next(20));  // {value: '123', done: false}
 
// 当进行传值时 next  中的参数传给y值
// 返回值return x+y找到下一个执行的yield 中的 对value进行赋值，因为最后一次执行done: true
// 所以就赋值到最后一个next 的value中
console.log(fn.next(20)); //{value: 40, done: true}
 
 
 
主要作用就是 不具备 interator 接口的对象提供的遍历操作
将不具备 interrator循环的对象 变为可遍历操作
function* func(obj) { // 生成器写法 + yield 挂起
    const propkey = Object.keys(obj) // 传入的对象 返回一个迭代器
    console.log(propkey);
    for (let p of propkey) { // 迭代器就可以进行for of循环
        yield [p, obj[p]] // 构造结构 {name：1223}  // 使用yield关键字函数挂起
    }
}
 
 
const obj = {
    name: 133,
    age: 456
}
 
 
 
console.log(obj); // {name: 133, age: 456} 普通的对象
 
for (let [key, val] of func(obj)) {
    console.log(key, val);
    console.log(`${key}:${val}`)
}

promise

 异步编程的解决方案 承诺  因为是一个对象 所以需要new 创建对象
promise 相当于一个容器，放置这未来要执行的事件(异步)的一个结果
各种异步操作都可以使用同样的方式进行处理 axios库就是基于promise
 
 
特点：
1. 对象的状态不收外接影响 异步处理的状态： peendig(进行中) resolved（成功） rejected(失败了)
这三个状态 保存在peomise
2.一旦改变，就会在变，任何时候都可以 得到结果 进行中- 成功  进行中-失败 都存储在peomise
 
案例：
// 创建对象
//1. new Promise(接受一个回调函数) 
//2. rejected,resolve 回掉函数中接受两个参数(失败和成功) 固定写法
let pro = new Promise(function (rejected, resolved) {
    // rejected,resolve 这个参数都是方法
    // 执行异步操作
    let res = {
        code: 200,
        data: {
            name: '成功了'
        },
        error: '失败 了'
    }
    // 伪造异步操作
    setTimeout(() => {
        if (res.code === 200) { // 如果状态为200
            resolved(res.datas) // 就将成功的值传给resolved成功状态 可以pro对象中的then() 获取成功的值
        } else {
            rejected(res.error)
        }
    }, 1000)
})
console.log(pro); // 返回一个promis对象 对象内部存在两个3个状态
 
创建的promise对象的回调方法
// 成功状态下 请求后端获取的状态吗和参数
//pro.then() 成功的结果 执行异步操作的成功的结果 内部接受一个回调函数
pro.then((val) => { // 接受回调函数
    // val 接受成功的数据
    console.log(val); // 
}, (err) => { // err接受异步请求中请求状态 错误的内容
    console.log(err)
})
 
 
封装异步操作
ex 接受时间
封装了promise 方法，变得更为灵活
function time(ex) {
     return new Promise((rejected, resolved) => {
         setTimeout(() => {
             resolved('成功的信息')
         }, ex);
     })
 }
 time(1000).then((val) => {
     console.log(val)
})

promise封装异步函数

 pormise 封装一个ajax 异步请求
const getJSON = function(url){
    //在这个方法中封装一个promise对象
    new Promise((reject,resolve)=>{
        // 创建一个请求
        const xhr = new XMLHttpRequest()
        //打开对象
        xhr.open('GET',url)
        // 设置状态 回调函数
        xhr.onreadystatechange = handler
        //约定返回数据类型
        xhr.responseText = 'json'
        //设置请求头
        xhr.setRequestHeader('Accept','application/json')
        //发送
        xhr.send() // get必须写
        // 回调函数
        function handler(){ // 创建回调函数
            // this指向 xhr对象
            console.log(this.readyState) // 获取数组的状态
            if(this.readyState === 4){
                if(this.status === 200){ // 后端请求的状态
                    resolve(this.response) // 获取的请求体返回  
                }else{
                    reject(new Error(this.statusText)) // 讲请求状态的error
                }
            }
        }
    })
}
 
getJSON('url') // 传入地址
.then((val)=>{
	console.log(val)
},(error)=>{
	console.log(error);
})
 
 
//其他pormise中的其他方法
//then() 方法 第一个参数：relove 回掉方法 第二个参数：可选的reject 状态的回调 
// then() 返回了什么：返回的时新的pormise实例对象 还可以.then()  可以采用链式写法
// 可以特殊写发 链式写法
getJSON('url').then(val=>{
    // 返回正确的操作
}).catch(err=>{
    // 返回错误的操作
})

补充

  // resolve() reject() all() race() finally()
//1 resolve() = reject() 可以转换为 promise对象 现有的任何对象转换为
// let p = Promise.resolve('foo') //将字符串foo转为promis对象
// //等价于
// let p = Promise(resolve => {
//    return resolve('foo')
// }) // 直接返回foo
 
// console.log(p);
// p.then((val) => {
//     console.log(val); // 结构 foo
// })
 
 
// all() 并行的执行这个3个异步 // 一起操作 游戏素材 加载
// let p1 =new Promise((resolve,reject)=>{}) 
// let p2 =new Promise((resolve,reject)=>{}) 
// let p3 =new Promise((resolve,reject)=>{})    
 
// let lst = [p1,p2,p3]
// let p4 = Promise.all(lst) // 传入一个数组
// p4.then((val)=>{
//     // 3个都成功才是成功
// }).catch((err)=>{
//     // 如果一个失败 就全失败
// })
 
// race() 请求超时的操作 给某个设置超时的时间并且在超时后执行相应的操作
// 请求图片资源
function img(imgs) {
    return new Promise((resolve, reject) => {
        new imgg = new Image() // Image()函数
        img.onload = function () {
            resolve(img) // 成功返回img
        }
        img.src = imgsrc
    })
}
// 请求图片时长
function timeout() {
    let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('请求超时')
        }, 3000) // 设置时长3秒
    })
    }
// 参数接受数组 请求成功不会走catch
Promise.rece([img('images/2.peg'), timeout()]).then(res => {
    console.log(res); // 如果3秒内请求图片就会执行这里
}).catch(err=>[
    console.log(err) // 如果3秒后才能请求到就会执行请求超时(打印请求超时提示)
])
 
race() finally(()=>{也是一个回调函数}) 不论是promise对象请求数据成功失败 都会执行race() finally()这两个方法

async异步

 async 解决异步操作更加方便
使用async 进行异步操作 返回一个promise对象 可以统括then 和catch
async 时gemerator 的一个语法糖
 
1.案例使用async
async function f(){
    // 这个后台的字符串会被async方法转换为 promis对象
    // 字符传会被转换为promis对象
    // await命令就是等待
    return await 'await等待命令' async方法必须要与await配合使用
}
f() // Promise {<fulfilled>: undefined} 返回一个promise对象
f().then(res=>{ // 接受正确的数据
    console.log(res)
}).catch(error=>{ // 接受抛出异常数据
    console.log(error)
})
 
 
方便理解
async function f(){
    let s = await '你好 你好 async' //1.s变量执行
    let data = await s.split('') // 2.data 等待s变量执行完毕后 在进行执行
    return data // 3.最终返回的时data等待执行后的结果
  
}
 
// 假如：
async函数中有多个await 那么then函数等待 所有的await指令 运行完毕的结果 才会执行then
 
//注意：
await '后面必须是一个promise对象，不管是什么类型都会转换为promise对象'
await 特点就是 如果一个出错执行了错误信息，下面的await不会执行
 
2.捕获异常
async function f2(){
    await Promise.reject('出错了') // 只会打印出错了，下面的命令就不会执行
    await Promise.resolve('正确的') // 不执行
 
}
f2().then(
    (val)=>{
        console.log(val);
    }
).catch(
    (err)=>{
        console.log(err); // 捕获Promise对象的信息
    })
 
 
3.解决await 出现错误不执行的弊端
async function f2(){
    try {
        await Promise.reject('出错了') // 就算出错
    }catch(err){
    }
    return await Promise.resolve('正确的') // 还是可以出现正确的
}
 
f2().then(
    (val)=>{
        console.log(val); // 可以打印正确信息
    }
).catch(
    (err)=>{
        console.log(err); 
    })
 
 
4.模拟异步请求
function getJSON(url){
    //伪造的ajax请求
    console.log(url)
    return HeWeather6
}
 
// 伪造url 中返回的对象数据
HeWeather6 =  {
    now :{
        'xx':123
    }
}
 
//当执行这个函数时，就会将url传入到async的函数中
async function func(url) {
    // 发送ajax
    // await  等待数据传的返回
    let res = await getJSON(url) // 等待getJSON函数执行完毕后返回结果
    // 获取 url中的now的数据
    let arr = await res.now //HeWeather6 url 中返回的对象数据
    return arr // 返回数据 对象中now数据
}
 
// 使用then 获取正确的数据
// then 需要等待await执行完毕后返回的数据结构
func('这是url').then((val) => { console.log(val); })
 
总结：generator promise async 解决回掉地狱的问题(回掉循环 嵌套太多) 异步操作更加方便

class构造

 class 关键字时es6的语法糖   
   
class Person{  // 创建class person
	constructor(name,age){ // init方法初始化方法
    	this.name = name // 赋值属性
    	this.age = age 
    }
 
	sayname(){ // 内部方法
		return this.name
	}
	sayage(){ // 内部方法
		return this.age
	}
 
}
 
let p1 = new Person('aa',123) // 实例化对象
console.log(p1); // Person {name: 'aa', age: 123}
// 调用对象中的方法
console.log(p1.sayage()); //123
console.log(p1.sayname()); //aa 
 
// 通过外部进行对类中设置方法 Object.assign 
// 传入两个参数1 当前的类名.prototype方法 2传入一个对象，对象中函数名(){}
Object.assign(Person.prototype,{
    sayxx(){
        return xx
    },
    sayzz(){
        return yy
    }
})

class类的继承

 // 类的继承 使用关键字extends
// 创建类不用加上()
 
class animal {
    // es6 中的初始化方法 // 没有类对象
    constructor(name, age) {
        this.name = name //事例对象
        this.age = age // 事例对象
    }
    //创建两个对象
    show() {
        return this.name
    }
    func() {
        return this.age
    }
}
继承语法:
class  子类名 extends 父类名
class dog extends animal{
	// dog继承了adimal方法
}  
 
// 使用super方法继承父类的初始化方法
class dog extends animal{ 
    // 子类的初始化方法，因为继承了父类的变量
    constructor(name,age,color){
        super(name,age) // 直接使用super去找父类的变量就可以
        this.color = color
    }
    // 子类的自己的方法
    saycole(){
        return `${this.name}${this.age}`
    }
    //重写父类的方法
    func() {
        return `${this.name}${this.age}`
    }
}
// 创建子类的对象
let p1 = new dog('aa',18,'red') // p1是事例话dog 的对象
console.log(p1); // 返回了dog的对象，内部有父类的方法和父类的事例变量
 
//执行父类中的方法
console.log(p1.show());
//执行子类的方法
console.log(p1.color());

模块化

 在modules/index.js文件将函数或者变量进行抛出
 
// es6 模块中主要有两个命令构成 export和import构成
// export 用于规定模块对外接口 抛出
// import 用于输入其他模块提供的功能 结构
// 模块就是一个独立的文件
export const name = '张珊'
export const age = 18
// 必须使用export关键字进行 
export function func(){ // 抛出方法对象
    return '你好我是xx'
}
// 或者
export {func} //抛出对象 被引用的进行解构
 
// 抛出类 对象 数组 等等
 
 
在需要的文件导入index.js文件中的变量和函数
<script type="module"> // 如果使用外部抛出的 模块需要将type设置为module
//  es6模块系统 引入 模块下的文件 和模块下的方法对象
// 进行解构 模块中的方法
import {name,age,func} from './modules/index.js' //进行导入 从那个文件导入那个变量
//  {name} 指定导出的数值或者方法  from 指定接受的文件
console.log(name)
console.log(age)
console.log(func());
 
</script>

补充

1.清空默认样式

 /* @import "./iconfont.css"; */
 
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
dl, dt, dd, ul, ol, li,
pre,
fieldset, lengend, button, input, textarea,
th, td {
    margin: 0;
    padding: 0;
}
input {
    border: 0;
    outline: none;
    padding: 0;
    box-sizing: border-box;
}
 
img {
    vertical-align: middle;
}
 
/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1.3 "Microsoft YaHei",Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
    color: #333;
}
 
 
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
 
address, cite, dfn, em, var, i{ font-style: normal; } /* 将斜体扶正 */
b, strong{ font-weight: normal; } /* 将粗体扶细 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
 
/* 重置列表元素 */
ul, ol { list-style: none; }
 
/* 重置文本格式元素 */
a { text-decoration: none; color: #666;}
 
 
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; }
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
 
/* 重置表格元素 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
/* 重置 hr */
hr {
    border: none;
    height: 1px;
}
.clearFix::after{
    content:"";
    display: block;
    clear:both;
}
/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }
 
a:link:hover{
    color : rgb(79, 76, 212) !important;
    text-decoration: underline;
}
 
/* 清除浮动 */
.clearfix::after {
    display: block;
    height: 0;
    content: "";
    clear: both;
    visibility: hidden;
}

上一篇Vue

下一篇权限设计

本文作者：_wangkx

本文链接：https://www.cnblogs.com/kaixinblog/p/17878643.html

posted @ 2023-12-05 23:54 _wangkx 阅读(10) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaScriot

· HTML基础

· HTML&CSS

· html+css学习笔记

· Html+CSS相关知识

阅读排行：
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么退出登录或修改密码无法使 token 失效

	<!DOCTYPE html> 声明解析内容（以什么方式解析标签）告诉浏览器用标准版解析，避免兼容问题（标准h5规范解析）

	<html lang="en">
	根标签（树形结构）head 和 body 字标签
	只要不是在网页中显示的内容都要放到head中取（标题，解释器）

	<head> head 告诉浏览器解释性内容

	<meta charset="UTF-8"> 用的编码格式解析
	<title>Title</title> 网站标题内容
	css代码
	js代码
	jq代码
	</head>

	<body>

	标签存放位置
	body 网站内呈现的内容放到body里面

	</body>
	</html>

	功能：
	1.块级标签：独占一行
	2.内联标签：可以和其他标签共享一行

	<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
	<标签名属性1=“属性值1” 属性2=“属性值2”…… />

	标签内有不同的属性，不同的属性和不同的属性值，页面呈现效果不同

	标签嵌套的格式
	1.<a><b>123<b><a> 可以
	2.<a><b>123<a><b> 不行

	主要是做为网页标题使用
	一共分为6个级别从大到小
	<h1>标题</h1>
	<h2>标题</h2>
	<h3>标题</h3>
	<h4>标题</h4>
	<h5>标题</h5>
	<h6>标题</h6>

	用于文章段落作用，可以起到间隔作用（中间会有一些空隙）
	<p>这是段落1</p>
	<p>这是段落2</p>

	用于将一行的内容进行换行（用的很少）

	这是换行<br>
	这是换行<br>

	使用后可以使字体变粗

	<b>这是字体加粗</b>
	<strong> 内容 </strong>

	使字体倾斜
	<i>这是字体倾斜</i>
	<em>字体会变为斜体</em>

	在页面中呈现内容中间被一条横线贯穿的效果
	<del> 内容 </del>

	网址：http://www.fhdq.net/ts/177.html

	# 相当于一个空格呈现
	© # ©

	<div> 书写内容 </div> 块级标签没有样式主要定义文档中的分区
	<span> 书写内容 </span> 内联标签没有样式定义组合文档中的行内元素

	处了这两个标签没有样式，其他的别签都带有样式。

	内联标签，主要负责网页内部跳转作用
	格式：
	<a href="网络地址">内容</a>

	属性：
	1.href="网络地址" 必须存在
	2.target = "_self" 默认在跳转网页时，覆盖原来的网页 target ="_blank" 保留原网页
	3.title属性：主要作用：提示用户，当鼠标悬浮在标签上时，会出现提示内容：title="提示内容"

	书写方式：
	<img src="图片地址" title="当将鼠标放到图片上时提示内容" alt="当图片加载不出来时提示的内容">

	height="" 设置显示的高
	width="" 设置显示宽

	用于显示图片使用，图片的大小主要还是，设置块级是应占的大小

	1.有序列表标签
	<ol>
	<li> 内容</li>
	<li> 内容</li>
	<li> 内容</li>
	</ol>
	存在默认样式 1.2.3的形式（存在排序的）

	2.无序列表标签（使用较多）
	<ul>
	<li> 内容</li>
	<li> 内容</li>
	<li> 内容</li>
	</ul>

	存在默认样式一个实心圆为样式（不存在排序）

	3.自定义
	作用：定义列表，列表显示
	<dl>
	<dt>帮助中心</dt> 定义的title dt
	<dd>账户管理</dd> 定义的描述 dd
	<dd>购物管理</dd> 定义的描述 dd
	<dd>联系帮助</dd> 定义的描述标签 dd
	</dl>
	默认显示效果：
	帮助中心
	账户管理
	购物管理
	联系帮助

	在页面中以表格形式呈现
	作用：在网页中显示表格订单操作
	由表头和表内容组成
	tr ：行的意思
	th ：表头
	td ：表头下面对应的每一个内容
	caption ：是表格的标题，会在表格正上方进行居中显示
	border : 中文边界给table 表格设置边框线 (表格带有间隙)
	cellspacing ：设置单元格的表格间隙
	<table border='1' cellspacing="0">
	<caption>商品清单</caption>
	<tr>
	<th>名称</th>
	<th>品牌</th>
	<th>数量</th>
	<th>入库时间</th>
	</tr>
	<tr>
	<td>电视</td>
	<td>ll</td>
	<td>160</td>
	<td>2022/10/10</td>
	</tr>
	</table>

	**** table 表格的横向合并和纵向合并 **
	<th colspan="2">数量/入库时间</th> 跨横向列进行合并(合并的列)
	<td rowspan="2">160</td> 跨纵向合并(合并单元格)


	属性：border="1"，表格的外部框架的粗细

	<link rel="icon" href="图标的地址">

	也是一个外部链接标签，链接其他的内容
	href 参数：规定被链接文档的位置

	格式：
	<form action="提交地址" method="提交方式">
	.
	form elements
	<input type="text" placeholder="提示信息用户名">
	<input type="password" placeholder="提示信息密码">
	<input type="submit" value="立即提交">

	</form>

	form代表一个表单域（内部都是表单标签）

	action: 提交数据的目标地址
	method: 设置请求参数格式 get post
	get 是将用户的数据放到url的路径后面，不安全
	post 将数用户据放到了请求体后面，非常安全

	enctype: 决定服务端用什么方法去解开默认为 urlencoded格式
	content-type：multipart/form-data 用于文件上传（文件数据使用）

	自闭合，内联标签标签
	自带参数 type="text"
	<input type="text"> 当参数是text是，可以显示输入的文本
	<input type="password"> 当参数是password ，输入的文本是不显示的
	<input type="submit"> 当参数时submit，就会显示一个提交按钮，当点击后触发事件，将参数的以有效键值对形式传入服务器

	例如：
	<p>姓名：<input type="text" name="user"></p>
	<p>密码：<input type="password" name="pwd"></p>

	将用户输入的内容，和name的值进行打包传入服务器

	当input标签内的type属性的值设置：type="checkbox"

	格式：
	<input type="checkbox" name="" value="">
	必须要设置name和value，当勾中后提交，会将name和value打包发给服务器
	checked = "checked" 当添加后，就会默认勾选

	例如：
	<p>爱好
	篮球<input checked = "checked" type="checkbox" name="hobby" value="basketball">
	足球<input type="checkbox" name="hobby" value="football">
	双色球<input type="checkbox" name="hobby" value="shuangseqiu">
	</p>