目录
html
1.什么是html
全称是 HyperText Markup Language 即超⽂本标记语⾔，⼀种⽤于创建⽹⻚的标准标记语⾔
2.如何创建一个html文件
想要使⽤HTML需要创建HTML文件，每个网页都是⼀个HTML文件，html文件就是以 .html 结尾的⽂件。
在文件夹中右键新建文本文档，将文本文档修改后缀为 .html 即可。
<!DOCTYPE HTML> <html> </html>
3.html的标签
1.段落标签 p
2.标题标签 h1 h2 h3 h4 h5 h6
3.换行标签 br
4.水平线标签 hr
5.文本格式标签 b：加粗 u：下划线 i：斜体 s：删除线
等价于 strong ins em del
6.图片标签 img 常用属性：src 图片路径 alt图片显示不出来的提示信息 title 鼠标悬浮时的提示信息
图片路径有两种：相对路径 绝对路径
7.超链接 a标签 主要用来页面跳转
href属性：跳转页面的路径(可以相对也可以绝对),默认跳转当前页面
target属性 目标网页的打开方式 blank 新开一个网页
self当前网页 默认self
还可以设置锚点链接
8.列表标签 有序列表： ol(orderlist) li
无序列表：ul li
属性：有序列表 type 代表列表项目符号 disc(默认) circle(空心圆) square(正方形)
有序列表 type="a|A|i|I"
list-style-type：none 去除列表前符号
9.表格标签
table 表格标签
thead 表格的标题
caption 标题内容
tboody 表格的内部
th 代表列标题（表格的首行）
tr 表格的行
td 代表单元格
属性：
width宽度 height高度
border 边框
align 表格的水平对其方式 valign 表格的垂直对齐方式
表格细线化 cellpadding="0" cellspacing="0"
合并行
rowspan
合并列
rolspan
10.表单标签 from
作用：搜集用户提交的信息
属性：
action 表单信息提交路径(url)
method 提交方式 post提交 get获取
enctype 编码格式
name 自定义名称
表单标签指一系列标签：
input系列标签 type属性值 placeholder 提示信息
1.文本框 type=text
2.密码框 type=password
3.单选框 type=radio 多个name属性要一致 value是提交时的名字
4.label for="" 结合单选框 可以点文字选择 id必须
与label的for里的信息一样
5.复选框 type=checkbox name值必须为同一同名数组 value是提交的时候名字
6.按钮
6.1提交 summit
6.2重置 reset
6.3按钮 button 普通按钮 无作用 通常js提供作用
按钮鼠标触碰变小手cursor: pointer;
框去角border-radius: 5px;
属性：
value默认值
placeholder 提示信息
name 别名
readonly 只读
disable 禁用
size文本框的长度
maxlength文本框可输入的最大长度
textarea标签
1.文本域 textarea name="提交的属性名" id="" cols="列" row="行"
select标签
1.下拉框 属性：name="" id="" 默认单选 多选我忘了mul开头的
1.1 option 下拉的属性值
1.2 optfroup 分组
4标签的分类
1、块级标签block,独占一行 可以直接设置宽高 例如:div h系列 p ul ol form块级标签的宽默认是可视区域的宽度 100% 高度默认是自适应的 自动填充的
2、行内标签 inline，不独占一行，不可以直接设置宽高例如:span a strong del em
3、行内块标签inline-block 不独占一行，但是可以设置宽高 例如：img input 是不独占一行的行内块标签inline-block
div 块级元素 独占一行，可以通过css设置宽高
span 行内元素 不会独占一行
CSS
1.字体设置：
1.字体粗细 normal bold加粗 还可以是数字 bold<=>400 bolder<=>700
font-weight:bolder
2.字体样式 font-style normal italic斜体
3.字体名称 font-family
4.字体行高 line-height
5.连写方式 font:字体样式 字体粗细 字体大小/字体行高 字体名称
6.字体颜色 color
2.css三种引入方式：
1.内嵌式 style标签
2.行内样式
3.外部样式 做项目常用 用link标签引用.css文件
3.块级标签
宽默认是可视区域的宽度 100% 高度默认是自适应的 自动填充的
4.CSS选择器
1.标签选择器
2.id选择器 #id{} id是自定义的 每个标签的id不一致 简写：如： div#ipt 就是 <div id="ipt"></div>
3.类名选择器(标签的class属性可以相同) 语法：.类名 快捷：div.类名
4.通配符选择器 *{
margin:0;
padding:0;
} 一般用来清除标签自带的一些样式
5. 后代选择器 .父类标签 .后代标签{}
5.css三大特性
1.层叠性
2.继承性
3.优先级 顺序 行内>id>类名>标签>通配符
6.技巧
技巧1：line-height 可以实现单行文字的垂直居中 行高=盒子高度
技巧2：水平 text-align 值：left(默认) center right。 还可以设置img span a标签
去除a标签下划线 text-decoration:none
去除列表项目符号 list-style-type:none
7.css的盒子模型
有4个组成部分 content(内容区域) padding(内边距) border(边框) margin(外边距)
1.content
内容区域 主要设置宽高 width height
2.padding
内边距，有4个方向 会撑大盒子
(1) 按方向去设置padding-top/bottom/left/right
(2) 不指定方向
padding:上，右，下，左 顺时针 没有看对边
box-sizing:border-box 内边距会增大盒子的实际大小，此时需要使用box-sizing:border-box，会自动内减
3.border边框
会撑大盒子
边框粗细：border-width
边框颜色：border-color
边框样式：border-style 值：solid(实线) dotted(点线) dashed(虚线)
连写：border:3px red solid
4.margin外边距
不会撑大盒子用法和padding差不多
小技巧：
1.可以通过margin:0 auto 水平居中
2.是文本、img、span、a在父盒子水平居中，text-align:center
3.使单行文本垂直居中 line-height
5.盒子塌陷
问题:父盒子嵌套子盒子时，给子盒子的添加上margin时，会导致父盒子一起下降，这叫盒子塌陷
解决方案:
1.给父盒子添加上padding
2.给父盒子添加overflow:hidden
8.伪类选择器
a:hover{color:red;}鼠标悬浮改变字体颜色
9.去除得焦时的边框
outline：none
10.网页布局常用方式
1、标准流布局(元素的分类)
2、浮动(让垂直分布的盒子水平分布)
3、定位(使子盒子在父盒子中任意位置进行分布)
11.浮动
作用:让垂直分布的盒子水平分布
属性:float
属性值：left right
浮动的特点:
1、浮动的盒子会脱离标准流(脱标),会覆盖在标准流元素上
2、浮动找浮动，浮动的盒子会在上一个浮动的盒子的左右分布
3.影响:浮动的子盒子撑不起父盒子的高度.
解决方案：
1.给父盒子手动设置高度
2.给父盒子设置 overflow：hidden
12.定位
定位的分类 4种:
静态定位（默认的标准流),
相对定位（相对于自己原来的位置进行移动）,
绝对定位（相对于最近的有非静态定位的祖先元素进行移动 常用：父相子绝）,
固定定位（相对于游览器进行定位）
1.静态定位
（默认的标准流）
2.相对定位
（相对于自己原来的位置进行移动）
使用场景：
1.元素位置的微调
2.配合绝对定位 父相子绝实现子盒子在父盒子中任意位置移动
使用语法： 属性名position 属性值relative（相对） absolute（绝对） fixed（固定）
特点：
1.相对定位的元素在标准流中占有位置（没有脱标）
2.相对于自己原来的位置进行移动
3.绝对定位
（相对于最近的有非静态定位的祖先元素进行移动 常用：父相子绝）
使用场景
父相子绝
特点
1.脱离标准流（脱标）
2、如果祖先元素都没有设置过非静态定位，则默认相对于浏览器进行移动
4.固定定位
（相对于游览器进行定位）
布局技巧:
使用父相子绝 让子盒子在父盒子中水平垂直都居中
1、先设置父相子绝
2、方位属性值是百分数时，移动的值就父元素宽高的百分比
left:50%;
top:50%;
3、再向左移自身宽的50%，向上移自身高的50%
transform:translate(-50%,-50%);
/*元素的显示与隐藏:display:block;显示 display:noner隐藏 */
JavaScript
1.了解js
作用：给网页增加动态效果
特点：1.弱类型语言 2.跨平台 3.事件驱动
使用方式：
1.内部js 写在script标签内，嵌套在html代码里
2.外部js 在外部创建js文件，在html里面使用script引用 <script src="js文件路径">内部不可写js代码</script>
2.js的输入输出语句
1.输出语句：
1.控制台输出语句
console.log("")
2.网页输出语句
document.write("")
3.浏览器弹出对话框
alert("")
4.浏览器弹出确认框
confirm("")
5.浏览器弹出输入框，输入语句
prompt("")
注释: • // 单行注释 ctrl+/ • /**/ • 多行注释 shift+alt+a
3.js的变量
特点
1.是存储数据的容器
2.变量由变量名、变量值、变量的数据类型
3.变量值可以改变
4.js声明变量的关键字：var let const(常量)
变量的命名规则：
数字 字母 下划线 $
变量的特殊使用情况
1.只声明 不赋值 undefind
2.不声明 不赋值 报错
3.不声明 赋值 可以使用 但不推荐使用
4.数据类型
1.基本数据类型
1.基本数据类型：string number boolean undefined null
1.string
1.字符串类型：string 语法 '' 或者 ""
字符串的嵌套（外双内单 外单内双）
1.转义字符串:\n \t \f \
2.字符串的长度 字符串中字符的个数 变量名.length
3.字符串的拼接 + true=1 false=0
4.模板字符串 模板字符串 不是这个'' 是~ 语法：${变量名}
作用：1.可以解析变量
2.可以解析html标签
例：
var age = 18;
console.log("今年",age,"岁")
console.log(今年${age}岁)
2.Number
2.Number类型：整型、浮点型、NaN（not a number）
注意：
1.凡是跟NaN进行运算(+前后有字符串时，不算运算 +是拼接)，结果都是NaN
2.NaN与NaN本身不相等
typeof可以用来获取变量的数据类型: var age = 18; console,log(typeof age)//number
console.log(NaN+"hello")//NaNhello
isNaN() 可以用来判断是不是NaN，返回true|false
判比null和true和false为false
3.类型转换
转成数字类型number
1.自动转换 涉及到算数运算，有一方是数字类型，另一方就会自动转成数字类型
注意:+如果有一方是字符串，另一方会自动转成字符串进行拼接
2.强制类型转换 parseInt（）：转整数
parseFloat（）：小数 Number（）：数字
console.log(Number("123aa"));//NaN
console.log(parseInt("123aa"));//123
console.log(parseFloat("123.233aa"));//123.233
3.转出布尔值Boolean()
1.表示否定的、空的、值为0的这些，转成布尔值是false，其他的转成布尔值都是true
2.一般if，while后的表达式会自动转成boolean值
4.confirm()游览器弹出的确认框 返回的boolean 确认true 取消false
2.引用数据类型
对象类型Object- - (对象)，比如：array - - （数组）、function - - （函数）、date- - （时间）等；
5.js运算符
true:1 false:0
1.短路机制
短路机制：(逻辑中断) 在逻辑运算符两边是布尔表达式的时候， 当程序运行到可以奠定结果的时候，后续的表达式不再执行，
-
短路 || 一个为真则为真
左边为真，右边不再执行，结果就是左边表达式的值
左边为假，执行右边，结果就是右边表达式的值
console.log(3 + 4 || 5);// 7 var a = 0; console.log(0 || ++a);//1 a=1 console.log(9 || ++a);//9 console.log(a);//1
-
短路&&
左边为真，执行右边。结果就是右边表达式的值
左边为假，不再执行右边。结果就是左边表达式的值
~~~javascript
var b=0;
b=1
console.log(3+9 && ++b);//1 b=1
console.log(b++);//1 b=2
console.log(0 && ++b);//0 b=2
console.log(b);//2 ~
2.三元运算符
语法： 布尔表达式?结果1 :结果2
6.js流程控制
js流程控制有三种结构：顺序结构 分支结构 循环结构
1.分支结构
单分支 双分支 多分枝
1.单分支 if单分支
2.双分支 if...else... 三元运算符
3.多分枝 else if switch
switch和else if 的区别：
-
一般情况下，它们两个语句可以相互替换
-
switch...case 语句通常处理 case为比较确定值的情况，而 if...else..语句更加灵活，常用于范围判断(大于、等于某个范围)
-
switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if...else 语句有几种条件，就得判断多少次。
-
当分支比较少时，if...else语句的执行效率比 switch语句高:
-
当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。
2.循环结构
for while do...while
作用：用来重复执行某些代码块
2.1 while循环
思路：先判断后执行
注意：
1.循环体至少执行0次
2.一定要有退出条件，否则陷入死循环
2.2 do...while循环
思路：先执行后判断
注意：
1.至少执行1次
2.必须有退出条件
2.3 for循环
思路：先判断再执行
注意：
1.至少执行0次
2.侧重于提前知道循环次数
3.for的小括号内没有表达式for(;;)，循环陷入死循环
2.4区别：
1.如果提前知道循环次数，推荐使用for循环
2.如果不知道循环次数，可以使用while和do while
3.如果至少执行一次循环体，使用do while循环
3.循环嵌套
外层循环代表行 内存循环代表列 内层循环执行一遍，外层循环执行一次
4.跳出循环
break是跳出所有循环 后续循环不再执行
continue是跳过本次循环 后续继续执行
document.write("Hello, World!"); // 输出带有非断空格的字符串
7.数组
1. 数组的概念
-
数组是一组数据的集合
-
组成数组的数据，叫数组元素
-
数组元素的数据类型可以是任意类型
-
数组元素默认都有索引，代表数组元素的位置，默认从零开始，依次加一
2. 创建数组的方式
-
利用new关键字创建数组 语法：var 数组名 = new Array();
var arr = new Array();//创建一个空数组 var arr = new Array(n1,n2,n3...);创建一个非空数组
-
字面量方式创建数组
-
语法： var 数组名 = [n1,n2,n3...]
-
注意：
-
数组长度(数组元素的个数)=数组名.length
-
数组元素的数据类型可以是任意类型
-
3.使用数组(通过索引)
-
访问数组元素
var arr = [1,14,true,null,"aa"];//typeof arr[n] number number boolean object string //访问元素索引不存在时，返回undefined
-
修改数组元素
数组名[索引]=新元素
arr[0]=10;
-
增加数组元素 不推荐
-
arr[15]=5; //未设置值的用empty填充
-
访问没有元素的索引位置时，返回undefined 4.增加数组元素 比较推荐
-
arr[arr.length] = n;
-
遍历数组
1. for循环下标遍历
for(var i = 0;i<arr.length;i++){
console.log(arr[i]);}
2. for...in... 适合遍历对象的属性
for(var i in arr){
console.log(arr[i])
}
3. for...of
var colors = ['red', 'green', 'blue'];
// 使用 for...of 遍历数组
for (var color of colors) {
console.log(color);
}
4. Array.forEach()
var colors = ['red', 'green', 'blue'];
colors.forEach(function(i){
console.log(i)
})
var fruits = ['apple', 'banana', 'orange'];
// 使用 forEach 方法遍历数组并打印每个元素及其索引
fruits.forEach(function(fruit, index) {
console.log('Fruit at index ' + index + ': ' + fruit);
});
8.函数
1.js函数的概念
函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
2.函数的使用
函数在使用时分为两步:声明函数和调用函数
1.声明函数
-
自定义函数方式(命名函数)
语法： function 函数名(){ //操作语句 } 调用方式：函数名()
2.表达式函数声明
var/let/const 变量名 = function(){
操作语句
}
调用方式：变量名()
注意： 1.自定义函数声明的函数，函数可以先声明再调用，也可以先调用再声明
2.表达式声明的函数必须先声明再调用
3.函数的参数
-
形参 形式上的参数 在函数声明处
-
实参 实际上的参数 在函数的调用处
-
形参和实参个数不匹配时,实参大于形参无所谓，但是实参小于形参或没有时，缺少的会实参会变undefined
function greet(name) { console.log("Hello, " + name + "!"); } greet(); // 在调用时没有传入实参 输出'Hello,undefined!' -
返回值
注意:
1、return后面不能有逻辑代码，即使有也不会执行
2、函数如果没有return,默认返回值是undefined
-
arguments属性 是js的一个内置对象，js每一个函数体内都会有arguments
伪数组：
● 具有 length 属性
● 按索引方式储存数据
● 不具有数组的 push , pop 等方法注意：在函数内部使用该对象，用此对象获取函数调用时传的实参。
使用场景：当不确定实际传的参数个数时，可以通过arguments获取实参
4.ES6箭头函数 ()=>{}
箭头函数的简写情况:
1、如果参数只有一个，小括号可以省略
2、如果你函数体只有一行语句，且是return语句。{}也可以省略
let 和 var声明的变量可以重新赋值 const声明的变量不能重新赋值，一般用于声明常量)
9.作用域
js作用域有3种:
1、全局作用域(整个js文件，或者script标签内部)
2、函数作用域(局部作用域)函数体{}内部区域
3、块级作用域(ES6新增的)所有{}包括主的区域
1、全局作用域
在全局作用域声明的变量，叫全局变量
关键字：var let const(常量)
2、函数作用域(局部作用域)
在函数作用域声明的变量叫局部变量，局部变量只在当前作用域有效
关键字：var let const(局部常量)
3.块级作用域(es6) 所有{}包括住的区域
(1)在块级作用域声明的变量叫局部变量，局部变量只在当前作用域内有效
(2)var是es5之前就有的 let const是es6提出来的
let const受块级作用域的影响 var只受函数作用域的影响
var let const的区别：
1、var let声明的是变量 const声明的是常量
2、var 声明的变量可重复声明、可重新赋值
let声明的变量不可以重新声明，但是可以重新赋值
const声明的常量不可重新声明、赋值
3.let var在for循环中的应用区别
for (var i = 0; i <= 9; i++) {
console.log(i);//全局变量
}
console.log(i);//10
for (let j = 0; j <= 9; j++) {
console.log(j);//局部变量
}
//报错console.log(j);
for循环中循环变量为了不受外界干扰，尽量使用let关键字声明
特殊情况
在函数内部，不使用关键字声明的变量，也是全局变量
10.js对象
万物皆对象，对象内部包含属性和方法部分以键值对的形式存放
js对象有三种：自定义对象 内置对象 浏览器对象
1.自定义对象的三种创建方式
1.字面量方式创建自定义对象
var obj={} //空对象
var obj={
属性名：值
方法名:function(形参){}
方法名:(形参)=>{}
}
1.访问对象的属性|方法 对象名.属性名|对象名.方法名(实参)
2.修改对象的属性 对象名.属性名=新值
3.新增对象属性 对象名.新增属性名=值
4.新增对象方法 对象名.方法名=function(形参){
//操作语句
}
2.new object创建对象
var obj= new Object();
新增属性和方法 obj.属性名=值
obj.方法名=function(){}
obj.方法名=()=>{}
3.利用构造函数创建对象
1.构造函数创建对象存在的原因是:前两种方式一次只能创建一个对象，效率低
2.构造函数内部封装了对象的公有属性和方法,构造函数名首字母大写
function 构造函数名(参数列表){
this.属性1=参数1,
this.属性2=参数2,
...
}
var 对象名 = new 构造函数名(实参列表)
新增属性
对象名.属性名=值
新增方法
对象名.方法名=()=>{}
构造函数的注意点:
1、构造函数的函数名，首字母要大写，用以区分普通函数
2、new 一个构造函数，得到一个对象
3、构造函数内部this 指的创建的对象，new的同时会自动调用构造函数
4、构造函数不需要retrun
2.遍历对象 for...in...
for (变量 in 对象名字) {
// 在此执行代码
}
// for in 用来遍历对象
for(var key in stu){
// console.log(key); //遍历对象的键
// console.log(stu[key]); //遍历对象的值
console.log(${key}:${stu[key]});
}
// for in 也可以遍历数组
var arr=[1,2,3,4,5,6,7,8,9]
for(var i in arr){
console.log(i); //遍历数组的索引
console.log(arr[i]); //遍历数组的值
}
11.js事件
js事件：用来完成特效
1.js事件三要素
1.事件源
2.事件类型
3.事件处理程序
2.js事件执行的步骤
1.获取事件源
2.注册事件
3.绑定事件处理程序
3.事件对象 写在绑定事件函数的形参里
只要事件发生就会产生一个event事件
事件发生后创建对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行
-
event事件对象常见的属性和方法
e.target 返回触发事件的对象 标准
e.srcElement 返回触发事件的对象 非标准ie6-8
e.type 使用返回事件的类型，比如:click，mouseover不带on
e.returnValue I 该属性阻止默认事件(默认行为)ie6-8，比如不让链接跳转
e.preventDefault 该属性阻止默认事件(默认行为)标准，比如不让链接跳转
e.stopPropagatio 阻止冒泡 【标准】
e.cancelBubble 阻止冒泡【ie】
4.js事件注册有两种方式：
1.传统注册方式(on方式)
let box = document.getElementById("box)
box.onclick = function(){
console.log("我被点击了");
}
2.事件监听注册方式，比较常用
getElementById返回的是单个元素 可以直接通过对象调用addE...
getElementByClassName 返回的是collection集合 必须遍历集合用每个数组元素进行调用
let two = document.getElementById("two")
two.addEventListener("click",function(){
console.log("哈哈哈哈我被点击了")
})
对比：
传统注册方式只能给一个事件源的相同事件类型绑定唯一的事件处理程序
事件监听方式可以给一个事件源相同事件类型绑定多个事件处理程序
5.阻止事件的默认行为
1. 事件监听方式： 通过事件对象event调用preventDefault()方法可以阻止事件的默认行为
2. 传统方式直接return false;即可
12.ES6
ES6新增的数据类型：Symbol Set Map
1.Symbol
代表独一无二 与任何值都不想等 包括自己 新增的基本类型
如果扩充方法时，与对象原有的方法重名时，会覆盖原来的方法
使用symbol避免方法重名
let sayBye = symbol()
obj[sayBye] = function(){
console.log("嘿嘿嘿");
}
objsayBye 调用
2.Set
ES6新增的引用数据类型 类数组 类似于数组 与数组的区别：元素不重复 new Set([n1,n2,n3...]) 参数为数组
~~~js
let set = new Set([1,3,4,5,3,5,3]); console.log(set)//set {1,3,4,5} ~
// set的长度 .size // ...是解构 console.log(...arr) // 1 2 3 4 5 let arr = [1,2,3,4,5,6,3,2,1] let set = new Set(arr); //arr去重 得到一个set集合 console.log(set)//打印的仍然是set类型 console.log([...set]) //先解构set 再[]转为数组
常用方法：
1.add()增加数据 返回set结构本身，并修改原数据，可以链式调用
let set = new Set([1,3,5,7,1,5,7])
set.add(6).add(8)
2.delete()删除数据返回布尔值并修改原数据
console.log(set.delete(1)?"成功":"失败")//成功
3.has()判断是否存在某个数据返回布尔值
console.log(set.has(1));//false
4.clear()清空所有数据没有返回值
set.clear();
13.常用的数组方法
1.复习 数组的遍历 for循环遍历 for...in遍历
// for循环遍历
let arr = new Array(1,3,4,5,6)
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
for in
for(let i in arr){
console.log(arr[i])
}
2.补充几个常用的数组方法：forEach,map,filter,some,every
1.forEach
f:回调函数 itrm：数组元素 index：索引
语法：数组名.forEach(f(item[,index]){
//操作语句
})
语法：数组名.forEach(f(item[,index]){
//操作语句
})
let arr = new Array(1,3,4,5,6)
arr.forEach((item,index)=>{
console.log(item)
})
//创建对象
let data = {
list:[{
name:'lala',
sex:'nan',
score:'88'
}]
...
}
//data.list拿到对象数组.forEach进行遍历 i是list数组的每一个元素
data.list.forEach((i)=>{
console.log('${i.name}') //拿到list数组的name属性的值
})
2.map
遍历数组，并对数组元素进行处理 返回新数组 注意：一定要返回数组的所有的元素
语法：数据声明 新数组名 = 数组名.map(item=>{
//操作语句
return ...
})
~~~js
//所有学生成绩加1分 let newScore = data.list.map(i => { return { name: i.name, sex: i.sex, score: Number(i.score) + 1 } }) console.log(newScore) ~
3.filter
筛选出符合条件的元素，组成新数组
语法 数组名.filter((item[,index]){
return 筛选条件
})
//筛选大于5的元素
~~~js
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 1, 5, 4]; arr.filter((item, index) => { return item >= 5 }).forEach(i => { console.log(i) }) ~
4.some/every
some:数组中只要有一个元素满足条件 就返回true，否则false
every:数组中每一个元素都满足条件时返回true，否则false
语法：
数组名.some|every(item=>{
retrun 条件
})
14.前后端交互
1.回调函数 callback
离不开异步任务
1.1当一个函数作为参数传入另一个函数中，并且它不会立即执行，只有当满足一定条件后该函数才可以执行，这种函数就称为回调函数。
补充：
js内置的一个定时器函数，settimeout
setTimeOut(函数,毫秒数) 指定函数在指定时间后执行
setInterval语法也是一样的，用于每隔一定的时间重复执行一个函数或代码块
1.2回调地狱
回调函数嵌套层次较多时，就叫回调地狱
缺点：代码冗余 可读性差 耦合性强 维护性差
2.同步与异步
同步任务：
在主线程上任务一个接着一个执行，一个任务执行必须等待前一个任务执行完毕
异步任务：
不进入主线程，进入异步队列，前一个任务是否执行完毕不影响下一个人任务的执行
js执行任务时，先执行同步任务，再执行异步任务
3.promise对象
Promise是js的对象(ES6)
作用：用来解决回调地狱
console.log以字符串格式打印
console.dir以对象格式打印
语法:
Promise(fuction(resolve，reject){
//操作语句
})
promise对象.then(function(resolve){},function(reject){})
思路：通过promise对象调用then方法解决问题
具体步骤：
// 1.封装可能会有回调地狱问题的函数，返回promise对象
function showWords(words, time) {
return new Promise(function (resolve, reject) {
var boo = true;
if (!boo) {
reject("fail!!")
boo=false;
}
resolve("success!!!")
setTimeout(function(){
console.log(words);
},time)
})
}
// 2.通过返回的promis对象调用then方法对resolve和reject数据进行处理，需要回调，在then方法的形参函数中进行回调，再调用封装好的函数
showWords("1111", 3000)
.then(function (res) {
console.log(res);
return showWords("2222", 3000 * 2)
}, function (err) { console.log(err); })
.then(res => {
console.log(res);
return showWords("3333", 3000 * 3)
})
.then(res => {
console.log(res);
return showWords("4444", 3000 * 4)
})
.then(res => { console.log(res); })
4.async/await(ES7)
也是解决回调地狱
async/await是ES7提出的新语法，用来简化Promise的异步操作.then()链式调用Promise虽然解决了回调地狱的问题，但是代码长，阅读性差，不易理解
所以就有了async/await
1、async修饰过的函数，会变成一个异步函数，函数返回的是一个Promise对象如果函数返回一个值，promise会把这个值通过promise.resolve()封装成一个promise对象I
2、await是等待的意思
因为 async 函数返回一个 Promise 对象，所以 await 可以用于等待一个 async 函数的返回值
1、async await是基于Promise的
2、async修饰的函数会变成异步函数
3、await是等待的意思 没一个异步操作前面都会用await修饰
~~~js
async function fn() { try { let res1 = await showWords("5555", 3000) //返回的是resolve或reject console.log(res1) //输出信息 } catch(err) { console.log(err);} } fn() ~
15.Ajax的请求和封装
1.概念
Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。
Ajax可以实现网页与服务器之间的数据交互
XMLHttpRequest js内置对象 用来创建请求对象 发送ajax请求
2.原生Ajax请求步骤
1.创建xhr对象
2.配置请求方式和路径
3.监听状态变化
4.发送请求
3.具体步骤案例
<script>
let article = document.getElementById("article");
//innerHTML获取标签的内部标签
console.log(article.innerHTML);
// 1.创建xhr对象
var xhr = new XMLHttpRequest()
// 2.配置请求方式和路径
xhr.open("get", url)
// 3.监听状态变化
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
//readyState的五个状态
//0: 请求未初始化
//1: 服务器连接已建立
//2: 请求已接收
//3: 正在处理请求
//4: 请求已完成且响应已就绪
//请求成功 操作语句
console.log(xhr.responseText)
// JOSN.parse() 可以把json字符串转成数组
var data = JSON.parse(xhr.responseText);
// 拿到数据之后 把数据渲染到页面上 获取dom节点
let newdata = res.data.filter((item, index) => {
return index <= 10
});
console.log(newdata);
//准备字符串
let strhtml = ""
newdata.forEach(item => {
strhtml +=
<div class="item">
<div>标题:${item.title}XXX</div>
<div>时间:${item.create_at}XXX</div><div>内容:${item.content}XXX</div>
</div>
});
console.log(strhtml);
//将字符串渲染页面
article.innerHTML = strhtml
}
}
// 4.发送请求
xhr.send();
</script>
16.axios
1.请求方式
1.jQuery：比较重，如果需要另外引入不建议使用
2.axios:轻量级
·封装XmlHttpRequest对象的ajax
·promise风格
·可以用在浏览器端和node服务器端
2.axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范
3.特性
● 从浏览器中创建 XMLHttpRequests
● 从 node.js 创建 http 请求
● 支持 Promise API
● 拦截请求和响应
● 转换请求数据和响应数据
● 取消请求
● 自动转换 JSON 数据
● 客户端支持防御 XSRF
4.引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
5.post和get的区别
post一般用来提交数据
get一般用来获取数据
6.axios的get和post请求
axios.get("url",params{参数}).then().catch()
axios.post("url",{参数}).then().catch()
<script>
//1.发送不带参数的get请求
axios.get("url")
.then(res => {
//res是对象
//请求成功的函数
//对数据进行处理
})
.catch(err => {
//请求成功的函数
console.log(err);
})
//2带参数直接url后面加参数
//3.带参数
//id为1的数据
axios.get("url", {
params: {
id: 1
}
}).then(
res=>{
console.log(res)
}
)
</script>
</html>
17.es6模块化
//页面加载事件
// window.onload = function(){}
// window.addEventListener("load",function(){})
模块化定义
每个js文件都是一个独立的模块
导入其他模块成员使用import关键字
导出模块成员使用export关键字
npm init -y
前提：node.js中使用es6模块化的条件
node版本在16.0以上
在package.json文件中添加 “type":"module"
1.在node.js中使用ES6模块化
1、前置步骤
（前提是node.js版本大于等于V14.15.1)
-
新建文件夹，用VScode打开，打开终端
输入 npm init 初始化项目，一路回车，项目初始化成功，自动生成package.json文件
或者直接输入 npm init -y (默认一路回车）
2.在package.json根节点中添加“type":"module" 结点，(默认是commonJS模块化)就可以使用ES6模块化了
2.ES6模块化的3种用法
1.默认导入导出
导入：import 变量名 from "模块路径"
导出：export default{}
2.按需导入导出
导入：import {导出的变量名 as 别名} from = "导出的模块路径"
导出：export 需要导出的元素
3.直接导入导出
导出：整个代码块
导入：import “模块路径.js文件”
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
