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 垂直方向
在垂直方向上 会出现外边距合并的现象,小的会被大的合并 外边距塌陷
尽量只设置一个方向的距离,防止外边距塌陷
注意:设置heightwidth 宽高是内容的宽高,而不是盒子模型的宽高
可以使用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覆盖BB占据了第一行。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;
相对定位,在正常的的文档流中,可以使用正常的leftrighttopbottom 进行调整
相对定位:
按照自己的位置进行偏移,下面的元素不会进行补位(只会空出来)
2.绝对定位
参数 absolute,position: absolute;
绝对定位,脱离正常文档流,可以使用正常的leftrighttopbottom 进行调整,只能根据最近的父级模块 进行绝对的定位调整
父级相对定位,子级绝对定位,两个模块进行覆盖
绝对定位:
它会按照自己的父级定位进行移动,如果父级没有定位,那么他就会按照body进行移动,并且,下面的元素块会进行补(占据原先它的位置)
3.固定定位
参数 fixed,position: fixed;
完全脱离文档流,参照物窗口
固定定位与绝对定位有点相似,但是固定定位是使用leftrighttopbottom属性相对于整个浏览器的窗口进行定位,而不再相对于某个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 中间 topleftrightbottom
将背景图片至于中间的位置
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; 设置垂直居中
这是一个表格元素属性 默认tablevertical-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
一切皆对象 ,只有空的数据和数值0false
暗转换
相加时 优先字符串拼接,在做加减
相减时 优先对数值相减,在对字符串操作

引用值和原始值(概念)

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

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.toFixed5
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" : 要解析为 HTMLXML 并插入到树中的字符串
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.$(“锁定的标签”).clickfunction(){
事件函数
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;
}

本文作者:_wangkx

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

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   _wangkx  阅读(9)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起