湘潭做网站找磐石网络一流,上海红酒网站建设,深圳网站建设 罗湖,代理网络工具下载B站pink老师JavaScript 869集笔记
计算机基础部分
1、编程语言
1.1 编程
编程:就是让计算机为解决某个问题而使用某种程序设计语言编写代码程序#xff0c;并最终的得到的过程
计算机程序#xff1a;就是计算机所执行的一系列的指令集合#xff0c;而程序全部都是用我们…B站pink老师JavaScript 869集笔记
计算机基础部分
1、编程语言
1.1 编程
编程:就是让计算机为解决某个问题而使用某种程序设计语言编写代码程序并最终的得到的过程
计算机程序就是计算机所执行的一系列的指令集合而程序全部都是用我们所掌握的语言来编写的所以人们要控制计算机一定通过计算机语言向计算机发出指令。
1.2 计算机语言
计算机语言是指用于人与计算机之间通讯的语言它是人与计算机之间传递信息的媒介
计算机语言分为三种
机器语言汇编语言高级语言
实际上计算机最终所执行的都是机器语言它是由“0”和“1”组成的二进制数二进制是计算机语言的基础
1.3 编程语言
编程语言分为 汇编语言 汇编语言和机器语言实质是相同的都是对硬件操作只不过指令采取了英文缩写的标识符容易识别和记忆。 高级语言 高级语言主要是相对于低级语言而言它并不是指某一种具体的语言而是包括了很多编程语言常用的有C语言、C、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等
1.4 翻译器
高级语言所编制的程序不能直接被计算机识别必须经过转换才能被执行为此我们需要一个编辑器。编辑器可以讲我们所编写的源代码转换为机器语言这也被称为二进制化。记住1和0
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xeaFIUJC-1620388130787)(pink老师js869集笔记.assets/image-20200716164225199.png)]
1.5 编程语言和标记语言区别
编程语言有很强的逻辑和行为能力。在编程语言里你会看到很多 if else、for、while等具有逻辑性的行为能力的指令这是主动的。标记语言HTML不用于向计算机发出指令常用于格式化和链接。标记语言的存在是用来被读取的他是被动的
总结
计算机可以帮助人类解决某些问题程序员利用编程语言编写程序发出指令控制计算机来实现这些任务编程语言有机器语言、汇编语言、高级语言高级语言需要一个翻译器转换为计算机识别的机器语言编程语言是主动的有很强的逻辑性
2、计算机基础
2.1 计算机组成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iblXPekL-1620388130789)(pink老师js869集笔记.assets/image-20200716164238943.png)]
2.2 数据存储
计算机内部使用二进制0和1来表示数据所有数据包括文件、图片等最终都是以二进制数据0和1的形式来存放在硬盘中的所有程序包括操作系统本质都是各种数据也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件其实就是把程序文件复制到硬盘中硬盘、内存都是保存的二进制数据
2.3 数据存储单位
bitbytekbGBTB……
位(bit):1bit可以保存一个0或者1 最小的存储单位字节(Byte):1B8b千字节(KB):1KB1024B兆字节(MB):1MB1024KB吉字节(GB):1GB1024MB太字节(TB):1TB1024GB……
JavaScript基础部分
1、初始JavaScript
1.1 JavaScript历史
布兰登 艾奇10天完成JavaScript设计网景公司最初命名位liveScript后来于Sun合作之后将其改为JavaScript
1.2 JavaScript 是什么
JavaScript是世界上最流行的语言之一是一种运行在客户端的脚本语言Script是脚本的意思脚本语言不需要编译运行过程中由js解释器js引擎逐行来进行解释并执行现在也可以基于Node.js技术进行服务器端编程
1.3 JavaScript的作用
表单动态校验密码强度检测JS产生最初的目的网页特效服务端开发Node.js桌面程序ElectronAPPCordova控制硬件-物联网Ruff游戏开发cocos2d-js
1.4 浏览器执行JS简介
浏览器分成两部分渲染引擎和js引擎
渲染引擎用来解析HTML与CSS俗称内核比如chrome浏览器的bink老版本的webkitJS引擎也成为JS解释器。用来读取网页中的JavaScript代码对其处理后运行比如chrome浏览器的V8
浏览器本身并不会执行JS代码而是通过内置JavaScript引擎解释器来执行JS代码。JS引擎执行代码时逐行解释每一句源码转换为机器语言然后由计算机去执行所以JavaScript语言归为脚本语言会逐行执行
1.5 JS的组成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-onDPSyYt-1620388130790)(pink老师js869集笔记.assets/image-20200716164255833.png)] ECMAScript ECMAScript是由ECMA国际原欧洲计算机制造商协会进行标准化一门编程语言这种语言在万维网上应用广泛它往往被称为JavaScript但实际上后两者是ECMAScript语言的实现和扩展。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AnHEFQOe-1620388130792)(pink老师js869集笔记.assets/image-20200716164310553.png)] DOM——文档对象模型 文档对象模型是W3C组织推荐的处理可扩展标记语言的标准编程接口通过DOM提供的接口可以对页面上的各种元素进行操作大小、位置、颜色等。 BOM——浏览器对象模型 BOM是指浏览器对象模型它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口比如弹出框、控制浏览器跳转获取分辨率等
1.6 JS初体验
js的书写方式 行内式直接在元素里面写就可以 input typetext onclickalert(弹出)可以讲单行或少量JS代码写在HTML标签的事件属性中以on开头的属性注意单双引号的使用在HTML中我们推荐使用双引号js中我们推荐使用单引号可读性差在HTML中编写JS大量代码时不方便阅读引号易错引号多层嵌套匹配时非常容易混淆特殊情况下使用 内嵌式 script/* 内容*/
/script最常用的方法 外部 script src/script利于HTML页面代码结构化把大段JS代码独立到HTML页面之外既美观也方便文件级别的复用引用外部JS文件的script标签中间不可以写代码适用于js代码量比较大的情况
1.7 js注释
单行注释 用//多行注释用 /* */
1.8 js输入输出语句
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JtKFqpq1-1620388130794)(pink老师js869集笔记.assets/image-20200716164322377.png)]
2、变量
2.1 什么是变量
白话变量就是一个装东西的盒子
通俗变量用于存放数据的容器。我们通过变量名获取数据甚至数据可以修改
2.2 变量在内存中存储
本质变量是程序在内存中申请的一块用来存放数据的空间
2.3 变量的使用
scriptvar age;age1;
/script声明变量 var 是一个js关键字用来声明变量。使用该关键字声明变量后计算机会自动会变量分配内存空间不需要程序员管age是程序员定义的变量名我们要通过变量名来访问内存中分配的空间 赋值
2.4 变量语法拓展 声明变量特殊情况
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fbTYTpEv-1620388130796)(pink老师js869集笔记.assets/image-20200716164335135.png)]
2.5 变量命名规范
由字母A-Z a-z、数字0-9、下划线、美元符号组成严格区分大小写不能以数字开头不能是关键字、保留字变量名必须有意义遵守驼峰命名法首字母小写后面单词的首字母要大写
2.6 案例变量的两个值交换 script//两个数 值 交换var temp;//temp 用来交换存储var appl1 青苹果, appl2 红苹果;temp appl1;//先把 appl1 的值 给tempappl1 appl2;//appl2的值 给appl1appl2 temp;//temp的值 给appl2console.log(appl1);console.log(appl2);/script小结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hVWRgQfM-1620388130797)(pink老师js869集笔记.assets/image-20200716164448091.png)]
3、数据类型
3.1 数据类型
在js中运行代码时变量的数据类型是由JS引擎根据号右边变量值的数据类型来判断的运行完毕之后变量就确定了数据类型
js是动态语言 变量的数据类型是可以变化的 scriptvar x10;// x是字符型xpink;// x是字符串型/script3.2 数据类型分类
js把数据类型分为两类
简单数据类型复杂数据类型object
3.3 简单数据类型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H00iRNbO-1620388130797)(pink老师js869集笔记.assets/image-20200716164459968.png)]
3.3.1 数字型 数字型进制 八进制0-7 以0打头十六进制0-9a-f 以0x打头 范围 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M8lamRV2-1620388130799)(pink老师js869集笔记.assets/image-20200716164510774.png)] 数字型特殊值 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PPykc2oj-1620388130800)(pink老师js869集笔记.assets/image-20200716164520623.png)]
4.判断一个变量是否为数字型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ho50nwGt-1620388130801)(pink老师js869集笔记.assets/image-20200716164531499.png)]
3.3.2 字符串型
转义符 使用的时候一定要用引号包裹起来转义符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nlol9pcj-1620388130801)(pink老师js869集笔记.assets/image-20200716164545515.png)]
字符串长度 通过length获取
字符串拼接
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FwYg86j4-1620388130802)(pink老师js869集笔记.assets/image-20200716164557978.png)] script// 只要有字符串和其他类型拼接最后也是一个字符串数据console.log(沙漠 骆驼);//结果是沙漠骆驼console.log(pink老师 18);//结果是pink老师18console.log(pink老师 true);//结果是pink老师trueconsole.log(12 12);//结果是1212console.log(pink老师 18 岁);//结果是pink老师18岁var age 28;console.log(pink老师 age 岁);//结果是pink老师28岁//我们变量不要直接写在字符串里面是通过和字符串相连的方式实现的//变量和字符串相连的口诀引引加加console.log(pink老师 age);/script3.3.3 布尔型
布尔型只有两个值true、false
布尔型参与运算true是1false是0
3.3.4 undefined、null scriptvar str1 undefined;console.log(str1 pink);//undefinedpinkconsole.log(str11);// 声明了变量没有赋值的数据和数字型的数据相加结果是NaN// null控制var spacenull;console.log(str1 pink);//nullpinkconsole.log(str11);// 1/script3.4 获取变量数据类型 typeof script// typeof 可以用来获取检测变量的数据类型var num 10;console.log(typeof num);// numbervar str pink;console.log(typeof str);// string/script3.5 数据类型转换
常见的数据类型转换
转换为字符串类型转换为数字型转换为布尔型
3.5.1 转换为字符串
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nvoBXDTH-1620388130803)(pink老师js869集笔记.assets/image-20200716164609980.png)]
最重要的是加号拼接字符串 第三种也成为隐式转换 script// 1 变量.toString()var num 10;var str num.toString();console.log(str);// 2 利用String(变量)console.log(String(num));// 3 利用加号 拼接字符串console.log( num);/script3.5.2 转换为数字型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tU5nfOjw-1620388130804)(pink老师js869集笔记.assets/image-20200716164621107.png)]
前两种最为常用、重点 script// 转换为数字型var age 18;// 1 parseInt(变量) 可以把字符型转换为数字型它是取整的console.log(parseInt(age));console.log(parseInt(3.9));// 3console.log(parseInt(120px));// 120 自动去掉后面的单位console.log(parseInt(rem120px));// NaN// 2 parseFloat(变量) 可以把字符型转换为数字型可以得到小数console.log(parseFloat(3.14));// 3.14console.log(parseFloat(120px));// 120console.log(parseFloat(rem120px));// NaN// 3 Number(变量)console.log(Number(123));// 123// 4 利用加减乘除 隐式转换console.log(12-0);// 12/script案例计算年龄 !-- 在页面中弹出一个输入框我们输入出生年月份后能计算出我们的年龄 --scriptvar year prompt(请输入出生年份);var age 2018 - year;//year过来是字符串型 但是我们用的是减号有隐式转换alert(您今年 age 岁啦);/script案例简单加法计算器 script//用户输入第一个值后继续弹出第二个输入框并输入第二个值最后通过弹出窗口显示出两次输入值相加的结果var num1 prompt(请输入第一个数值);var num2 prompt(请输入第二个数值);alert(最终结果为: (parseFloat(num1) parseFloat(num2)));//如果不给num1 num2加括号 则会是字符串型/script3.5.3 转化为布尔型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ArXqmODF-1620388130805)(pink老师js869集笔记.assets/image-20200716164636226.png)]
4、标识符、关键字、保留字
4.1 标识符
定义就是指开发人员为变量、属性、函数、参数取的名字
4.2 关键字
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PZM1rdPs-1620388130806)(pink老师js869集笔记.assets/image-20200716164649385.png)]
4.3 保留字
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OXXzgwiV-1620388130807)(pink老师js869集笔记.assets/image-20200716164658984.png)]
5、JavaScript运算符
5.1 运算符
运算符也被称为操作符是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript常见的运算符有
算数运算符递增和递减运算符比较运算符逻辑运算符赋值运算符
5.1.1 算术运算符
定义算术运算使用的符号用于执行两个变量或值的算术运算。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kZmN1ulm-1620388130808)(pink老师js869集笔记.assets/image-20200716164710617.png)]
浮点数进行算数运算会有问题的
5.1.2 递增递减运算符
在js中递增和递减既可以放在变量前面也可以放在变量后面。放在变量前面时我们可以称为前置递增递减运算符放在变量后面时我们可以称为后置递增递减运算符
注意递增和递减运算符必须和变量配合使用
注意
1、前置自增和后置自增 如果单独使用效果是一样的
2、后置递增先表达式返回原值 后面变量再1
3、前置递增先变量1后表达式返回原值
4、与其他代码连用时执行结果会不同 script// 前置递增运算符 写在变量前面// 先加1在返回值var age 10;age;// 类似于ageage1var p 10;console.log(p 10);// 21// 后置递增 变量var age 10;console.log(age 10);//20var a 10;a;// a 11 a11var b a 2;// a12 a12console.log(b);//14var c 10;c;//c11 c11var d c 2;//c12 c11 console.log(d);//13var e 10;var f e e;//e10 e11 e12 e12console.log(f);//22/*1、前置自增和后置自增 如果单独使用效果是一样的2、后置递增先表达式返回原值 后面变量再13、前置递增先变量1后表达式返回原值4、与其他代码连用时执行结果会不同*//script5.1.2 比较运算符 定义比较运算符关系运算符是两个数据进行比较时所使用的运算符比较运算后会返回一个布尔值true/false作为比较运算的结果 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n3c7SGNc-1620388130809)(pink老师js869集笔记.assets/image-20200716164725972.png)]
等号有隐式转换。全等要求两侧的值、数据类型必须一样。双等只要求数值相等
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EFakPTFs-1620388130809)(pink老师js869集笔记.assets/image-20200716164741181.png)]
5.1.3 逻辑运算符 定义逻辑运算符是用来进行布尔值运算的运算符其返回值也是布尔值。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M48TazY7-1620388130810)(pink老师js869集笔记.assets/image-20200716164756060.png)] 短路运算原理当有多个表达式值时左边的表达式值可以确定结果时就不再继续运算右边的表达式的值 script/* 短路运算逻辑与短路运算特点语法表达式1表达式2如果第一个表达式为真则返回表达式2如果第一个表达式为假则返回表达式1逻辑或运算特点语法表达式1||表达式2如果第一个表达式为真则返回表达式1如果第一个表达式为假则返回表达式2*/console.log(123 456);// 456console.log(0 456);// 0console.log(0 1 2 456);// 0console.log(123 || 456);// 123console.log(0 || 456);// 456/script5.1.4 赋值运算符 定义用来把数据赋值给变量的运算符 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oarRZzh6-1620388130811)(pink老师js869集笔记.assets/image-20200716164807197.png)]
5.1.5 运算符优先级
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HIazVE6p-1620388130812)(pink老师js869集笔记.assets/image-20200716164816258.png)]
5.2 表达式和返回值
表达式是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解是由数字、运算符、变量等组成的式子
6、JavaScript流程控制
6.1 流程控制 定义流程控制就是来控制我们的代码按照什么结构顺序来执行 主要有3中结构
顺序结构分支结构循环结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lt2ZooPm-1620388130813)(pink老师js869集笔记.assets/image-20200716164826860.png)]
6.2 顺序结构 顺序结构是程序中最简单、最基本的流程控制他没有特定的语法结构程序会按照代码的先后顺序、依次执行程序中大多数的代码都是这样执行的 6.3 分支结构
6.3.1 分支结构—if语句 // 结构if(条件表达式){// 执行语句}条件表达式为真则继续执行大括号里面代码为假则不执行
6.3.2 分支结构—if else语句双分支语句 结构if(条件表达式){// 执行语句}else{//执行语句}6.3.3 分支结构—if else if语句 //结构if(条件表达式1){//语句1}else if(条件表达式2){//语句2}else if(条件表达式3){//语句3}else{//最后的语句}[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5KosszXI-1620388130813)(pink老师js869集笔记.assets/image-20200716164847480.png)]
6.3.4 三元表达式
三元表达式结构
条件表达式 表达式1 表达式2
如果条件表达式结果为真则返回表达式1的值
如果结果为假则返回表达式2的值
6.3.5 switch语句 定义switch语句也是多分支语句它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特点之的选项时就可以使用switch switch(表达式){case value1:执行语句1;break;case value2:执行语句1;break;case value3:执行语句1;break;case value4:执行语句1;break;default:执行最后的语句;}注意
如果case都没有匹配上switch中如果有default语句则执行这个如果没有则不执行switch后面的括号和case后面的value的值是全等的形式switch后面的括号必须是整数型常量包括charshortintlong等不能是浮点数
6.4 循环结构
循环的主要语句
for循环while循环do…while循环
6.4.1 for循环 // for循环结构for(初始化变量;条件表达式;操作表达式){循环体}6.4.2 for循环的案例 !-- script//打印星星 一行五个var str ;for (var i 1; i 5; i) {str str ★;}console.log(str);//如果直接输出星星他会不在一行显示所以用字符串加号链接的形式/script --!-- script//打印 5×5 阵列星星var str ;//用于链接星星for (var j 1; j 5; j) {//控制行数for (var k 1; k 5; k) {str str ★;}str str \n;}console.log(str);/script --!-- script//打印 从上往下 逐行递减的星星阵列var str ;//用于链接星星for (var j 1; j 5; j) {//控制行数for (var k 1; k -j 6; k) {str str ★;}str str \n;}console.log(str);/script --!-- script//用户输入几行几列var row prompt(请您输入行数);var cols prompt(请您输入列数);var str ;for (var i 1; i row; i) {//控制行数for (var k 1; k cols; k) {str str ★;}str str \n;}console.log(str);/script --script//用户输入几行,第一行的个数每一行的个数逐行递减var row prompt(请您输入行数);var s prompt(请您输入第一行的星星个数);var str ;console.log(行数是 row);console.log(每一行的个数是 s);for (var i row; i 0; i--) {//控制行数for (var k 1; k i; k) {str str ★;}str str \n;}console.log(str);/script九九乘法口诀表 script//打印 九九乘法口诀表var str ;for (var i 1; i 9; i) {for (var j 1; j i; j) {//1×22//strstr;str str j × i i * j \t;//\t 表示此公式运行完以后在一个tab空格}str str \n;}console.log(str);/script弹出输入框求平均值 script//弹出输入框 输入总的班级人数num//依次输入学生成绩 保存起来 score//求平均值var num prompt(请输入总的班级人数);var sum 0;var average 0;for (var i 1; i num; i) {var score prompt(请输入第 i 个学生的成绩);sum sum parseFloat(score);//prompt取过来的数据是字符串型的需要转换}average sum / num;alert(班级总的成绩是 sum);alert(班级总的平均分成绩是 average);/script6.4.3 for循环小结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xJGPj1bH-1620388130814)(pink老师js869集笔记.assets/image-20200716164904872.png)]
6.4.4 while循环 //while结构while(条件表达式){//循环体}6.4.5 do…while循环 //while结构while(条件表达式){//循环体}//do while结构do{// 循环体}while(条件表达式);
6.5 循环小结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZUo41ZN7-1620388130816)(pink老师js869集笔记.assets/image-20200716164916131.png)]
6.6 continue 关键字 定义用于立即跳出本次循环继续下一次循环本次循环体中continue之后的代码就会减少执行一次 6.7 break 关键字 定义用于立即跳出整个循环循环结束 7、数组
7.1 数组的概念 定义数组是指一组数据的集合其中每个数据被称作元素在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式 7.2 数组的创建方式
利用new创建数组利用数组字面量创建数组 //创建数组 两种方式//1、利用数组字面量var arr [1, 2, 3];console.log(arr[0]);//2 利用new Array()var arr1 new Array();var arr2 new Array(2);//表示数组长度为2 里面有两个空的数组元素var arr3 new Array(3, 3);//等价于 [33] 表示里面有两个数组元素一个是3一个是3console.log(arr3);7.3 遍历数组
scriptvar s [2, 6, 1, 77, 52, 25, 7]var max s[0];for (var i 1; i s.length; i) {if (max s[i]) {max s[i];}}console.log(max);
/script
7.4 数组案例
7.4.1 案例筛选数组
script//将数组【2061770520257】中大于等于10 的数 选出来并存放到新的数组中方法1var arr [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];var newarr [];var j 0for (var i 0; i arr.length; i) {if (arr[i] 10) {newarr[j] arr[i];j; //索引号必须从0开始}}console.log(newarr);/script方法2script// 将数组【12345】反转过来var arr [1, 2, 3, 4, 5];var newarr [];for (var i arr.length - 1; i 0; i--) {newarr[newarr.length] arr[i];}console.log(newarr);/script
7.4.2 案例冒泡排序
script// 冒泡 排序var arr[5,4,3,2,1];for( var i0;iarr.length-1;i){//外层循环 负责躺数 5个值 是4躺for(var j0;jarr.length-i-1;j){// 里面循环的次数if(arr[j]arr[j1]){var temparr[j];arr[j]arr[j1];arr[j1]temp;}}}console.log(arr);/script
8、函数
8.1 函数的概念 定义在JS里面可能会定义非常多的相同代码或者功能相似的代码 这些代码可能需要大量重复使用。虽然for循环语句也能实现一些简单的重复操作但是比较具有局限性此时我们就可以使用JS中的函数 8.2 函数的使用
声明函数和调用函数 script// 声明函数 /* function 函数名字(){//函数体}*/function 函数名(形参1形参2) {//在声明函数的括号里面的是形参return 需要返回的结果;}函数名(实参1实参2);//在调用函数的括号里面是实参//形参是接收实参的function cook(aru) {console.log(aru);}cook(酸辣土豆丝);/script调用函数函数名 一定要加小括号
函数名常常采用名词函数不调用函数不执行函数调用一定要写小括号声明函数用function关键字
8.3 形参和实参 在声明函数时可以在函数名称后面的小括号中添加一些参数这些参数被称为形参而在调用该函数时同样也需要传递相应的参数这些参数被称为实参 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zf8NkNK6-1620388130818)(pink老师js869集笔记.assets/image-20200716164930914.png)]
参数的作用在函数内部某些值不能固定我们可以通过参数在调用函数时传递不同的值进去
如果实参的个数和形参的个数一致则正常输出结果如果实参的个数多余形参的个数 会取到形参的个数如果实实参的个数小于形参的个数假设形参num1,num2给了num1值没有给num2但是函数的形参是一个局部变量并且是一个没有接收值的 underfined 所以结果是定义了未赋值在函数内部未声明直接赋值的变量也是全局变量
8.4 return
我们函数只是实现某种功能最终的结果需要返回给函数的调用者函数名 通过return实现的只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名return后面的结果只能返回一个值 如果需要返回多个值则用数组 return [num1.num2……]或者用对象如果函数里面有return则返回的是return后面的值如果函数没有return则返回的是underfinedreturn不仅能退出循环还能返回return语句后面的值
8.5 函数 案例
8.5.1 案例求最大值
script//利用函数求数组 【52991016777】中的最大值function getMax(s) {var max s[0];for (var i 1; i s.length; i) {if (s[i] max) {max s[i];}}return max;}var re getMax([5, 2, 99, 101, 67, 77]);console.log(re);/script
8.5.2 案例反转数组
script//利用函数翻转 任意数组 reverse翻转function reverse(arr) {var newArr [];for (var i arr.length - 1; i 0; i--) {newArr[newArr.length] arr[i];}return newArr;}var arr1 reverse([1, 3, 4, 6, 9]);console.log(arr1);var arr2 reverse([red, pink, blue]);console.log(arr2);/* 结果为9 6 4 3 1blue pink red *//script
8.5.3 案例冒泡排序 script// 函数封装 冒泡排序 sort 排序function sort(arr) {for (var i 0; i arr.length - 1; i) {//外层循环 负责躺数 5个值 是4躺for (var j 0; j arr.length - i - 1; j) {// 里面循环的次数if (arr[j] arr[j 1]) {var temp arr[j];arr[j] arr[j 1];arr[j 1] temp;}}}return arr;}var arr1sort([9,4,7]);console.log(arr1);/script
8.6 用榨汁机模拟函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3bsexAqe-1620388130819)(pink老师js869集笔记.assets/image-20200716164943553.png)]
8.7 arguments 当我们不确定有多少个参数传递的时候我们可以用arguments来获取在JS中arguments实际上它是当前函数的一个内置对象。所有的函数都内置了一个arguments对象arguments对象中存储了传递的所有实参 只有函数才有并且每个函数都有一个arguments对象
伪数组特点
具有数组的length属性按照索引的方式进行存储的他没有真正数组的一些方法 pop() push()等等
8.8 函数的声明方式
利用function 创建函数 也成为命名函数匿名函数 只不过是这个变量里面存储的是一个函数调用的时候是变量名 也可以传递参数 var 变量名function(){}8.9 作用域 通常来说一段程序代码中所用到的名字并不总是有效和可用的而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性增强了程序的可靠性减少了名字冲突 作用域分为局部作用域和全局作用域
局部作用域就是在函数内部
变量分为局部变量和全局变量
函数的形参可以看作是局部变量函数中没有声明直接赋值的变量也是全局变量全局变量浏览器窗口关闭全局变量销毁局部变量此函数代码块运行完毕后局部变量销毁局部变量只能在函数内部使用全局变量可以在任何地方使用
8.10 作用域链 function f1(){var num123;function f2(){console.log(num);}f2();}var num456;f1();// 最后输出的是123采取就近原则一层一层的往上找8.11 预解析 JavaScript代码是由浏览器中的JavaScript解析器来执行的JavaScript解析器在运行JavaScript代码的时候分为两步第一步预解析第二步代码执行 第一步预解析 js引擎会把js里面所有的var 和function提升到当前作用域的最前面 预解析分为变量预解析变量提升和函数预解析函数提升 变量提升就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作函数提升就是把所有的函数声明提升到当前作用域的最前面 不调用函数 代码执行
8.12 案例预解析 // 第一题var num10;fun();function fun(){console.log(num);var num20;} // 结果为underfined 定义未声明// 第一题解析 相当于执行了以下操作var num;function fun(){var num;console.log(num);var num20;} num10;fun();//第二题var num10;function fn(){console.log(num);var num20;console.log(num);}fn();// 结果为underfined 20// 第二题解析 相当于执行了以下操作var num;function fn(){var num;console.log(num);num20;console.log(num);}fn();// 第三题var a18;f1();function f1(){var b9;console.log(a);console.log(b);var a123;}// 结果为underfined 9// 第三题解析 相当于执行了以下操作var a;function f1(){var b;var a;b9;console.log(a);//underfinedconsole.log(b);//9a123;}a18;f1();// 第四题f1();console.log(c);console.log(b);console.log(a);function f1() {var a b c 9;console.log(a);console.log(b);console.log(c);}// // 第四题解析 相当于执行了以下操作function f1() {var a;a b c 9;// 相当于 var a9;b9;c9// 集体声明 var a9,b9,c9 才等于var a9;var b9console.log(a);//9console.log(b);//9console.log(c);//9}f1();console.log(c);//9console.log(b);//9console.log(a);//报错9、JavaScript对象
9.1 对象定义 定义万物皆对象 对象是一个具体的事物看得见摸得着的实物。例如一本书、一辆汽车、一个人 9.2 对象的组成 对象是由属性和方法组成的 属性事物的特征在对象中用属性来表示常用名词方法事物的行为在对象中用方法来表示常用动词 9.3 创建对象 使用对象
利用字面量创建对象利用 new Object创建对象利用构造函数创建对象
9.3.1 字面量创建对象 // 利用字面量创建对象var obj {uname: 张三丰,age: 20,sex: 男,say: function () {console.log(我会唱歌);}}/*1、里面的属性或者方法我们采取键值对的形式 键 属性名值 属性值2、多个属性或者方法中间用逗号隔开的3、方法冒号后面跟的是一个匿名函数4、使用对象调用对象的属性 我们采取 对象名.属性名obj.uname也可以采取 对象名[属性名]obj[uname]调用对象的方法 我们采取 对象名.方法名还要加小括号obj.say()*/9.3.2 利用 new Object创建对象 //利用 new Object创建对象var dxnew Object();dx.uname张三;dx.age20;dx.sayfunction(){console.log(哈喽~);}/* 注意1、我们是利用等号赋值的方法添加对象的属性和方法2、每个属性和方法之间用分号结尾*/9.3.3 利用构造函数创建对象 构造函数定义是一种特殊的函数主要用来初始化对象即为对象成员变量赋初始值它总与new运算符一起使用我们可以把对象中一些公共的属性和方法抽取出来然后封装到这个函数里面 script// 利用字面量创建对象var obj {uname: 张三丰,age: 20,sex: 男,say: function () {console.log(我会唱歌);}}/*1、里面的属性或者方法我们采取键值对的形式 键 属性名值 属性值2、多个属性或者方法中间用逗号隔开的3、方法冒号后面跟的是一个匿名函数4、使用对象调用对象的属性 我们采取 对象名.属性名obj.uname也可以采取 对象名[属性名]obj[uname]调用对象的方法 我们采取 对象名.方法名还要加小括号obj.say()*//* //利用 new Object创建对象var dxnew Object();dx.uname张三;dx.age20;dx.sayfunction(){console.log(哈喽~);}/* 注意1、我们是利用等号赋值的方法添加对象的属性和方法2、每个属性和方法之间用分号结尾*/ // 利用构造函数创建对象//要求 创建四大天王的对象// 相同点 名字、年龄、性别、方法// 构造函数的语法格式// function 构造函数名(){// this.属性值;// this.方法名function(){// }// }// new 构造函数名(); 调用对象function Star(uname, age, sex) {this.name uname;this.age age;this.sex sex;this.singfunction(sang){console.log(sang);}}var ldh new Star(刘德华, 18, 男);ldh.sing(冰雨); //给刘德华的对象 传递方法的值console.log(ldh.name);console.log(ldh[sex]);var zxy new Star(张学友, 19, 男);console.log(zxy);//特点//1、构造函数首字母要大写//2、我们构造函数不需要return 就可以返回结果//3、我们调用构造函数 必须使用new//4、我们只要 new Star() 调用函数 就创建一个对象//利用构造函数创建对象//5、我们的属性和方法前面必须写 this //因为我们前面两种创建对象的方式 一次只能创建一个对象// 1、因为我们一次创建一个对象 里面很多的属性呵方法是大量相同的 我们只能复制// 2、因此 我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数// 3、又因为这个 函数不一样里面封装的不是普通代码 而是对象// 4、构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面/script实例 function Hero(name, type, blood, attack) {this.name name;this.type type;this.blood blood;this.attack attack;this.jineng function (jineng) {this.jineng jineng;}}var lianpo new Hero(廉颇, 力量型, 500血量, 攻击近战);lianpo.jineng(打王者);console.log(lianpo);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yLppFvVZ-1620388130821)(pink老师js869集笔记.assets/image-20200716165002626.png)]
9.4 构造函数和对象的练习
构造函数如Stars抽象了对象的公共部分封装到了函数里面它泛指某一大类class创建对象如new Stars()特指某一个通过new关键字创建对象的过程我们也成为对象实例化
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F8uUmmPM-1620388130822)(pink老师js869集笔记.assets/image-20200716165013910.png)]
9.5 new关键字
new在执行时会做四件事情
在内存中创建一个新的空对象让this指向这个新的对象执行构造函数里面的代码给这个新对象添加属性和方法返回这个新对象 所以构造函数不需要return
9.6 遍历对象 for(变量 in 对象)
script//遍历对象var obj {name: pink老师,age: 18,sex: 男}// for in 遍历我们的对象// 语法格式// for (变量 in 对象) {// }for (var k in obj) {console.log(k); //K是变量//如果输出变量 得到的是属性名console.log(obj[k]);//得到的是 属性值 必须采取中括号的形式}//我们使用 for in里面的变量 我们喜欢写K 或者key/script
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KQcYwxEv-1620388130824)(pink老师js869集笔记.assets/image-20200716165028981.png)]
实例
scriptfunction Perpos(name, age, sex, height, width) {this.name name;this.age age;this.sex sex;this.height height;this.width width;this.worker function (worker) {this.worker worker;}}var daidaigou new Perpos(呆呆狗, 20, 女, 180, 50KG);daidaigou.worker(全栈开发工程师);for (var k in daidaigou) {console.log(k);console.log(daidaigou[k]);}/script
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sg62iHzO-1620388130825)(pink老师js869集笔记.assets/image-20200716165042292.png)]
9.7 对象小结
对象可以让代码结构更清晰对象复杂数据类型 object本质对象就是一组无序的相关属性和方法的集合构造函数泛指某一大类比如苹果不管是红色苹果还是绿色苹果都统称为苹果对象实例特指一个事物比如这个苹果、正在给你们讲课的pink老师等for……in语句用于对对象的属性进行循环操作
9.8 变量、属性、函数、方法的区别
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BcOEYFz9-1620388130825)(pink老师js869集笔记.assets/image-20200716165054149.png)]
10、JavaScript内置对象
10.1 JavaScript中的对象分类
ECMAScript 基础基础内容 自定义对象内置对象 浏览器对象 JS API 内置对象就是JS语言自带的一些对象这些对象供开发者使用并提供了一些常用的或是最基本而必要的功能属性和方法 最常用的内置对象
MathDateArrayString等
10.2 内置对象—Math对象 script// math 数学对象 不是一个构造函数所以我们不需要new来调用而是直接使用里面的数学和方法即可console.log(Math.PI);// 一个属性 圆周率console.log(Math.max(1, 99, 3));//99//max如果没有参数 则返回负无穷大/script[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c0fYCShe-1620388130826)(pink老师js869集笔记.assets/image-20200716165104873.png)] script// 1 绝对值方法console.log(Math.abs(1));// 1console.log(Math.abs(-1));// 1console.log(Math.abs(-1));// 1 有隐式转换// 2 三个取整的方法// 向下取整 Math.floor()console.log(Math.floor(1.1));// 1console.log(Math.floor(1.9));// 1console.log(Math.floor(-1.1));// -2// 向上取整 Math.ceil()console.log(Math.ceil(1.1));// 2console.log(Math.ceil(1.9));// 2console.log(Math.ceil(-1.1));// -1// 3 四舍五入 Math.round() 其他数字都是四舍五入但是5往大了取console.log(Math.ceil(1.1));// 1console.log(Math.ceil(1.5));// 2console.log(Math.ceil(1.9));// 2console.log(Math.ceil(-1.1));// -1console.log(Math.ceil(-1.5));// -1// 随机数方法// random 返回的是一个小数 取值是[0,1) 这个方法不跟参数// 得到一个两数之间的随机整数 不包括两个数在内function getRandomInt(min, max) {min Math.ceil(min);max Math.floor(max);return Math.floor(Math.random() * (max - min)) min; //不含最大值含最小值}console.log(getRandomInt(10, 20));// 得到一个两数之间的随机整数 包括两个数在内function getRandomIntInclusive(min, max) {min Math.ceil(min);max Math.floor(max);return Math.floor(Math.random() * (max - min 1)) min; //含最大值含最小值 }console.log(getRandomIntInclusive(20, 30));/script10.3 内置对象—日期对象 script//Date() 日期对象 是一个构造函数 必须使用NEW 来调用我们的日期对象var arr new Array();//创建一个数组对象var obj new Object();//创建一个对象实例//1、使用 date 没有参数 返回系统当前时间var date new Date();console.log(date);//2、参数常用的写法 数字型 20191001 或者是字符串型2019-10-1 8:8:8var date1 new Date(2019, 10, 1);console.log(date1);//返回的是十一月var date2 new Date(2019-10-1 8:8:8);console.log(date1);//返回的是十一月//格式化日期 年月日var date new Date();console.log(date.getFullYear());//返回当前年份console.log(date.getMonth() 1);//月份 返回的月份小1个月 记得月份1console.log(date.getDate());// 返回的是 几号console.log(date.getDay());// 周一返回的是1 周六返回的是6 但是周日返回的是 0// 我们写一个 2019年5月1日 星期三var year date.getFullYear();var month date.getMonth() 1;var dates date.getDate();var arr [星期日, 星期一, 星期二, 星期三, 星期四, 星期五, 星期六]var day date.getDay();console.log(今天是 year 年 month 月 dates 日 arr[day]);//格式化日期 时分秒var date new Date();console.log(date.getHours());//时console.log(date.getMinutes());//分console.log(date.getSeconds());//秒//要求封装一个函数 返回当前的时分秒 格式080808function getTime() {var time new Date();var h time.getHours();h h 10 ? 0 h : h;//为了当小时 分 秒 为个位数的时候 更好看var m time.getMinutes();m m 10 ? 0 m : m;var s time.getSeconds();s s 10 ? 0 s : s;return h 时 m 分 s 秒;}console.log(getTime());/script 获取毫秒数 script// 获取Date总的毫秒数// 1、通过valueOf() getTime()var date new Date();console.log(date.valueOf());//就是我们现在时间 距离1970.1.1 总的毫秒数console.log(date.getTime());//2、简单写法var date1 new Date();//new Date() 返回的就是总的毫秒数console.log(date1);//3、 H5新增的 获得总的毫秒数console.log(Date.now());/script日期格式化
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bOalUkH0-1620388130827)(pink老师js869集笔记.assets/image-20200716165118599.png)]
10.4 案例日期对象倒计时 没有设置定时器 scriptfunction countDown(time) {var nowTime new Date();//返回的是当前时间总的毫秒数var inputTime new Date(time);//返回的是用户输入时间总的毫秒数var times (inputTime - nowTime) / 1000;//time是剩余时间总的毫秒数 /1000 表示剩余时间总的毫秒数转化为秒var d parseInt(times / 60 / 60 / 24);//天d d 10 ? 0 d : d;var h parseInt(times / 60 / 60 % 24);//小时h h 10 ? 0 h : h;var m parseInt(times / 60 % 60);//分m m 10 ? 0 m : m;var s parseInt(times % 60);//秒s s 10 ? 0 s : s;return d 天 h 时 m 分 s 秒;}console.log(countDown(2020-4-7 10:00:00));/script求剩余天、小时、分钟、秒的公式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k8pMJVVd-1620388130828)(pink老师js869集笔记.assets/image-20200716165132146.png)]
10.5 内置对象—数组对象
10.5.1 检测是否为数组 instanceof //检测是否为数组//1、instanceof 元素安抚 它可以用来检测是否为数组console.log(arr3 instanceof Array); //返回ture//2、Array.isArray(参数); H5新增的console.log(Array.isArray(arr3));
10.5.2 添加删除数组元素的方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8AiDYaDd-1620388130832)(pink老师js869集笔记.assets/image-20200716165145941.png)] //添加删除数组元素的方法// 1、push() 在我们数组的末尾 添加一个或者多个数组元素 格式数组名.push(添加元素的内容)var arr4 [1, 2, 3];arr4.push(4);console.log(arr4);// push是可以给数组后面追加新的元素// push 参数直接写 数组元素就可以// push完毕之后返回的结果是 新数组的长度// 原数组也会发生变化// 添加多个push(num1.num2)// 2、unshift 在数组的开头 添加一个或者多个元素 格式数组名.unshift(内容);arr4.unshift(red);console.log(arr4);// unshift是可以给数组前面追加新的元素// unshift 参数直接写 数组元素就可以// unshift完毕之后返回的结果是 新数组的长度// 原数组也会发生变化//删除数组的方法// 3、pop() 它可以删除数组的最后一个元素var arr5 [2, 4, 5]arr5.pop();console.log(arr5);// pop是可以删除数组的最后一个元素// pop没有参数// pop完毕之后返回的结果是 删除的那个元素// 原数组也会发生变化// 4、shift()var arr6 [2, 4, 5]arr6.shift();console.log(arr6);// shift是可以删除数组的第一个元素// shift没有参数// shift完毕之后返回的结果是 删除的那个元素// 原数组也会发生变化 10.5.3 数组排序
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jbhxqdPK-1620388130833)(pink老师js869集笔记.assets/image-20200716165157839.png)] //数组排序// 1、反转数组 格式数组名.reverse();var arr7 [1, 2, 3, 4];arr7.reverse();console.log(arr7);// 2、数组排序 格式数组名.sort();但是数组中有两位数 再用sort就会出现问题var arr8 [4, 22, 9, 6, 44, 0, 6];arr8.sort(function (a, b) {return a - b;//升序的顺序排列//return b - a;降序的顺序排列});console.log(arr8);10.5.4 数组索引方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OcYyM3fj-1620388130834)(pink老师js869集笔记.assets/image-20200716165224780.png)] // 返回数组索引号的方法// 1、用indexOf() 格式数组名.indexOf(元素) 当此数组中有两个相同的元素他只会返回第一个相同元素的索引号 如果数组没有此元素 还用indexOf 查找元素的索引号 则返回-1var arr9 [2, 5, 6, 8];console.log(arr9.indexOf(6));console.log(arr9.lastIndexOf(8));// 2、用lastIndexOf 格式数组名.lastIndexOf 此方法是从后面开始查找 第一种方法是从前往后查找// 案例 数组去重// 封装一个去重的函数 uniquefunction unique(arr10) {var newArr [];for (var i 0; i arr10.length; i) {if (newArr.indexOf(arr10[i]) -1) {newArr.push(arr10[i]);}}return newArr;}var demo unique([1, 4, 5, 4, 1]);console.log(demo);10.5.5 数组转换为字符串
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vmkqcVNi-1620388130834)(pink老师js869集笔记.assets/image-20200716165237154.png)] //数组转化为字符串// 1、toString() 将我们的数组转换为字符串,逗号分隔开var arr11 [1, 2, 3];console.log(arr11.toString());// 2、join(分隔符) 默认用逗号分隔var arr12 [1, 2, 3, 4, 5, 6, 7];console.log(arr12.join(-));10.5.6 连接素组、删除数组元素、截取数组元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TRC3C32G-1620388130835)(pink老师js869集笔记.assets/image-20200716165247297.png)]
10.6 内置对象—字符串对象
10.6.1 基本包装类型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eBr2SlDg-1620388130836)(pink老师js869集笔记.assets/image-20200716165309837.png)]
10.6.2 根据字符返回位置
字符串所有的方法都不会修改字符串本身字符串是不可变的操作完成会返回一个新的字符串
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-StQYymbT-1620388130837)(pink老师js869集笔记.assets/image-20200716165323478.png)] //字符串对象 根据字符串返回位置// indexOf(想要查找的字符,起始位置)var str 改革春风吹满面春天来了;console.log(str.indexOf(春));console.log(str.indexOf(春, 3));案例 //案例 o出现的位置及次数var str abcoefoxyozzopp;var index str.indexOf(o);var num 0;while (index ! -1) {console.log(index);num;index str.indexOf(o, index 1);}console.log(num);// 出现次数最多的字符 并统计次数var str abcoefoxyozzopp;var o {};for (var i 0; i str.length; i) {var chars str.charAt(i);//chars 是字符串的每一个字符if (o[chars]) {//o[chars]得到的是属性值o[chars];}else {o[chars] 1;}}console.log(o);var max 0;var ch ;for (var k in o) {if (o[k] max) {max o[k];ch k;}}console.log(max);console.log(ch);10.6.3 根据位置返回字符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fLuVsdsA-1620388130838)(pink老师js869集笔记.assets/image-20200716165339022.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pBLtHGhf-1620388130838)(pink老师js869集笔记.assets/image-20200716165350301.png)]
10.6.4 字符串的操作方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lndCPfo6-1620388130839)(pink老师js869集笔记.assets/image-20200716165402806.png)] //字符串拼接// 1. concat(字符串1,字符串2)var str andyconsole.log(str.concat(red));// andyred// 2 substr(截取的起始位置,截取几个字符)var str1 改革春风吹满地console.log(str1.substr(2, 2));//春风// 3 replace(被替换的字符,替换为的字符) 只能替换被第一次匹配到的字符console.log(str.replace(a, b));//bndy// 4 字符转换为数组 split(分隔符)var str2 red,pink,blue;console.log(str2.split(,));11、JavaScript简单类型和复杂类型
11.2 堆和栈
11.1 简单类型和复杂类型的定义 简单类型又叫做基本数据类型或者值类型复杂类型又叫做引用类型 值类型简单数据类型/基本数据类型在存储的时变量中存储的是值本身因为叫做值类型 string、number、boolean、underfined、null 引用类型复杂数据类型在存储时变量中存储的仅仅时地址引用因此叫做引用数据类型 通过new关键字创建的对象系统对象、自定义对象如Object、Array、 Date等 区别 栈操作系统由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于结构中的栈 简单数据类型存放到栈里面 堆操作系统存储复杂类型对象。一般由程序员分配释放若程序员不释放由垃圾回收机制回收 复杂数据类型存放到堆里面 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wq2ej8Pa-1620388130840)(pink老师js869集笔记.assets/image-20200716165422885.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-71HxXwrX-1620388130841)(pink老师js869集笔记.assets/image-20200716165433009.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yrx6bjvi-1620388130842)(pink老师js869集笔记.assets/image-20200716165444760.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DdEZRtfz-1620388130843)(pink老师js869集笔记.assets/image-20200716165501357.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HmU4ov6W-1620388130843)(pink老师js869集笔记.assets/image-20200716165515962.png)]
web APIS
1、web APIS和js基础关联性
1.1 JS组成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hrGIhdrK-1620388130844)(pink老师js869集笔记.assets/image-20200716165528226.png)]
1.2 API API定义API是一些预先定义的函数目的是提供应用程序与开发人员基于某软件或者硬件得以访问一组例程的能力而又无需访问源码或者理解内部工作机制的细节 简单理解API是给程序员提供的一种工具以便能更轻松的实现想要完成的功能
1.3 web API web API是浏览器提供的一套操作浏览器功能和页面元素的APIBOM、DOM 1.4 api webapi总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6spwBSP5-1620388130846)(pink老师js869集笔记.assets/image-20200716165541396.png)]
2、 DOM
1.5.1 DOM定义
DOM就是文档对象模型
DOM树
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nxgR4QYA-1620388130846)(pink老师js869集笔记.assets/image-20200716165556664.png)]
文档一个页面就是一个文档DOM中使用document表示元素页面中的所有标签都是元素DOM中使用element表示节点网页中的所有内容都是节点标签、属性、文本、注释等DOM中使用node表示
DOM把以上内容都看作是对象
1.5.2 获取元素
根据ID获取根据标签名获取通过HTML5新增的方法获取特殊元素获取 根据ID获取 div idid1 classclass1var id document.getElementById(id1);div idtime2019-9-9/divscript// 1、因为我们文档页面是从上往下加载所以先得有标签所以我们script 写道标签的下面// 2、get 获得 element 元素 by通过 驼峰命名法// 3、参数 id是大小写敏感的字符串// 4、返回的是一个元素对象var timer document.getElementById(time);// 5、打印我们返回的元素对象 更好的查看里面的属性console.dir(timer)/script
console.dir() 作用:更好的查看里面的属性和方法输出的是一个对象 根据标签名获取 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6y8KGXO9-1620388130847)(pink老师js869集笔记.assets/image-20200716165611736.png)] 通过HTML5新增的方法获取 div classbox盒子1/divdiv classbox盒子2/divdiv idnavullishouye/lilichanp/li/ul/divscript// 1、getElementsByClassName() 通过类名获取var boxs document.getElementsByClassName(box);console.log(boxs);// 2、querySelector() 返回指定选择器的第一个元素对象 切记里面的选择器要加符号 类加. id加idvar firstbox document.querySelector(.box);console.log(firstbox);// 3、querySelectorAll() 返回指定选择器的所有元素对象集合var allbox document.querySelectorAll(.box);console.log(allbox);/script
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-269Hwsn2-1620388130848)(pink老师js869集笔记.assets/image-20200716165621815.png)] 特殊元素获取 获取body、html [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ogrHXLB-1620388130848)(pink老师js869集笔记.assets/image-20200716165636732.png)]
1.5.3 事件基础
事件基础
Js使我们有能力创建动态页面而事件是可以被JS侦测到的行为
简单理解触发————机制
网页中的每个元素都可以产生某些可以触发js的事件例如我们可以在用户点击按钮时产生一个事件然后去执行某些操作
bodybutton idbtn唐伯虎/buttonscript// 点击一个按钮 弹出对话框/* 1、事件三部分 事件源 事件类型 事件处理程序 这三部分 也称为事件三要素(1)事件源事件被触发的对象 按钮(2)事件类型如何触发什么事件 比如鼠标点击onclick 鼠标经过(3)事件处理程序 通过一个函数赋值的方式完成*/var btn document.getElementById(btn);btn.onclick function () {alert(点桥下);}/*btn事件源onclick事件类型function事件处理程序*//script
/body 常用鼠标事件 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dHi8Qtpo-1620388130849)(pink老师js869集笔记.assets/image-20200716165650182.png)]
1.5.4 操作元素
1.5.4.1 改变元素内容 element.innerText element.innerHTML [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jIKaCXNm-1620388130850)(pink老师js869集笔记.assets/image-20200716165703571.png)]
element.innerText和element.innerHTML的区别
innerText 不识别html标签 非标准 去除空格和换行innerHTML 识别html标签 W3C标准 保留空格和换行这连哥哥属性是可读写的 可以获取元素里面的内容
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g90kU123-1620388130851)(pink老师js869集笔记.assets/image-20200716165719980.png)]
1.5.4.2 改变属性
案例用户点击div 获取当前时间 stylediv,p {width: 300px;height: 30px;line-height: 30px;color: #ffffff;background-color: pink;}/style
/headbodybutton显示当前系统时间/buttondiv某个时间/divp1223/pscript// 需求当我们点击了按钮div里面的文字会发生变化var btn document.querySelector(button);var div document.querySelector(div);btn.onclick function () {div.innerText getDate();}function getDate() {var date new Date();var year date.getFullYear();var month date.getMonth() 1;var dates date.getDate();var arr [星期日, 星期一, 星期二, 星期三, 星期四, 星期五, 星期六]var day date.getDay();return 今天是 year 年 month 月 dates 日 arr[day];}// 我们元素可以不用添加时间var p document.querySelector(p);p.innerText getDate();/script
/body
案例点击不同的按钮切换相应的图片
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleimg {width: 300px;height: 200px;}/style
/headbody!-- 点击按钮1显示刘德华照片 点击按钮2 显示张学友照片 --button idldh刘德华/buttonbutton idzxy张学友/buttonimg srcimages/刘德华.jpg alt title刘德华scriptvar ldh document.getElementById(ldh);var zxy document.getElementById(zxy);var img document.querySelector(img);zxy.onclick function () {img.src images/张学友.jpg;img.title 张学友}ldh.onclick function () {img.src images/刘德华.jpg;img.title 刘德华;}/script
/body/html
案例分时显示不同图片显示不同问候语
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleimg {width: 500px;height: 300px;}/style
/headbodyimg srcimages/上午好.jpg altdiv上午好/divscriptvar img document.querySelector(img);var div document.querySelector(div);var date new Date();var h date.getHours();if (h 12) {img.src images/上午好.jpg;div.innerHTML 亲上午好;}else if (h 18) {img.src images/中午好.jpg;div.innerHTML 亲中午好;}else {img.src images/晚上好.gif;div.innerHTML 亲晚上好;}/script
/body/html
1.5.4.3 修改表单里面的元素、属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xb1Wkkoa-1620388130851)(pink老师js869集笔记.assets/image-20200716165752441.png)]
案例显示密码与不显示密码
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 400px;border: 1px solid red;margin: 100px auto;}.box input {width: 300px;height: 30px;border: 0;outline: none;}img {width: 24px;height: 30px;}/style
/headbodydiv classboxlabel forpassimg srcimages/闭眼.jpg alt ideye/labelinput typepassword idpass/divscriptvar eye document.getElementById(eye);var pass document.getElementById(pass);var flag 0;//用于控制睁眼闭眼的次数eye.onclick function () {if (flag 0) {pass.type text;flag 1eye.src images/睁眼.jpg}else {pass.type password;flag 0;eye.src images/闭眼.jpg;}}/script
/body/html
1.5.4.4 修改样式属性操作 element.style 行内样式操作 element.className 类名样式操作 注意
JS里面的样式采取驼峰命名法比如fontSize、backgroundColorJS修改style样式操作产生的是行内样式css权重比较高如果样式修改较多可以采取操作类名方式更改元素样式class因为是一个保留字因为使用className来操作元素类名属性className会直接更改元素的类名会覆盖原先的类名若不想覆盖建议用同类
案例修改背景颜色
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JtO6E8Mw-1620388130852)(pink老师js869集笔记.assets/image-20200716165808933.png)]
案例淘宝点击叉号 关闭二维码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nUesDh3J-1620388130853)(pink老师js869集笔记.assets/image-20200716165821786.png)]
案例循环精灵图背景
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ptVmRHJ-1620388130854)(pink老师js869集笔记.assets/image-20200716165911238.png)]
案例文本框获得焦点隐藏原始文字失去焦点显示原始文字 获得焦点onfocus失去焦点onblur [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yjWn9EIz-1620388130856)(pink老师js869集笔记.assets/image-20200716165928662.png)]
操作元素总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QUBDgPEr-1620388130856)(pink老师js869集笔记.assets/image-20200716165940473.png)]
1.5.4.5 排它思想
如果有同一组元素我们想要某一个元素实现某种样式需要用到循环的排它西乡算法
所有元素全部清楚样式干掉其他人给当前元素设置样式留下我自己注意顺序不能颠倒首先干掉其他人然后设置自己
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}button {width: 40px;height: 40px;background-color: rgb(99, 97, 97);border: 0;}div {width: 300px;margin: 100px auto;}/style
/headbodydivbutton按钮1/buttonbutton按钮2/buttonbutton按钮3/buttonbutton按钮4/buttonbutton按钮5/button/divscriptvar btns document.getElementsByTagName(button);console.log(btns);for (var i 0; i btns.length; i) {btns[i].onclick function () {// 1、先把所有按钮的背景颜色去掉// 2、再让当前的按钮颜色变成粉色for (var i 0; i btns.length; i) {btns[i].style.backgroundColor ;}this.style.backgroundColor red;}}/script
/body/html
案例四个图片 点击其中一个整个页面背景就是这个图片 百度换肤
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}body {height: 100%;background: url(images/百度换肤-山水-01.jpg) no-repeat;background-size: cover;}ul {width: 500px;margin: 100px auto;}ul li {list-style: none;float: left;width: 100px;height: 50px;}img {width: 95%;height: 95%;}/style
/headbodyul classyangshiliimg srcimages/百度换肤-山水-01.jpg alt/lili img srcimages/百度换肤-山水-02.jpg alt/lili img srcimages/百度换肤-山水-03.jpg alt/lili img srcimages/百度换肤-山水-04.jpg alt/li/ulscriptvar imgs document.querySelector(.yangshi).querySelectorAll(img);for (var i 0; i imgs.length; i) {imgs[i].onclick function () {// console.log(a);document.body.style.backgroundImage (url( this.src ));//如果把this 换成imgs[i] 就不行就得在事件外面写var aimgs[i].src}}/script
/body/html
案例表格中隔行变色
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1tzy44dU-1620388130858)(pink老师js869集笔记.assets/image-20200716165955726.png)]
案例全选反选 pink老师讲的 !DOCTYPE html
htmlhead langenmeta charsetUTF-8title/titlestyle* {padding: 0;margin: 0;}.wrap {width: 300px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 300px;}th,td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px 微软雅黑;color: #fff;}td {font: 14px 微软雅黑;}tbody tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}/style/headbodydiv classwraptabletheadtrthinput typecheckbox idj_cbAll //thth商品/thth价钱/th/tr/theadtbody idj_tbtrtdinput typecheckbox //tdtdiPhone8/tdtd8000/td/trtrtdinput typecheckbox //tdtdiPad Pro/tdtd5000/td/trtrtdinput typecheckbox //tdtdiPad Air/tdtd2000/td/trtrtdinput typecheckbox //tdtdApple Watch/tdtd2000/td/tr/tbody/table/divscript// 1. 全选和取消全选做法 让下面所有复选框的checked属性选中状态 跟随 全选按钮即可// 获取元素var j_cbAll document.getElementById(j_cbAll); // 全选按钮var j_tbs document.getElementById(j_tb).getElementsByTagName(input); // 下面所有的复选框// 注册事件j_cbAll.onclick function() {// this.checked 它可以得到当前复选框的选中状态如果是true 就是选中如果是false 就是未选中console.log(this.checked);for (var i 0; i j_tbs.length; i) {j_tbs[i].checked this.checked;}}// 2. 下面复选框需要全部选中 上面全选才能选中做法 给下面所有复选框绑定点击事件每次点击都要循环查看下面所有的复选框是否有没选中的如果有一个没选中的 上面全选就不选中。for (var i 0; i j_tbs.length; i) {j_tbs[i].onclick function() {// flag 控制全选按钮是否选中var flag true;// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中for (var i 0; i j_tbs.length; i) {if (!j_tbs[i].checked) {flag false;break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中剩下的就无需循环判断了}}j_cbAll.checked flag;}}/script
/body/html百度的 !DOCTYPE html
htmlheadmeta charsetutf-8 /title复选框/titlestyle typetext/css/style
/headbodyinput typecheckbox idboxid οnclicksetAllNo() /全选/全不选br /input typecheckbox namelove /篮球br /input typecheckbox namelove /排球br /input typecheckbox namelove /羽毛球br /input typecheckbox namelove /乒乓球br /input typebutton value全选 οnclicksetAll() /input typebutton value全不选 οnclicksetNo() /input typebutton value反选 οnclicksetOthers() /script typetext/javascript//全选函数function setAll() {var loves document.getElementsByName(love);for (var i 0; i loves.length; i) {loves[i].checked true;}}//全不选函数function setNo() {var loves document.getElementsByName(love);for (var i 0; i loves.length; i) {loves[i].checked false;}}//反选function setOthers() {var loves document.getElementsByName(love);for (var i 0; i loves.length; i) {if (loves[i].checked false)loves[i].checked true;elseloves[i].checked false;}}//全选/全不选操作function setAllNo() {var box document.getElementById(boxid);var loves document.getElementsByName(love);if (box.checked false) {for (var i 0; i loves.length; i) {loves[i].checked false;}} else {for (var i 0; i loves.length; i) {loves[i].checked true;}}}/script/body/html1.5.5.6 自定义属性操作 获取属性值 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HQp1uvBc-1620388130859)(pink老师js869集笔记.assets/image-20200716170012345.png)]
程序员自己设置的属性 一般格式为data-属性名
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XOQ09ciO-1620388130860)(pink老师js869集笔记.assets/image-20200716170026398.png)] 设置属性值 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JDEvdxXU-1620388130861)(pink老师js869集笔记.assets/image-20200716170047303.png)] 移除属性 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-REvsQQ3X-1620388130862)(pink老师js869集笔记.assets/image-20200716170056710.png)]
案例tab栏切换
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.tab {width: 1400px;margin: 100px auto;}.tab .tab_list {width: 1400px;height: 40px;background-color: rgb(146, 145, 145);}ul li {float: left;list-style: none;width: 200px;height: 40px;font-size: 20px;text-align: center;line-height: 40px;}.current {background-color: red;color: #ffffff;}.item {display: none;}.item:nth-child(1) {display: block;}/style
/headbodydiv classtabdiv classtab_listulli classcurrent商品介绍/lili规格与包装/lili售后保障/lili商品评价/lili手机社区/li/ul/divdiv classtab_condiv classitem商品介绍内容/divdiv classitem规格与包装内容/divdiv classitem售后保障内容/divdiv classitem商品评价内容/divdiv classitem手机社区内容/div/div/divscriptvar tab_list document.querySelector(.tab_list);var lis tab_list.querySelectorAll(li);console.log(lis);var tab_con document.querySelector(.tab_con);var items document.querySelectorAll(.item);for (var i 0; i lis.length; i) {// 给五个小li设定索引号lis[i].setAttribute(index, i);// index是啥索引的意思lis[i].onclick function () {for (var i 0; i lis.length; i) {lis[i].className ;console.log(this);}this.className current;//2 下面的显示内容模块var index this.getAttribute(index);console.log(index);for (var i 0; i items.length; i) {items[i].style.display none;}items[index].style.display block;}}/script
/body/html
1.5.5 节点操作
1.5.5.1 节点
主要体现在父子兄节点之间上 一般地节点至少拥有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)这三个基本属性 元素节点 1 属性节点 2 文本节点 3包括文字、空格、换行等 1.5.5.2 父节点 parentNode [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-51O5qx2r-1620388130863)(pink老师js869集笔记.assets/image-20200716170123622.png)]
格式元素.parentNode
1.5.5.3 子节点 childNodes (标准) 此方法 得到的是所有节点包括文本节点、元素节点等等 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MnkombBz-1620388130864)(pink老师js869集笔记.assets/image-20200716170136197.png)] children 非标准 它返回所有的子元素节点它只返回之元素节点其余节点不返回 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QGoPGNS5-1620388130864)(pink老师js869集笔记.assets/image-20200716170147209.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y3ofJdtm-1620388130865)(pink老师js869集笔记.assets/image-20200716170203885.png)]
firstChild、lastChild 返回的是第一个子节点、最后一个子节点不管是文本节点和元素节点
案例鼠标移动到这里 显示下拉菜单 离开隐藏
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9kNUcKwM-1620388130866)(pink老师js869集笔记.assets/image-20200716170218477.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YneIbjNp-1620388130867)(pink老师js869集笔记.assets/image-20200716170229016.png)]
1.5.5.4 兄弟节点
node.nextSibling 得到是下一个兄弟包括文本节点、元素节点
node.previosSibling 得到的是上一个兄弟节点同样是包含所有的节点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gSTxt8nW-1620388130867)(pink老师js869集笔记.assets/image-20200716170246446.png)]
node.nextElementSibling 得到的是下一个兄弟元素节点
node.previousElementSibling 得到的是上一个兄弟元素节点
解决兄弟节点 兼容性问题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZaBRsCcx-1620388130868)(pink老师js869集笔记.assets/image-20200716170305065.png)]
1.5.5.5 创建节点
document.creatElement(‘tagName’)
1.5.5.6 添加节点
node.appendChild(child) node是父级 child是子级 追加元素
node.inserBefore(child,指定元素) 在指定元素前面添加
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xyeZXlfk-1620388130870)(pink老师js869集笔记.assets/image-20200716170322154.png)]
案例简单版 发布留言
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleul li {list-style: none;background-color: pink;}/style
/headbodytextarea name id cols30 rows10123/textareabutton发布/buttonul/ulscript//1获取元素var btn document.querySelector(button);var text document.querySelector(textarea);var ul document.querySelector(ul);// 2 注册事件btn.onclick function () {if (text.value 0) {alert(您没有输入内容);return false;}else {// 创建元素 先有li才能赋值var li document.createElement(li);li.innerHTML text.value;// 添加元素ul.insertBefore(li, ul.children[0]);}}/script
/body/html1.5.5.7 删除节点
node.removeChild(child) 删除节点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VoGLgRKb-1620388130871)(pink老师js869集笔记.assets/image-20200716170336623.png)]
1.5.5.8 复制节点
node.cloneNode()
注意
如果括号参数为空或者false则是浅拷贝即只克隆复制节点本身不克隆里面的子节点如果括号的参数为true则是深度拷贝会复制节点本身以及里面的所有子节点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Rpo3LVu-1620388130872)(pink老师js869集笔记.assets/image-20200716170348362.png)]
案例动态生成表格
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletable {width: 500px;margin: 100px auto;text-align: center;}* {margin: 0;padding: 0;}th,td {border: 1px solid rgba(27, 27, 27, 0.2);}tr {height: 40px;}/style
/headbodytable cellpadding0 border1px cellspacing0theadth姓名/thth科目/thth成绩/thth操作/th/theadtbody/tbody/tablescript// 先准备好学生的数据var datas [{name: 魏璎珞,subject: JavaScript,score: 100},{name: 红利,subject: JavaScript,score: 198},{name: 富恒,subject: JavaScript,score: 99},{name: 明玉,subject: JavaScript,score: 188}]// 创建行 var tbody document.querySelector(tbody);for (var i 0; i datas.length; i) {// 创建tr行var tr document.createElement(tr);tbody.appendChild(tr);// 创建行里面的单元格单元格的数量取决于每个对象里面的属性个格式 for循环遍历对象for (var k in datas[i]) {// 创建单元格var td document.createElement(td);// 创建单元格的同时 把对象里面的属性值 给tdtd.innerHTML datas[i][k];tr.appendChild(td);}// 创建有删除两个字的单元格var td document.createElement(td);td.innerHTML a hrefjavascript:;删除/a;tr.appendChild(td);}// 删除操作var as document.querySelectorAll(a);for (var i 0; i as.length; i) {as[i].onclick function () {//删除a 所在的行tbody.removeChild(this.parentNode.parentNode);}}/script
/body/html1.5.5.9 三种动态创建元素的区别
document.write()element.innerHTMLdocument.creatElement
区别
document.write()是直接将内容写入页面的内容流但是文档流执行完毕则会导致页面全部重绘innerHTML是将内容写入某个DOM节点不会导致页面全部重绘innerHTML创建对个元素效率更高不要采用拼接字符串采取数组形式拼接结构稍微复杂createElement() 创建多个元素效率稍低一点点但是结构清晰
1.5.6 DOM重点核心
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tC6lKb0M-1620388130873)(pink老师js869集笔记.assets/image-20200716170410778.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ydOmImtv-1620388130874)(pink老师js869集笔记.assets/image-20200716170424615.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yvahPeww-1620388130875)(pink老师js869集笔记.assets/image-20200716170433872.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VofvhpMp-1620388130875)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200508220938757.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kIRExE4j-1620388130876)(pink老师js869集笔记.assets/image-20200716170444299.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AnSk6bqc-1620388130877)(pink老师js869集笔记.assets/image-20200716170454814.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sSqdY2gV-1620388130878)(pink老师js869集笔记.assets/image-20200716170510657.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zDSAiSom-1620388130879)(pink老师js869集笔记.assets/image-20200716170522474.png)]
3、高级事件
3.1 注册事件
传统注册时间方法监听事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5GRPy2hu-1620388130880)(pink老师js869集笔记.assets/image-20200716170532948.png)]
3.2 addEventListener 事件监听方式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rn5EXDRd-1620388130881)(pink老师js869集笔记.assets/image-20200716170556698.png)]
3.3 DOM事件流 事件流描述的是从页面中接收事件的顺序 事件发生时会在元素节点之间按照特定的顺序传播这个传播过程即DOM事件流 比如我们给DIV添加了点击事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7e33wQmL-1620388130882)(pink老师js869集笔记.assets/image-20200716170608841.png)]
DOM事件流分为3个阶段
捕获阶段当前目标阶段冒泡阶段
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-de39cNp1-1620388130883)(pink老师js869集笔记.assets/image-20200716170622027.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RnPMIpKd-1620388130884)(pink老师js869集笔记.assets/image-20200716170634796.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rqz3SPrL-1620388130884)(pink老师js869集笔记.assets/image-20200716170645290.png)]
注意
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-67C1CEw0-1620388130885)(pink老师js869集笔记.assets/image-20200716170659995.png)]
没有冒泡的onblur onfocus onmouseenter onmouseleave
3.4 事件对象 官方解释event对象代表事件的状态比如键盘按键的状态、鼠标的位置、鼠标按钮的状态 简单理解事件发生后跟事件相关的一系列信息数据的集合都放到这个对象里面这个对象是事件对象event它有很多属性和方法 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/style
/headbodydiv123/divscriptvar div document.querySelector(div);div.onclick function (event) {//1.event 就是一个事件对象 写到我们侦听函数的小括号里面 当形参来看//2.事件对象只有有了事件才会存在它是系统给我们自动创建的不需要我们传递参数//3.事件对象 是我们事件一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包括了鼠标的相关信息鼠标做表 如果是键盘事件里面就包括的键盘事件信息 比如 判断用户按下了哪个键//4.这个事件对象我们可以自己命名 常用e//5、事件对象也有兼容性问题 ie678通过window.event //ee||window.event 兼容性}/script
/body/html
3.5 事件对象的常见属性和方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xvb6pJBo-1620388130886)(pink老师js869集笔记.assets/image-20200716170734860.png)] // 常见事件对象的属性和方法// 1、e.target 返回的是触发事件大的对象元素this返回的是绑定事件的对象元素// 区别e.target 点击了那个元素就返回那个元素this 谁绑定了这个事件 就返回谁
比如给ul绑定点击事件this指向的是ule.target指向的是li阻止默认事件 阻止冒泡
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JP038YbE-1620388130887)(pink老师js869集笔记.assets/image-20200716170753578.png)]
解决冒泡兼容性问题 3.6 事件委托 事件委托原理 不是每个子节点单独设置事件监听器而是事件监听器设置在其父结点上然后利用冒泡原理影响每个子结点
案例给ul注册点击事件然后利用事件对象的target来找到当前点击的li因为点击li事件会冒泡到ul上ul有注册事件就会触发事件监听器 事件委托作用 提高了程序的性能
案例
bodyulli你好我是1/lili你好我是2/lili你好我是3/lili你好我是4/lili你好我是5/li/ulscript// 事件委托的核心原理就是给父节点添加侦听器利用事件冒泡影响每一个子节点var ul document.querySelector(ul);ul.addEventListener(click, function (e) {alert(知否知否 弹框在手);e.target.style.backgroundColor pink})/script
/body
3.7 常见的鼠标事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hwNIzrAo-1620388130887)(pink老师js869集笔记.assets/image-20200716170833195.png)]
3.7.1 禁止鼠标右击菜单
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Smh2JdaB-1620388130888)(pink老师js869集笔记.assets/image-20200716170845206.png)]
3.7.2 禁止鼠标选中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qqiEFh1X-1620388130889)(pink老师js869集笔记.assets/image-20200716170855163.png)]
3.8 鼠标事件对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TGxZiP4I-1620388130890)(pink老师js869集笔记.assets/image-20200716170908139.png)]
案例跟随鼠标移动的天使
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleimg {position: absolute;width: 30px;height: 30px;}/style
/headbodyimg srcimages/tianshi.jpg altscriptvar pic document.querySelector(img);document.addEventListener(mousemove, function (e) {var x e.pageX;var y e.pageY;pic.style.left x - 15 px;pic.style.top y - 15 px;})/script
/body/html
3.9 常用键盘事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k1ft6gce-1620388130890)(pink老师js869集笔记.assets/image-20200716171007212.png)]
案例按下S键 搜索框获得焦点
keyup 是按下松开时 down和press在文本框的特点他们两个时间触发的时候文字还没有落入文本框中
bodyinput typetextscriptvar searchdocument.querySelector(inpput);document.addEventListener(keyup,function(e){// console.log(e.keyCode);if(e.keyCode83){search.focus();//获得焦点}})/script
/body
案例京东快递单号查询 在你输入快递单号后他会在上面显示一个大的div显示你输入的内容 这个内容的字号比较大
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.search {position: relative;width: 178px;margin: 100px;}.con {position: absolute;display: none;top: -40px;width: 171px;border: 1px solid rgba(0, 0, 0, .2);box-shadow: 0 2px 4px rgba(0, 0, 0, .2);padding: 5px 0;font-size: 18px;line-height: 20px;color: #333333;}.con::before {content: ;width: 0;height: 0;position: absolute;top: 28px;left: 18px;border: 8px solid transparent;border-top-color: #ffffff;}/style
/headbodydiv classsearchdiv classcon123/divinput typetext placeholder请输入您的快递单号 classjd/divscriptvar con document.querySelector(.con);var jd_input document.querySelector(.jd);jd_input.addEventListener(keyup, function () {if (this.value ) {con.style.display none;}else {con.style.display block;con.innerHTML this.value;}})/script
/body/html
如果想要完善 还有一个问题 获得焦点的时候有内容显示没有内容隐藏
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p9p3VFPW-1620388130891)(pink老师js869集笔记.assets/image-20200716171025665.png)]
4、BOM
4.1 BOM概述
BOM浏览器对象
BOM即浏览器对象模型 他提供了独立于内容而与浏览器窗口进行交互的对象其核心对象是window
BOM由一系列相关的对象构成并且每个对象都提供了很多方法与属性
BOM缺乏标注js语法的标准化组织是ECMADOM的标准化组织是W3CBOM最初是Netscape浏览器标准的一部分
DOM和BOM区别
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pQ17lWz9-1620388130892)(pink老师js869集笔记.assets/image-20200716171038087.png)]
4.2BOM的构成
BOM比DOM更大它包含DOM
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-evyK3EQR-1620388130893)(pink老师js869集笔记.assets/image-20200716171059835.png)]
4.3 window常见事件
4.3.1窗口加载事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uLXaG9zm-1620388130894)(pink老师js869集笔记.assets/image-20200716171122331.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mJDXcGrE-1620388130895)(pink老师js869集笔记.assets/image-20200716171159415.png)]
4.3.2调整窗口大小事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2OcHVBjA-1620388130895)(pink老师js869集笔记.assets/image-20200716171225001.png)]
4.4 定时器
开启定时器 setTimeout() 回调函数开始定时器 setlnterval()停止定时器 clearTimeout(定时器名字)停止定时器 clearInterval(定时器名字) script/* 1、 setTimeout语法规范window.setTimeout(调用函数,延时时间);1、这个window在调用的时候可以省略2、延时时间单位是毫秒 但是可以省略 如果省略默认是0秒3、这个调用函数可以直接写函数 还可以写函数名 还有一种写法 函数名() 但是这个写法不提倡4、页面中可能有很多的定时器我们经常给定时器加标识符名字var timer1setTimeout(calkback,3000);var timer2setTimeout(calkback,6000);*//* //方案1setTimeout(function(){console.log(时间到了);},2000) *///方案2function calkback() {console.log(爆炸了);}setTimeout(calkback, 3000);/script
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QS5EV36H-1620388130896)(pink老师js869集笔记.assets/image-20200716171340599.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-unP90mJk-1620388130897)(pink老师js869集笔记.assets/image-20200716171359313.png)]
案例京东倒计时设置了定时器 div classtime_bottomspan classhour/spanspan classminute/spanspan classsecond/span/div/div/divscriptvar hour document.querySelector(.hour);var minute document.querySelector(.minute);var second document.querySelector(.second);var inputTime new Date(2020-4-14 22:00:00);//返回的是用户输入时间总的毫秒数function countDown() {var nowTime new Date();//返回的是当前时间总的毫秒数var times (inputTime - nowTime) / 1000;//time是剩余时间总的毫秒数 /1000 表示剩余时间总的毫秒数转化为秒var h parseInt(times / 60 / 60 % 24);//小时h h 10 ? 0 h : h;hour.innerHTML h;//剩余的小时给小时盒子var m parseInt(times / 60 % 60);//分m m 10 ? 0 m : m;minute.innerHTML m;//剩余的分钟给分钟盒子var s parseInt(times % 60);//秒s s 10 ? 0 s : s;second.innerHTML s;//剩余的秒数给秒数盒子}setInterval(countDown, 1000);
/script
这样写会有一点小bug 在var input下面 先调用一下这个函数 就可以解决
案例发送短信 点击发送后60S内不能再次点击
body手机号码input typetextbutton发送/buttonscriptvar time 10;//控制剩余时间var btn document.querySelector(button);btn.addEventListener(click, function () {btn.disabled true;var timer setInterval(function () {if (time 0) {clearInterval(timer);btn.disabled false;btn.innerHTML 发送;time 10;}else {btn.innerHTML 还剩下 time 秒;time--;}}, 1000)})/script
/body
4.5 this指向问题
this的指向在函数定义的时候是确定不了的只有函数执行的时候才能确定this到底指向谁一般情况下this的最终指向的是哪个调用它的对象
1、全局作用域或者普通函数中this指向全局对象window注意定时器里面的this也是指向window
2、方法调用中谁调用this指向谁
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RhhhmYV4-1620388130898)(pink老师js869集笔记.assets/image-20200716171432255.png)]
3、构造函数中this指向构造函数的实例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9lESHIi8-1620388130899)(pink老师js869集笔记.assets/image-20200716171447516.png)]
4.6 JS执行队列
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RI6k2Yr5-1620388130900)(pink老师js869集笔记.assets/image-20200716171500076.png)]
同步和异步
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uu0jhMSM-1620388130901)(pink老师js869集笔记.assets/image-20200716171522696.png)] 同步任务 同步任务都在主线程上执行形成一个执行栈 异步任务 JS的异步是通过回调函数实现的
一般而言异步任务有以下三种类型
普通事件如 click、resize等资源加载如 load、error等定时器
异步任务相关回调函数添加到任务队列中任务对象也成为消息队列
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0FDaO7l2-1620388130902)(pink老师js869集笔记.assets/image-20200716171539522.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nVEVAGjD-1620388130902)(pink老师js869集笔记.assets/image-20200716171602802.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-40yKQy1I-1620388130903)(pink老师js869集笔记.assets/image-20200716171614826.png)]
4.7 location 对象 定义window对象给我们提供了一个location属性用于获取或设置窗体的URL并且可以用于解析URL因为这个属性返回的是一个对象所以我们将这个属性也成为location 4.7.1 URL 定义统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL它包含的信息指出文件的位置以及浏览器应该怎么处理它 语法格式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AZPbYFZ5-1620388130904)(pink老师js869集笔记.assets/image-20200716171634994.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FEitE3aW-1620388130904)(pink老师js869集笔记.assets/image-20200716171645743.png)]
4.7.2 location 对象的属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pkWi6K5r-1620388130905)(pink老师js869集笔记.assets/image-20200716171703434.png)]
案例五秒之后 跳转到首页
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv/divscriptvar timer 5;var div document.querySelector(div);tiaozhuan();function tiaozhuan() {if (timer 0) {location.href http:www.jd.com;}else {div.innerHTML 您好将在 timer 秒之后跳转到首页timer--;}}setInterval(tiaozhuan, 1000)/script
/body/html案例根据用户在输入框输入的值 跳转到不同的页面
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleindex/title
/headbodydiv/divscriptconsole.log(location.search);//得到unameandy// 1、先去掉问号 substr(起始的位置,截取几个字符)var params location.search.substr(1);//1表示从索引号1开始 第二值没写表示截取到最后console.log(params);//得到 unameandy// 2、利用等号把字符串分割为数组var arr params.split();console.log(arr);var div document.querySelector(div);div.innerHTML arr[1] 欢迎你;/script
/body/html!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyform actionindex.html用户名input typetext nameunameinput typesubmit value登录/form
/body/html
4.7.3 location 对象的方法 刷新页面 跳转页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S9MCwvJ0-1620388130906)(pink老师js869集笔记.assets/image-20200716171820076.png)]
4.8 navigator 对象 此对象 包含有关浏览器的信息他有很多属性我们最常用的是userAgent该属性可以返回由客户机发送服务器的user-agent头部的值 案例判断用户那个前端打开页面实现跳转
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iLaDDTEh-1620388130906)(pink老师js869集笔记.assets/image-20200716171833694.png)]
4.9 history 对象 back() forward() 与浏览器历史记录进行交互该对象包含用户在浏览器窗口中访问过的URL [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LEDlt4Dc-1620388130907)(pink老师js869集笔记.assets/image-20200716171849071.png)]
5、PC端网页特效
5.1 元素偏移量 offset系列 我们使用offset系列相关属性可以动态的得到该元素的位置偏移、大小等 获得元素距离带有定位父元素的位置获得元素自身的大小宽度高度注意返回的数字都不带单位
offset 系列常用属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dyHEISbC-1620388130908)(pink老师js869集笔记.assets/image-20200716171930823.png)]
offsettop/left 他以带有定位的父亲为准 如果没有父亲或者父亲没有定位则以body为准
offsetwidth/height 可以的到元素的大小 宽度和高度 是包括paddingborderwidth的
offsetparent 返回的是带有定位的父亲 否则返回的就是body
offset和style的区别
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-afPdC0vV-1620388130908)(pink老师js869集笔记.assets/image-20200716171944707.png)]
案例获取鼠标点击的坐标
style.box {width: 200px;height: 200px;background-color: pink;}/style
/headbodydiv classbox/divscriptvar div document.querySelector(.box);div.addEventListener(click, function (e) {var x e.pageX - this.offsetLeft;var y e.pageY - this.offsetTop;this.innerHTML x坐标是 x \ny坐标是 y;})/script
/body
案例能拖动的模态框
!DOCTYPE html
htmlhead langenmeta charsetUTF-8title/titlestyle.login-header {width: 100%;text-align: center;height: 30px;font-size: 24px;line-height: 30px;}ul,li,ol,dl,dt,dd,div,p,span,h1,h2,h3,h4,h5,h6,a {padding: 0px;margin: 0px;}.login {display: none;width: 512px;height: 280px;position: fixed;border: #ebebeb solid 1px;left: 50%;top: 50%;background: #ffffff;box-shadow: 0px 0px 20px #ddd;z-index: 9999;transform: translate(-50%, -50%);}.login-title {width: 100%;margin: 10px 0px 0px 0px;text-align: center;line-height: 40px;height: 40px;font-size: 18px;position: relative;cursor: move;}.login-input-content {margin-top: 20px;}.login-button {width: 50%;margin: 30px auto 0px auto;line-height: 40px;font-size: 14px;border: #ebebeb 1px solid;text-align: center;}.login-bg {display: none;width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;background: rgba(0, 0, 0, .3);}a {text-decoration: none;color: #000000;}.login-button a {display: block;}.login-input input.list-input {float: left;line-height: 35px;height: 35px;width: 350px;border: #ebebeb 1px solid;text-indent: 5px;}.login-input {overflow: hidden;margin: 0px 0px 20px 0px;}.login-input label {float: left;width: 90px;padding-right: 10px;text-align: right;line-height: 35px;height: 35px;font-size: 14px;}.login-title span {position: absolute;font-size: 12px;right: -20px;top: -30px;background: #ffffff;border: #ebebeb solid 1px;width: 40px;height: 40px;border-radius: 20px;}/style
/headbodydiv classlogin-headera idlink hrefjavascript:;点击弹出登录框/a/divdiv idlogin classlogindiv idtitle classlogin-title登录会员spana idcloseBtn hrefjavascript:void(0); classclose-login关闭/a/span/divdiv classlogin-input-contentdiv classlogin-inputlabel用户名/labelinput typetext placeholder请输入用户名 nameinfo[username] idusername classlist-input/divdiv classlogin-inputlabel登录密码/labelinput typepassword placeholder请输入登录密码 nameinfo[password] idpassword classlist-input/div/divdiv idloginBtn classlogin-buttona hrefjavascript:void(0); idlogin-button-submit登录会员/a/div/div!-- 遮盖层 --div idbg classlogin-bg/divscript// 1. 获取元素var login document.querySelector(.login);var mask document.querySelector(.login-bg);var link document.querySelector(#link);var closeBtn document.querySelector(#closeBtn);var title document.querySelector(#title);// 2. 点击弹出层这个链接 link 让mask 和login 显示出来link.addEventListener(click, function() {mask.style.display block;login.style.display block;})// 3. 点击 closeBtn 就隐藏 mask 和 login closeBtn.addEventListener(click, function() {mask.style.display none;login.style.display none;})// 4. 开始拖拽// (1) 当我们鼠标按下 就获得鼠标在盒子内的坐标title.addEventListener(mousedown, function(e) {var x e.pageX - login.offsetLeft;var y e.pageY - login.offsetTop;// (2) 鼠标移动的时候把鼠标在页面中的坐标减去 鼠标在盒子内的坐标就是模态框的left和top值document.addEventListener(mousemove, move)function move(e) {login.style.left e.pageX - x px;login.style.top e.pageY - y px;}// (3) 鼠标弹起就让鼠标移动事件移除document.addEventListener(mouseup, function() {document.removeEventListener(mousemove, move);})})/script
/body/html案例京东放大镜
结构图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8dZeNXk8-1620388130909)(pink老师js869集笔记.assets/image-20200716172029699.png)]
代码JS
window.addEventListener(load, function() {var preview_img document.querySelector(.preview_img);var mask document.querySelector(.mask);var big document.querySelector(.big);// 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子preview_img.addEventListener(mouseover, function() {mask.style.display block;big.style.display block;})preview_img.addEventListener(mouseout, function() {mask.style.display none;big.style.display none;})// 2. 鼠标移动的时候让黄色的盒子跟着鼠标来走preview_img.addEventListener(mousemove, function(e) {// (1). 先计算出鼠标在盒子内的坐标var x e.pageX - this.offsetLeft;var y e.pageY - this.offsetTop;// console.log(x, y);// (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了// (3) 我们mask 移动的距离var maskX x - mask.offsetWidth / 2;var maskY y - mask.offsetHeight / 2;// (4) 如果x 坐标小于了0 就让他停在0 的位置// 遮挡层的最大移动距离var maskMax preview_img.offsetWidth - mask.offsetWidth;if (maskX 0) {maskX 0;} else if (maskX maskMax) {maskX maskMax;}if (maskY 0) {maskY 0;} else if (maskY maskMax) {maskY maskMax;}mask.style.left maskX px;mask.style.top maskY px;// 3. 大图片的移动距离 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离// 大图var bigIMg document.querySelector(.bigImg);// 大图片最大移动距离var bigMax bigIMg.offsetWidth - big.offsetWidth;// 大图片的移动距离 X Yvar bigX maskX * bigMax / maskMax;var bigY maskY * bigMax / maskMax;bigIMg.style.left -bigX px;bigIMg.style.top -bigY px;})})5.2 元素可视区 client系列
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QoHY5hgI-1620388130910)(pink老师js869集笔记.assets/image-20200716172058348.png)]
5.3 立即执行函数
立即执行函数function(){}
不需要调用立马执行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OAmlcLjb-1620388130911)(pink老师js869集笔记.assets/image-20200716172117651.png)]
作用创建一个独立的作用域
5.4 元素滚动scroll 系列
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cpSXRWOo-1620388130912)(pink老师js869集笔记.assets/image-20200716172129325.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WsFyOGWM-1620388130913)(pink老师js869集笔记.assets/image-20200716172139650.png)]
虽然不包含边框但是包含padding
页面被卷去的头部
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hVesANj8-1620388130913)(pink老师js869集笔记.assets/image-20200716172154870.png)]
案例淘宝侧边栏
!DOCTYPE html
html langenheadmeta charsetUTF-8titleTitle/titlestyle.slide-bar {width: 45px;height: 130px;margin-left: 600px;position: absolute;left: 50%;top: 300px;background-color: pink;}.header {width: 1200px;height: 150px;background-color: purple;margin: 10px auto;}.banner {width: 1200px;height: 250px;background-color: skyblue;margin: 10px auto;}.main {width: 1200px;height: 1000px;background-color: yellowgreen;margin: 10px auto;}span {position: absolute;bottom: 0;display: none;}/style
/headbodydiv classslide-barspan classgoBack返回顶部/span/divdiv classheader头部区域/divdiv classbannerbanner区域/divdiv classmain主体区域/div
/body/html
scriptvar slideBar document.querySelector(.slide-bar);var banner document.querySelector(.banner);var bannerTop banner.offsetTop; //banner到达页面顶部时页面被卷去的头部的大小一定要写到滚动的外面console.log(bannerTop);var slideBarTop slideBar.offsetTop - bannerTop; //固定定位之后应该变化的数值var main document.querySelector(.main);var goBack document.querySelector(.goBack);var mainTop main.offsetTop;//1,页面滚动事件 scrolldocument.addEventListener(scroll, function () {if (window.pageYOffset bannerTop) {slideBar.style.position fixed;slideBar.style.top slideBarTop px;}else {slideBar.style.position absolute;slideBar.style.top 300 px;}//2当页面滚动到main盒子就显示 goBack 模块“返回顶部”if (window.pageYOffset mainTop) {goBack.style.display block;}else {goBack.style.display none;}})
/script5.5 三大系列总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QTz5IV2z-1620388130914)(pink老师js869集笔记.assets/image-20200716172214201.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h1lEijQu-1620388130915)(pink老师js869集笔记.assets/image-20200716172227921.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JYlZql3M-1620388130915)(pink老师js869集笔记.assets/image-20200716172238334.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aUBWYhcm-1620388130916)(pink老师js869集笔记.assets/image-20200716172246978.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8yIFbs6z-1620388130917)(pink老师js869集笔记.assets/image-20200716172256764.png)]
他们的主要用法
offset系列经常用于获得元素位置 offsetLeft offsetTopclient经常用于获取元素大小 clientWidth clientHeightscroll 经常用于获取滚动距离 scrollTop scrollLeft注意页面的滚动距离通过 window.pageXOffset获得
5.6 onouseenter onmousover区别
区别当加上mouseover 它的子级也会触发 但如果是mouseenter鼠标在在他身上的时候才会触发 mouseenter不会冒泡
mouseover 鼠标经过自身盒子会触发经过子盒子还会触发。mouseenter 只会经过自身盒子触发mouseenter不会冒泡
5.7 动画函数封装
5.7.1 左右动画函数封装
// 简单动画函数封装obj目标对象 target目标位置
function animate(obj, target, callback) {clearInterval(obj.timer);obj.timer setInterval(function () {var step (target - obj.offsetLeft) / 10;step step 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft target) {clearInterval(obj.timer);if (callback) {callback();}}obj.style.left obj.offsetLeft step px;}, 15);
}5.7.2 上下动画函数封装
function animate(obj, target, callback) {clearInterval(obj.timer);obj.timer setInterval(function () {var step (target - window.pageYOffset) / 10;step step 0 ? Math.ceil(step) : Math.floor(step);if (window.pageYOffset target) {clearInterval(obj.timer);if (callback) {callback();}}window.scroll(0, window.pageYOffset step);}, 15);
}5.8 PC端网页轮播图
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src动画函数.js/scriptstyle* {margin: 0;padding: 0;}.box {position: relative;width: 600px;height: 400px;background-color: pink;margin: 100px auto;text-align: center;overflow: hidden;}img {width: 600px;height: 400px;}.span1,.span2 {position: absolute;width: 40px;height: 40px;background-color: red;line-height: 40px;display: none;z-index: 3;}.span1 {right: 0;top: 50%;transform: translateY(-50%);border-top-left-radius: 50%;border-bottom-left-radius: 50%;}.span2 {left: 0;top: 50%;transform: translateY(-50%);border-top-right-radius: 50%;border-bottom-right-radius: 50%;}.yuanbtn {position: absolute;bottom: 0;left: 20px;z-index: 3;}.yuanbtn li {list-style: none;float: left;margin-right: 5px;background-color: #a09e9e;width: 10px;height: 10px;border-radius: 50%;}.yuanbtnbgc {background-color: red !important;}.pic {width: 700%;position: absolute;top: 0;left: 0;}.pic li {list-style: none;float: left;}/style
/headbodydiv classbox!-- span表示左右两边的小按钮 --span classspan1gt;/span!-- span1是右侧的 span2是左侧的 --span classspan2lt;/spanol classyuanbtn/ol!-- 下面是图片 --ul classpicliimg srcimages/轮播图-01.jpg alt/liliimg srcimages/轮播图-02.jpg alt/liliimg srcimages/轮播图-03.jpg alt/liliimg srcimages/轮播图-04.jpg alt/li/ul/divscript//页面加载完图片 啥的才执行window.addEventListener(load, function () {//鼠标经过轮播图 左右按钮显示离开隐藏var span1 document.querySelector(.span1);var span2 document.querySelector(.span2);console.log(span1, span2);var box document.querySelector(.box);var picwidth box.offsetWidth;console.log(picwidth);// 鼠标移动到盒子上显示 左右两侧按钮box.addEventListener(mouseenter, function () {span1.style.display block;span2.style.display block;clearInterval(timer);timer null;})box.addEventListener(mouseleave, function () {span1.style.display none;span2.style.display none;timer setInterval(function () {// 手动调用点击事件span1.click();}, 2000)})//动态生成小圆圈var ul box.querySelector(ul);var ol box.querySelector(ol);console.log(ul);console.log(ul.children);for (var i 0; i ul.children.length; i) {//创建小livar li document.createElement(li);//记录当前小圆圈的索引号li.setAttribute(index, i);// 吧小li插入到olol.appendChild(li);// 我给可以在生成小圆圈的同时 绑定事件li.addEventListener(click, function () {// 干掉所有人for (var i 0; i ol.children.length; i) {ol.children[i].className ;}this.className yuanbtnbgc;// 点击小圆圈 滚动图片// ul的移动距离 就是小圆圈索引号×图片宽度负var index this.getAttribute(index);// 当我们点击了某个小li 就要把这个li的索引号给numnum index;// 当我们点击了某个小li 就要把这个li的索引号给circlecircle index;// 确定当前小圆圈的索引号animate(ul, -(index * picwidth))})}// 默认给第一个小圆圈换成红色ol.children[0].className yuanbtnbgc;// 克隆第一张图片 放在ul最后面var first ul.children[0].cloneNode(true);ul.appendChild(first);// 点击右侧按钮 图片 右移动一张var num 0;var circle 0;var flag true;//节流阀变量// circle控制小圆圈播放span1.addEventListener(click, function () {if (flag) {flag false;// 如果走到了复制的最后一张图片 它的ul left要改为0if (num ul.children.length - 1) {ul.style.left 0;num 0;}num;animate(ul, -(num * picwidth), function () {flag true;//打开节流阀})// 点击右侧按钮 小圆圈跟着一起变化circle;// 如果等于5 走到了最后克隆的图片if (circle ol.children.length) {circle 0;}for (var i 0; i ol.children.length; i) {ol.children[i].className ;}ol.children[circle].className yuanbtnbgc;}})// 左侧按钮span2.addEventListener(click, function () {if (flag) {flag false;// 如果走到了复制的最后一张图片 它的ul left要改为0if (num 0) {ul.style.left -(ul.children.length - 1) * picwidth px;num ul.children.length - 1;}num--;animate(ul, -(num * picwidth), function () {flag true;})// 点击右侧按钮 小圆圈跟着一起变化circle--;// 如果等于5 走到了最后克隆的图片if (circle 0) {circle ol.children.length - 1;}for (var i 0; i ol.children.length; i) {ol.children[i].className ;}ol.children[circle].className yuanbtnbgc;}})// 自动播放var timer setInterval(function () {// 手动调用点击事件span1.click();}, 2000)})/script!-- 需求1、鼠标经过轮播图模块 左右按钮显示离开隐藏左右按钮2、点击右侧按钮一次图片往左播放一张3、图片播放的同时下面小圆圈模块跟随一起变化4、点击小圆圈 可以播放相应图片5、鼠标不经过轮播图轮播图也会自动播放6、鼠标经过 轮播图模块 自动播放停止--/body/html5.9 回到顶部动画案例
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.w {width: 1200px;margin: auto;}.head {height: 500px;background-color: #000000;}.banner {height: 300px;background-color: red;}.main {height: 1000px;background-color: green;}.ce {position: absolute;top: 700px;right: 100px;height: 100px;width: 60px;background-color: pink;}span {display: none;}/style
/headbodydiv classcespan返回顶部/span/divheader classhead w/headerdiv classbanner w/divdiv classmain w/divscriptvar span document.querySelector(span);var ce document.querySelector(.ce);var banner document.querySelector(.banner);var bannerTop banner.offsetTop;//这个距离是banner距离页面顶部的距离var ceTop ce.offsetTop - bannerTop;var main document.querySelector(.main);var mainTop main.offsetTop;console.log(ceTop);console.log(bannerTop);document.addEventListener(scroll, function () {if (window.pageYOffset bannerTop) {ce.style.position fixed;ce.style.top ceTop px;}else {ce.style.position absolute;ce.style.top 700 px;}if (window.pageYOffset mainTop) {span.style.display block;}else {span.style.display none;}})// 点击返回顶部 窗口滚动到页面你的最上方span.addEventListener(click, function () {// window.scroll(x,y) 可以返回到任何区域但是是瞬间返回到 x,y不跟单位// window.scroll(0, 0);// 窗口滚动 所以对象是窗口animate(window, 0);})// 动画函数 向上滚动的function animate(obj, target, callback) {clearInterval(obj.timer);obj.timer setInterval(function () {var step (target - window.pageYOffset) / 10;step step 0 ? Math.ceil(step) : Math.floor(step);if (window.pageYOffset target) {clearInterval(obj.timer);if (callback) {callback();}}window.scroll(0, window.pageYOffset step);}, 15);}/script
/body/html5.10 筋斗云导航栏
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}body {background-color: #000000;}div {position: relative;width: 960px;height: 40px;margin: 100px auto;background-color: #fff;}ul {position: absolute;}ul li {float: left;list-style: none;width: 120px;height: 40px;text-align: center;}span {position: absolute;display: block;top: 0;left: 0;background: url(images/筋斗云背景.jpg) no-repeat center/120px 40px;width: 120px;height: 40px;z-index: 0;}/style
/head
!-- 功能需求鼠标经过某个小li 筋斗云跟这到当前小li的位置鼠标离开这个小li 筋斗云复原为原来的位置鼠标点击了某个小li 筋斗云就会留在点击这个小li的位置--bodydivspan/spanul classul1li首页新闻/lili师资力量/lili活动策划/lili企业文化/lili招聘信息/lili公司简介/lili上海校区/lili广州校区/li/ul/divscriptvar span document.querySelector(span);console.log(span);var current 0;//current 作为筋斗云的起始位置var lis document.querySelectorAll(li);console.log(lis);for (var i 0; i lis.length; i) {lis[i].addEventListener(mouseenter, function () {animate(span, this.offsetLeft);})lis[i].addEventListener(mouseleave, function () {animate(span, current);})lis[i].addEventListener(click, function () {current this.offsetLeft;// 把位置固定住})}function animate(obj, target, hanshu) {clearInterval(obj.timer);obj.timer setInterval(function () {var step (target - obj.offsetLeft) / 10;step step 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft target) {clearInterval(obj.timer);if (hanshu) {hanshu();}}obj.style.left obj.offsetLeft step px;}, 15)}/script
/body/html6、移动端网页特效
6.1 概述
1、触屏事件概述
移动端浏览器兼容性较好我们不需要考虑以前js的兼容性问题 可以放心的使用原生js书写效果 但是移动端也有自己独特的地方 比如触屏事件touch 也称触摸事件 Android和ios都有
touch对象代表一个触摸点 触摸点可能事一根手指 也可能事一根触摸笔 触碰事件可响应用户手指或者触控笔对屏幕或者触控板操作
常见的触屏事件如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RteicClT-1620388130917)(pink老师js869集笔记.assets/image-20200716172325858.png)]
stylediv {width: 100px;height: 100px;background-color: pink;}/style
/headbodydiv/divscriptvar div document.querySelector(div);// 1、手机触摸DOM元素事件这里的摸就相当于点击div.addEventListener(touchstart, function () {console.log(我摸了你);});// 2、手机在DOM元素身上移动就是当你点击后不松手继续移动div.addEventListener(touchmove, function () {console.log(我继续摸了你);});// 3、手机在一个DOM元素离开时就是鼠标按下松开的时候div.addEventListener(touchend, function () {console.log(轻轻的我走了);});/script
6.2 触摸事件对象 TouchEvent 是一类描述手指在触摸平面触摸屏、触摸板等的状态变化的事件。这类事件用于描述一个或多个触点使开发者可以检测出点的移动出点的增加和减少等等 touchstart touchmove touchend 三个事件都会有各自事件对象
触摸事件对象常见对象列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AS6HKxpR-1620388130918)(pink老师js869集笔记.assets/image-20200716172358634.png)]
// touches正在触摸屏幕的所有手指的列表 就是有几个手指在触摸屏幕
// targetTouches 正在触摸当前DOM元素的手指列表 就是有几个手指在触摸DOM元素
// 如果侦听的是一个DOM元素他们两个是一样的// changedTouches手指状态发生改变的列表 从无到有 或者从有到无
// 当我们手指离开屏幕的时候就没有了touches和targetTouches列表
// 但是会有changedTouches
// 最常用 targetTouches
6.3 移动端拖动元素
1、touchstart touchmove touchend 可以实现拖动元素
2、但是拖动元素需要当前手机的坐标值 我们可以使用 targetTouches[0]里面的pageX 、pageY的值
3、移动端拖动的原理手指移动中计算出手指移动的距离然后用盒子原来的位置手指移动的距离
4、手指滑动的距离手指滑动中的位置减去 手指刚开始触摸的位置
拖动元素三部曲
1、触摸元素 touchstart 获取手指初始坐标同时获得盒子原来的位置
2、移动手指touchmove 计算手指的滑动距离 并且移动盒子
3、离开手指 touchend
注意手指移动 也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault()
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {position: absolute;left: 0;width: 100px;height: 100px;background-color: pink;}/style
/headbodydiv/divscriptvar div document.querySelector(div);var startX 0;// 获取手指初始坐标var startY 0;var x 0; //盒子原来的位置var y 0; //盒子原来的位置div.addEventListener(touchstart, function (e) {startX e.targetTouches[0].pageX;startY e.targetTouches[0].pageY;x this.offsetLeft;y this.offsetTop;})div.addEventListener(touchmove, function (e) {// 计算手指的移动距离var moveX e.targetTouches[0].pageX - startX;var moveY e.targetTouches[0].pageY - startY;this.style.left x moveX px;this.style.top y moveY px;e.preventDefault();//阻止屏幕滚动的默认行为})/script
/body/html
6.4 移动端轮播图
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.foucs {position: relative;overflow: hidden;}ul {overflow: hidden;margin-left: -100%;width: 500%;}ul li {list-style: none;float: left;width: 20%;}img {width: 500px;height: 100px;}ol {position: absolute;left: 50%;transform: translateX(-50%);top: 90px;}ol li {width: 5px;height: 5px;background-color: red;list-style: none;float: left;border-radius: 2px;margin-right: 8px;}.current {width: 15px;}/style
/headbodydiv classfoucsulliimg srcimages/轮播图-03.jpg alt/liliimg srcimages/轮播图-01.jpg alt/liliimg srcimages/轮播图-02.jpg alt/liliimg srcimages/轮播图-03.jpg alt/liliimg srcimages/轮播图-01.jpg alt/li/ulolli classcurrent/lili/lili/li/ol/divscriptwindow.addEventListener(load, function () {var foucs document.querySelector(.foucs);console.log(foucs);var ul foucs.children[0];console.log(ul);// 获得foucs的宽度var w foucs.offsetWidth;console.log(w);// 利用定时器轮播图片var index 0;var flag false;var ol foucs.children[1];var timer setInterval(function () {index;var translatex -index * w;ul.style.transition all .3s;ul.style.transform translateX( translatex px);}, 2000)// 等着我们过度完成之后再去判断 监听过度结束事件ul.addEventListener(transitionend, function () {// 无缝滚动if (index 3) {index 0;// 去掉过度效果 快速来到目标位置ul.style.transition none;var translatex -index * w;ul.style.transform translateX( translatex px);} else if (index 0) {index 2;index 0;// 去掉过度效果 快速来到目标位置ul.style.transition none;var translatex -index * w;ul.style.transform translateX( translatex px);}// 小圆点跟随变化ol.querySelector(.current).classList.remove(current);ol.children[index].classList.add(current);});// 手指滑动轮播图var startX 0;var moveX 0;ul.addEventListener(touchstart, function (e) {startX e.targetTouches[0].pageX;clearInterval(timer);});ul.addEventListener(touchmove, function (e) {moveX e.targetTouches[0].pageX - startX;var translatex -index * w moveX;ul.style.transition none;ul.style.transform translateX( translatex px);flag true;e.preventDefault();});ul.addEventListener(touchend, function () {if (flag) {if (Math.abs(moveX) 50) {if (moveX 0) {index;}else {index;}var translatex -index * w;ul.style.transition all .3s;ul.style.transform translateX( translatex px);}else {var translatex -index * w;ul.style.transition none;ul.style.transform translateX( translatex px);}}// 重新开启定时器clearInterval(timer);timer setInterval(function () {index;var translatex -index * w;ul.style.transition all .3s;ul.style.transform translateX( translatex px);}, 2000)})})/script
/body/htmlclassList 切换类 追加类 删除类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zViRwPIY-1620388130919)(pink老师js869集笔记.assets/image-20200716172533359.png)]
切换类就是你点击一下添加这个类再点击一点就删除这个类
6.5 移动端回到顶部
移动端click 是有延迟的
移动端的click事件会有300ms的延迟 原因是移动端屏幕双击会缩放页面
清除这个300ms延迟的方法
1、禁止缩放
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o8Oip0o3-1620388130920)(pink老师js869集笔记.assets/image-20200716172550426.png)]
2、利用touch事件子级封装这个事件解决300ms延迟
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xs4X8zAm-1620388130921)(pink老师js869集笔记.assets/image-20200716172605084.png)]
3、使用插件 fastclick
地址https://github.com/ftlabs/fastclick
在lib 里面 直接复制它的js代码
使用步骤
引入JS文件在页面中再写一个script写入下面的代码直接写自己的代码就可以了
if (addEventListener in document) {document.addEventListener(DOMContentLoaded, function() {FastClick.attach(document.body);}, false);
}6.6 移动端常用开发插件
6.6.1 swiper插件
地址https://www.swiper.com.cn
使用步骤
引入min.css min.js打开相应的demo 直接复制它的结构 css样式也要复制到我们自己的css文件夹里面打开相应的demo 复制它的js 到我们自己的js文件中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3EsXvBnM-1620388130921)(pink老师js869集笔记.assets/image-20200716172616771.png)]
其他插件
superslide:http://www.superslide2.com/
iscroll:https://gitub.com/cubiq/iscroll
插件使用总结
确认插件实现的功能去官网查看使用说明下载插件打开demo实例文件查看需要引入的相关文件并且引入复制demo实例文件中的结构html样式css以及js代码
常用框架 Bootstrap Vue Angular Reactden等
常用插件swiper superslide iscroll等
6.6.2 Bootstrap插件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Oap8awRb-1620388130922)(pink老师js869集笔记.assets/image-20200716172628174.png)]
7、本地存储
7.1 本地存储特性
数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大sessionStorage约5M、localStorage约20M只能存储字符串可以将对象JSON.stringify()编码后存储
7.2 window.sessionStorage
生命周期为关闭浏览器窗口在同一个窗口页面下数据可以共享以键值对的形式存储使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bi71GyrX-1620388130922)(pink老师js869集笔记.assets/image-20200716172647708.png)]
bodyinput typetextbutton classset存储数据/buttonbutton classget获取数据/buttonbutton classremove删除数据/buttonbutton classdel清空所有数据/buttonscriptvar ipt document.querySelector(input);var set document.querySelector(.set);var get document.querySelector(.get);var remove document.querySelector(.remove);var del document.querySelector(.del);set.addEventListener(click, function () {var val ipt.value;sessionStorage.setItem(uname, val);//第一个参数就是名字第二个就是值})get.addEventListener(click, function () {console.log(sessionStorage.getItem(uname));// 写的参数就是你想获取的参数的名字})remove.addEventListener(click, function () {sessionStorage.removeItem(uname);})del.addEventListener(click, function () {sessionStorage.clear();})/script
/body
7.3 window.localStorage
生命周期永久生效除非手动删除 否则关闭页面也会存在可以多窗口页面共享同一浏览器可以共享以键值对的形式存储使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gCrbHquM-1620388130923)(pink老师js869集笔记.assets/image-20200716172700352.png)]
案例记住用户名
bodyinput typetext idusernameinput typecheckbox idremember记住用户名scriptvar username document.querySelector(#username);var remember document.querySelector(#remember);if (localStorage.getItem(username)) {username.value localStorage.getItem(username);remember.checked true;}remember.addEventListener(change, function () {if (this.checked) {localStorage.setItem(username, username.value)}else {localStorage.removeItem(username);}})/script
/body
jQuery入门
8.1 jQuery 概述
javascript库:即library是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库就是这个库中封装了很多预先定义好的函数在里面比如动画animate、hide、show比如获取元素等
简单理解就是一个js文件里面对我们原生js代码进行了封装存放到里面。这样我们可以快速高校的使用这些封装好的功能了。
比如jQuery就是为了快速方便的操作DOM,里面基本都是函数方法
常见的js库
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-48rfpalW-1620388130923)(pink老师js869集笔记.assets/image-20200716172738150.png)]
8.2 jQuery的概念 jQuery是一个快速、简介的JavaScript库其设计的宗旨是“write less,Do More”提倡写更少的代码做更多的事情 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pZuBCbRA-1620388130924)(pink老师js869集笔记.assets/image-20200716172751464.png)]
8.2 jQuery优点
轻量级。核心文件才几十KB不会影响页面加载速度跨浏览器兼容。基本兼容了现在主流的浏览器链式编程隐式迭代对事件、样式、动画支持大大简化了DOM操作支持插件扩展开发。有着丰富的第三方的插件例如树形菜单、日期控件、轮播图等免费、开源
8.3 使用
8.3.1 等着页面加载完毕再加载JS
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mr4pxzh3-1620388130924)(pink老师js869集笔记.assets/image-20200716172807791.png)]
8.3.2 jQuery对象和DOM对象区别
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U8w3dQ1I-1620388130925)(pink老师js869集笔记.assets/image-20200716172829965.png)]
jQuery对象和DOM对象之间是可以相互转换的
因为原生js比jQuery更大原生的一些属性和方法jQuery没有给我们封装要想使用这些属性和方法需要把jQuery对象转换成DOM对象才能使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j5il9LoH-1620388130926)(pink老师js869集笔记.assets/image-20200716172847298.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-USV7xYVS-1620388130926)(pink老师js869集笔记.assets/image-20200716172900635.png)]
8.4 选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kjJimR1U-1620388130927)(pink老师js869集笔记.assets/image-20200716172920841.png)]
8.5 设置属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ap4iYb9q-1620388130927)(pink老师js869集笔记.assets/image-20200716172932782.png)]
8.6 隐式迭代
遍历内部DOM元素伪数组形式存储的过程就叫做 隐式迭代
简单理解给匹配到的所有元素进行循环遍历执行相应的方法而不用我们再进行循环简化我们的操作方便我们调用
8.7 jQuery 筛选选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uoLZjxej-1620388130928)(pink老师js869集笔记.assets/image-20200716172945821.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FRzmgNai-1620388130929)(pink老师js869集笔记.assets/image-20200716172955515.png)]
parent返回的是距离最近的父级元素
chidlren是最亲一代的子级元素 就是亲儿子 相当于子代选择器 ulli
find 可以选择儿子和孙子 相当于 后代选择器
siblings查找不包括自己的同辈元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WPrKwBi0-1620388130930)(pink老师js869集笔记.assets/image-20200716173012697.png)]
8.8 案例鼠标放上去显示离开隐藏
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k5jDbkea-1620388130930)(pink老师js869集笔记.assets/image-20200716173022602.png)]
8.9 排他思想
script srcjQuery-min.js/script/headbodybutton快速/buttonbutton快速/buttonbutton快速/buttonbutton快速/buttonbutton快速/buttonbutton快速/buttonbutton快速/buttonscript$(function () {// 1 隐式迭代 给所有的按钮都绑定了点击事件$(button).click(function () {$(this).css(background, pink);$(this).siblings(button).css(background, );});})/script
/body
8.10 JQ 左右tab栏切换
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QONOnwOf-1620388130931)(pink老师js869集笔记.assets/image-20200716173050016.png)]
script srcjQuery-min.js/scriptstyle.wrapper {width: 400px;height: 400px;margin: 100px auto;border: 1px solid yellow;}#left {float: left;}#content {position: relative;float: right;}#content div {width: 200px;height: 200px;}.red {position: absolute;top: 0;left: -200px;background-color: red;}.green {position: absolute;top: 0;left: -200px;background-color: green;}.black {position: absolute;top: 0;left: -200px;background-color: black;}/style
/headbodydiv classwrapperul idleftlia href#红色/a/lilia href#绿色/a/lilia href#黑色/a/li/uldiv idcontentdiv classred/divdiv classgreen/divdiv classblack/div/div/divscript$(function () {$(#left li).mouseover(function () {var index $(this).index();console.log(index);$(#content div).eq(index).show();$(#content div).eq(index).siblings().hide();})})/script
/body
8.11 JQ操作CSS 添加类 删除类
1、参数是 属性名属性值逗号分隔是设置一组样式属性必须佳引号值如果是数字可以不用跟单位和引号
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fy0dsxj9-1620388130932)(pink老师js869集笔记.assets/image-20200716173104635.png)]
2、参数可以是对象形式方便设置多组样式。属性名和属性值用冒号隔开属于可以不用加引号
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1FWzaKkx-1620388130932)(pink老师js869集笔记.assets/image-20200716173116563.png)]
数字可以不加引号属性也可以不加引号如果是符合属性则必须采取驼峰命名法属性值不是引号则必须加引号
添加类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vbMKBwwu-1620388130933)(pink老师js869集笔记.assets/image-20200716173132530.png)]
删除类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-etU7ZYAC-1620388130934)(pink老师js869集笔记.assets/image-20200716173141898.png)]
切换类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hawzi5L0-1620388130934)(pink老师js869集笔记.assets/image-20200716173152839.png)]
注意
1、原生js的className 会覆盖原先的类
2、jQuery的addClass 不会覆盖原先的类
8.12 JQ效果动画效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FF1huZqO-1620388130935)(pink老师js869集笔记.assets/image-20200716173211661.png)]
show()
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3piPf6Xw-1620388130936)(pink老师js869集笔记.assets/image-20200716173222379.png)]
hide()
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Xy6wS4K-1620388130936)(pink老师js869集笔记.assets/image-20200716173233912.png)]
切换
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Yzn4fiz-1620388130937)(pink老师js869集笔记.assets/image-20200716173246606.png)]
向下滑动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9QTTSg18-1620388130937)(pink老师js869集笔记.assets/image-20200716173302196.png)]
向上滑动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FTBQZCXl-1620388130938)(pink老师js869集笔记.assets/image-20200716173312775.png)]
滑动切换
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ewUOWwIR-1620388130939)(pink老师js869集笔记.assets/image-20200716173323486.png)]
事件切换
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VhbuQyqz-1620388130939)(pink老师js869集笔记.assets/image-20200716173336435.png)]
第一个函数是鼠标经过 第二个是鼠标离开的函数
如果hover 只写了一个函数那么鼠标经过和鼠标离开都会触发这个函数
动画队列及其停止排队方法
1、动画或效果队列
动画或者效果一旦触发就会执行如果多次触发就造成多个动画或者效果排队执行
2、停止排队
stop()
1、stop()方法用于停止动画或者效果
2、注意stop()写到动画或者效果的前面相当于停止结束上一次的动画
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-je1l0J9s-1620388130940)(pink老师js869集笔记.assets/image-20200716173401081.png)]
淡入效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Q7pSvjd-1620388130941)(pink老师js869集笔记.assets/image-20200716173413840.png)]
淡出效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5bhRU19U-1620388130941)(pink老师js869集笔记.assets/image-20200716173425842.png)]
渐进效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jRiasC0n-1620388130942)(pink老师js869集笔记.assets/image-20200716173436096.png)]
案例选中的高亮显示其他变暗
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vBRgt4St-1620388130943)(pink老师js869集笔记.assets/image-20200716173446338.png)]
自定义动画
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jNVJIqtJ-1620388130943)(pink老师js869集笔记.assets/image-20200716173455446.png)]
注意第一个参数必须是对象的格式
案例手风琴
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OM2ktVPP-1620388130944)(pink老师js869集笔记.assets/image-20200716173536853.png)]
8.13 JQ属性操作
获取属性值 element.prop(“属性名”) 获取的只能是固有的属性值;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oruW3jZo-1620388130944)(pink老师js869集笔记.assets/image-20200716173546660.png)]
设置属性值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xmWgmLyy-1620388130945)(pink老师js869集笔记.assets/image-20200716173602521.png)]
前面的prop方法只能是设置固有的属性不能设置自定义的属性
自定义的属性 获取和修改
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yar8wVkO-1620388130945)(pink老师js869集笔记.assets/image-20200716173616315.png)]
案例购物车全选案例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-whxCatiw-1620388130946)(pink老师js869集笔记.assets/image-20200716173628415.png)]
选择器 checked 检查有几个按钮被选中了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WvGgrROz-1620388130946)(pink老师js869集笔记.assets/image-20200716173654553.png)]
8.14 JQ内容文本值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YLl0QDUA-1620388130947)(pink老师js869集笔记.assets/image-20200716173729135.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q7iJttVt-1620388130948)(pink老师js869集笔记.assets/image-20200716173739635.png)]
案例加减商品数量案例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0nmyB14a-1620388130948)(pink老师js869集笔记.assets/image-20200716173759065.png)]
修改商品的小计
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s1gLazp3-1620388130949)(pink老师js869集笔记.assets/image-20200716173819143.png)]
加号模块
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2i4lCH1m-1620388130950)(pink老师js869集笔记.assets/image-20200716173828339.png)]
减号模块
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p25fIVe7-1620388130951)(pink老师js869集笔记.assets/image-20200716173843201.png)]
parents(“选择器”) 可以返回指定的祖先元素
toFixed(数字)保留几位小数的操作
8.15 遍历元素 each()
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vlIB24w7-1620388130951)(pink老师js869集笔记.assets/image-20200716173918690.png)]
第二个参数 是DOM对象一定要转化为jq对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f4wpskoo-1620388130952)(pink老师js869集笔记.assets/image-20200716173936745.png)]
案例购物车
结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0nAzDzEF-1620388130953)(pink老师js869集笔记.assets/image-20200716173952221.png)]
代码
$(function() {// 1. 全选 全不选功能模块// 就是把全选按钮checkall的状态赋值给 三个小的按钮j-checkbox就可以了// 事件可以使用change$(.checkall).change(function() {// console.log($(this).prop(checked));$(.j-checkbox, .checkall).prop(checked, $(this).prop(checked));if ($(this).prop(checked)) {// 让所有的商品添加 check-cart-item 类名$(.cart-item).addClass(check-cart-item);} else {// check-cart-item 移除$(.cart-item).removeClass(check-cart-item);}});// 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上否则全选按钮不选。$(.j-checkbox).change(function() {// if(被选中的小的复选框的个数 3) {// 就要选中全选按钮// } else {// 不要选中全选按钮// }// console.log($(.j-checkbox:checked).length);// $(.j-checkbox).length 这个是所有的小复选框的个数if ($(.j-checkbox:checked).length $(.j-checkbox).length) {$(.checkall).prop(checked, true);} else {$(.checkall).prop(checked, false);}if ($(this).prop(checked)) {// 让当前的商品添加 check-cart-item 类名$(this).parents(.cart-item).addClass(check-cart-item);} else {// check-cart-item 移除$(this).parents(.cart-item).removeClass(check-cart-item);}});// 3. 增减商品数量模块 首先声明一个变量当我们点击号increment就让这个值然后赋值给文本框。$(.increment).click(function() {// 得到当前兄弟文本框的值var n $(this).siblings(.itxt).val();// console.log(n);n;$(this).siblings(.itxt).val(n);// 3. 计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计// 当前商品的价格 p var p $(this).parents(.p-num).siblings(.p-price).html();// console.log(p);p p.substr(1);console.log(p);var price (p * n).toFixed(2);// 小计模块 // toFixed(2) 可以让我们保留2位小数$(this).parents(.p-num).siblings(.p-sum).html( price);getSum();});$(.decrement).click(function() {// 得到当前兄弟文本框的值var n $(this).siblings(.itxt).val();if (n 1) {return false;}// console.log(n);n--;$(this).siblings(.itxt).val(n);// var p $(this).parent().parent().siblings(.p-price).html();// parents(.p-num) 返回指定的祖先元素var p $(this).parents(.p-num).siblings(.p-price).html();// console.log(p);p p.substr(1);console.log(p);// 小计模块 $(this).parents(.p-num).siblings(.p-sum).html( (p * n).toFixed(2));getSum();});// 4. 用户修改文本框的值 计算 小计模块 $(.itxt).change(function() {// 先得到文本框的里面的值 乘以 当前商品的单价 var n $(this).val();// 当前商品的单价var p $(this).parents(.p-num).siblings(.p-price).html();// console.log(p);p p.substr(1);$(this).parents(.p-num).siblings(.p-sum).html( (p * n).toFixed(2));getSum();});// 5. 计算总计和总额模块getSum();function getSum() {var count 0; // 计算总件数 var money 0; // 计算总价钱$(.itxt).each(function(i, ele) {count parseInt($(ele).val());});$(.amount-sum em).text(count);$(.p-sum).each(function(i, ele) {money parseFloat($(ele).text().substr(1));});$(.price-sum em).text( money.toFixed(2));}// 6. 删除商品模块// (1) 商品后面的删除按钮$(.p-action a).click(function() {// 删除的是当前的商品 $(this).parents(.cart-item).remove();getSum();});// (2) 删除选中的商品$(.remove-batch).click(function() {// 删除的是小的复选框选中的商品$(.j-checkbox:checked).parents(.cart-item).remove();getSum();});// (3) 清空购物车 删除全部商品$(.clear-all).click(function() {$(.cart-item).remove();getSum();})
})8.16 创建元素 添加元素 删除元素
创建元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ttE3fToj-1620388130953)(pink老师js869集笔记.assets/image-20200716174007517.png)]
添加元素
内部添加
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qrc1emlH-1620388130954)(pink老师js869集笔记.assets/image-20200716174018394.png)]
外部添加
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mq3UPUjh-1620388130954)(pink老师js869集笔记.assets/image-20200716174028920.png)]
删除元素 empty remove
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NcTvLYoy-1620388130955)(pink老师js869集笔记.assets/image-20200716174038894.png)]
8.17 事件注册 解绑事件
1、单个事件注册
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ae9mVhvQ-1620388130956)(pink老师js869集笔记.assets/image-20200716174049035.png)]
2、用on方法在匹配元素上绑定一个或多个事件的事件处理函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nPCqTu8x-1620388130956)(pink老师js869集笔记.assets/image-20200716174133611.png)] $(div).on({mouseenter: function () {$(this).css(background, red);},click: function () {$(this).css(background, green);}})
on方法的优点
1、可以绑定多个事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pfmfE5Vb-1620388130957)(pink老师js869集笔记.assets/image-20200716174153338.png)]
2、on可以实现事件委托
$(在页面中本来就存在的父元素).on(什么事件绑定给谁function{})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8320JYB0-1620388130958)(pink老师js869集笔记.assets/image-20200716174208205.png)]
3、动态创建的元素click()没有办法绑定事件on()可以给动态生成的元素绑定事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wjoO5SQZ-1620388130958)(pink老师js869集笔记.assets/image-20200716174219122.png)]
案例微博发布
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zgo9xvcR-1620388130959)(pink老师js869集笔记.assets/image-20200716174229225.png)]
解绑事件
off() 解除绑定的所有事件
off(“click”) 解除绑定的click
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y0pmQtxa-1620388130960)(pink老师js869集笔记.assets/image-20200716174246003.png)]
8.18 自动触发事件 trigger()
三种方式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mseuUj31-1620388130960)(pink老师js869集笔记.assets/image-20200716174302660.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q92eKndl-1620388130961)(pink老师js869集笔记.assets/image-20200716174316947.png)]
第三种方法 不会触发默认行为
8.19 JQ事件对象
阻止默认行为 阻止冒泡
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lBE3DkfA-1620388130962)(pink老师js869集笔记.assets/image-20200716174328291.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pi8SG5PS-1620388130962)(pink老师js869集笔记.assets/image-20200716174350337.png)]
8.20 JQ拷贝对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ocdPr2lZ-1620388130963)(pink老师js869集笔记.assets/image-20200716174403375.png)]
会覆盖以前的数据
浅拷贝 是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象修改目标对象会影响被拷贝对象
深拷贝 是完全拷贝 如果里面有不冲突的属性 则会合并到一起
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PumGwf0R-1620388130964)(pink老师js869集笔记.assets/image-20200716174414618.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-24psl6Le-1620388130964)(pink老师js869集笔记.assets/image-20200716174424878.png)]
8.21 JQ多库共存
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ggvREfi2-1620388130965)(pink老师js869集笔记.assets/image-20200716174434453.png)]
把$修改为了suibian
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vMh0Z2Z2-1620388130966)(pink老师js869集笔记.assets/image-20200716174446108.png)]
8.22 JQ插件
地址
1.JQ插件库http://www.jq22.com/
2.JQ之家http://www.htmleaf.com/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gPlobFd0-1620388130966)(pink老师js869集笔记.assets/image-20200716174458542.png)]
图片的懒加载
懒加载用第一个插件库的 EasyLazyload.js
引入懒加载 必须要在body最下面 然后调用懒加载
全屏滚动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UuiskeJl-1620388130967)(pink老师js869集笔记.assets/image-20200716174510965.png)]
bootstrap插件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6AjEdzQa-1620388130968)(pink老师js869集笔记.assets/image-20200716174522287.png)]
要引入bootstrap的css bootstrap的js 和jq的js 才算成功
8.23 JQ尺寸位置操作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nmr8OjoF-1620388130969)(pink老师js869集笔记.assets/image-20200716174533896.png)]
Width 里面跟参数 则是修改宽度
以上参数如果是空 则是获取相应值返回的是数字型
如果参数为数字则是修改相应值
参数可以必须写单位
jq位置
1、获取设置距离文档 的位置偏移offset 跟父盒子没有任何关系
$(“div”).offset() 这样返回的是一个对象 加上.top返回的是距离顶部的元素
$(div).offset({top:200,left:200});这样是修改盒子的位置
8.23.1 offset() 设置或获取元素偏移 position() 页面滚动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RA3pKgMJ-1620388130969)(pink老师js869集笔记.assets/image-20200716174608052.png)]
2。position()
1、这个方法只能获取不能设置
2、获取距离带有定位父级位置偏移
3、返回的也是一个对象
3、页面滚动事件
$(window).scroll
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xEL2GWP6-1620388130970)(pink老师js869集笔记.assets/image-20200716174704104.png)]
scrolltop 这个设置参数表示页面卷去多少
案例带有动画返回顶部
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dLh529ga-1620388130971)(pink老师js869集笔记.assets/image-20200716174813913.png)]
案例电梯导航
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjQuery-min.js/scriptstyle.ce {position: fixed;top: 100px;left: 20px;}.w {width: 1200px;margin: 0 auto;}.one,.two,.three,.four,.five {height: 600px;color: #ffffff;}.one {background-color: black;}.two {background-color: red;}.three {background-color: yellow;}.four {background-color: green;}.five {background-color: skyblue;}/style
/headbodydiv classcediv家用电器/divdiv手机通讯/divdiv第三个/divdiv第四个/divdiv第五个/div/divdiv classfloordiv classw one家用电器/divdiv classw two手机通讯/divdiv classw three第三个/divdiv classw four第四个/divdiv classw five第五个/div/divscript$(.ce div).click(function () {console.log($(this).index());var current $(.floor .w).eq($(this).index()).offset().top// 选出对应索引号的内容区的盒子 计算它的offset().top$(body,html).stop().animate({scrollTop: current})})// 注意/*如果电梯导航栏 采用了到达某个位置显示的效果则需要1、把内容包装成一个函数在页面加载的时候就要调用电梯导航栏如果某个被点击则需要做出相应的变化则需要这样$(this).addClass(某个类).siblings().removeClass()当我们滚动内容。电梯导航也做出相应的变化这个要写在页面滚动模块里面$(window).scroll(function(){$(.floor .w).each(function(i,ele){if($(document).scrollTop()$(ele).offset().top){添加类删除类}})})*//script
/body/html
pink老师的
$(function() {// 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current// 节流阀 互斥锁 var flag true;// 1.显示隐藏电梯导航var toolTop $(.recommend).offset().top;//recommed是内容的最开始的部分toggleTool();// 这是侧边栏 就是 导航栏 function toggleTool() {if ($(document).scrollTop() toolTop) {$(.fixedtool).fadeIn();} else {$(.fixedtool).fadeOut();};}$(window).scroll(function() {toggleTool();// 3. 页面滚动到某个内容区域左侧电梯导航小li相应添加和删除current类名if (flag) {$(.floor .w).each(function(i, ele) {if ($(document).scrollTop() $(ele).offset().top) {console.log(i);$(.fixedtool li).eq(i).addClass(current).siblings().removeClass();}})}});// 2. 点击电梯导航页面可以滚动到相应内容区域$(.fixedtool li).click(function() {flag false;console.log($(this).index());// 当我们每次点击小li 就需要计算出页面要去往的位置 // 选出对应索引号的内容区的盒子 计算它的.offset().topvar current $(.floor .w).eq($(this).index()).offset().top;// 页面动画滚动效果$(body, html).stop().animate({scrollTop: current}, function() {flag true;});// 点击之后让当前的小li 添加current 类名 姐妹移除current类名$(this).addClass(current).siblings().removeClass();})
})[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QWcginuz-1620388130971)(pink老师js869集笔记.assets/image-20200716174832888.png)]
JavaScript面向对象
1.1 含义
两大编程思想
1、面向过程
2、面向对象
面向过程编程 POPProcess-oriented programming
面向过程就是分析出解决问题所需要的步骤然后用函数把这些步骤一步一步的实现使用的时候再一个一个的依次调用就可以了
举个例子 把大象放进冰箱
1、打开冰箱门 2、把大象装进去 3、关上门
面向对象编程 OOP
面向对象是把事物分解成一个个对象然后由对象之间分工与合作
举个例子 将大象装进冰箱面向对象做法
1、大象对象
进去
2、冰箱对象
打开
关闭
3、使用大象和冰箱的功能
面向对象特点 封装性 继承性 多态性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NAUy09XO-1620388130972)(pink老师js869集笔记.assets/image-20200716174956292.png)]
面向过程 和面向对象 对比
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8BVh14Wz-1620388130972)(pink老师js869集笔记.assets/image-20200716175005014.png)]
面向过程就像是蛋炒饭 面向对象写出来的程序就像是一份盖浇饭
面向对象更贴近我们的实际生活
ES6中的类和对象
面向对象的思维特点
1、抽取抽象对象共用的属性和行为组织封装成一个类模板
2、对类进行实例化获取类的对象
面对对象编程我们考虑的是有哪些对象按照面向对象思维特点 不断的创建对象使用对象指挥对象做事情
对象对象是一个具体的事物一本书、一辆汽车 、一个人等
Js中对象是一组无序的相关属性和方法的集合所有的事物都是对象例如字符串、数值、数组、函数等
对象是由属性和方法组成的
属性事物的特征在对象中用属性来表示常用名词
方法事物的行为在对象中用方法来表示常用动词
类class
类抽象了对象的公共部分它泛指某一大类
对象特指某一个通过实例化一个具体的的对象
1.2 创建类
创建类
语法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gntQqt3r-1620388130973)(pink老师js869集笔记.assets/image-20200716175018909.png)]
1.3 构造函数
构造函数 constructor
constructor方法是类的构造函数默认方法用于传递参数返回实例对象通过new命令生成对象实例时自动调用该方法如果没有显示定义类的内部会自动给我们创建一个 constructor
script// 1 创建类 class 创建一个明星类class Star {constructor(uname) {this.uname uname;}}// 2 利用类创建对象 newvar ldh new Star(刘德华);console.log(ldh.uname);/* 注意 1、通过class 关键字创建类类名我们还是习惯性定义首字母大写2、类里面有个constructor 函数可以接受传递过来的参数同时返回实例对象3、constructor 函数 只要new生成实例时就会自动调用这个函数如果我们不写这个函数类也会自动生成这个函数4、生成实例 new 不能省略5、最后注意语法规范创建类 类名后面不需要加小括号生成实例 类名后面加小括号构造函数不需要加function*//script
1.4 类中添加方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HOcMwESq-1620388130974)(pink老师js869集笔记.assets/image-20200716175103015.png)]
!-- 类中创建方法的要求1、我们类里面所有的函数不需要写function2、多个函数方法之间不需要添加逗号分隔--
1.5 继承 extends supers
语法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8OAkpVqn-1620388130974)(pink老师js869集笔记.assets/image-20200716175116456.png)]
super关键字super里面的参数会传给父元的构造函数里面的形参
super关键字 用于访问和调用对象父类上的函数可以调用父类的构造函数也可以调用父类的普通函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-njGopyyH-1620388130975)(pink老师js869集笔记.assets/image-20200716175212710.png)]
父类中的this终究指向的是父类的属性如果不加super 直接写this.xx this.yy 是没有用处的因为父类的sum指向的还是父类
1、继承中如果实例化子类输出一个方法先看子类有没有这个方法如果有就先执行子类的
2、继承中如果子类里面没有就去查找父类有没有这个方法如果有就执行父类的这个方法就近原则
3、super.say() 调用父类的say 方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ydu1AwmI-1620388130975)(pink老师js869集笔记.assets/image-20200716175246885.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BPhDKkFu-1620388130976)(pink老师js869集笔记.assets/image-20200716175258964.png)]
类里面的注意点
在 es6 没有变量提升类里面的共有的属性和方法一定要加this
this的指向
构造函数里面的this 指向的是 类的实例化对象类里面的方法指向的是 谁调用 指向谁
1.6 追加字符串 element.inserAdjacentHTML
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m8AhBo9D-1620388130977)(pink老师js869集笔记.assets/image-20200716175324548.png)]
Element.inserAdjacentHTML() 此方法支持追加字符串
appendChild不支持追加字符串的子元素
双击事件
双击禁止选中文字代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SVW4jExP-1620388130977)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200509133920077.png)]
文本框里面的文字处于选定状态
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zn6BrB6i-1620388130978)(pink老师js869集笔记.assets/image-20200716175335983.png)]
1.7 构造函数
构造函数
构造函数是一种特殊的函数主要用来初始化对象即为对象成员变量赋初始值它总与new一起使用。我们可以把对象中一些公共的属性和方法抽取出来然后封装盗这个函数里面
再js中使用构造函数要注意以下两点
1、构造函数用于创建某一类对象其首字母要大写
2、构造函数要和new一起使用才有意义
在构造函数中new会执行四件事情
1、在内存中创建一个新的空对象
2、让this指向这个新的对象
3、执行构造函数里面的代码给这个新对象添加属性和方法
4、返回这个新对象所以构造函数不需要return
在构造函数中 分为实例成员 和静态成员
1、实例成员就是构造函数内部通过this添加的成员 this.什么什么什么什么
实例成员只能通过实例化的对象来访问
Console.log(ldh.uname)
2、静态成员 在构造函数本身上添加的成员 sex 就是静态成员
Star.sex’男’
静态成员只能通过构造函数来访问
Star.sex
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zmpuCvGR-1620388130979)(pink老师js869集笔记.assets/image-20200716175352243.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ziGbDydF-1620388130979)(pink老师js869集笔记.assets/image-20200716175401080.png)]
1.8 原型对象
构造函数可以通过原型分配的函数是所有对象所共享的 !-- 构造函数原型 prototype构造函数通过原型分配的函数是所有对象所共享的js中规定每一个构造函数都有一个prototype属性指向另一个对象。注意这个prototype就是一个对象这个对象的所有属性和方法都会被构造函数所拥有我们可以把那些不变的方法直接定义在prototype对象上这样所有对象的实例就可以共享这些方法一般情况下我们的公共属性定义到构造函数里面公共的方法我们放到原型对象身上原型就是一个对象我们也成为prototype原型对象原型的作用共享方法--scriptfunction Star(age) {this.age age}Star.prototype.sing function () {console.log(我会唱歌);}var ddg new Star(20);var mmg new Star(20);ddg.sing();mmg.sing();/script
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v7L6V3kq-1620388130980)(pink老师js869集笔记.assets/image-20200716175419348.png)]
1.9 对象原型 !-- 对象原型 _proto_对象都会有一个属性__proto__指向构造函数的prototype原型对象之所以我们对象可以使用构造函数prototype原型对象的属性和方法就是因为对象有__proto__原型的存在1、__proto__对象原型和原型对象prototype是等价的2、__proto__对象原型的意义就在于为对象的查找机制提供了一个方法或者说一条路线但是它是一个非标准属性因此实际开发中不可以使用这个属性它只是内部指向原型对象prototype对象身上系统自动添加一个__proto__ 指向我们构造函数的原型对象查找规则先看ldh对象身上是否有sing方法如果有就执行这个对象上的sing 如果没有sing方法因为有__proto__的存在就去构造函数原型对象prototype身上去找sing这个方法--
!-- 对象原型__proto__和构造函数prototype原型对象里面都有一个属性 constructor 属性constructor我们称为构造函数因为它值的是构造函数本身constructor主要用于记录该对象引用于那个构造函数它可以让原型对象重新指向原来的构造函数很多情况下我们需要手动的利用constructor 这个属性指回原来的构造函数--scriptStar.protptype{constructor:Star,// 不加这句话 会出错误因为覆盖了sing:function(){},movie:function(){}}/script
1.10 构造函数、实例、原型对象三者之间的关系
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iDQSvdIi-1620388130980)(pink老师js869集笔记.assets/image-20200716175433192.png)]
1、Star 构造函数 通过 Star.prototype 指向Star 的原型
2、ldh new Star , ldh 里面有一个_ _ proto _ _ 指向 构造函数的原型
3、Star的原型 可以通过 Star.prototype.constructor 指回构造函数
4、ldh._ _ proto _ _.constructor 可以指回构造函数因为 _ _proto _ _ 和prototype 是等价的其实 还是通过原型的consturctor 指回的构造函数
1.11 原型链
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zq156ZV8-1620388130981)(pink老师js869集笔记.assets/image-20200716175445220.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TVzpmO70-1620388130981)(pink老师js869集笔记.assets/image-20201020132418851.png)]
1.12 查找机制
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qQ1LZd5j-1620388130982)(pink老师js869集笔记.assets/image-20200716175458283.png)] scriptfunction Star(uname, age) {this.uname uname;this.age age}Star.prototype.sing function () {console.log(我会唱歌);}var ldh new Star(刘德华, 19);// 1 在构造函数中里面this指向的对象实例 ldh// 2 原型对象函数里面大的this 指向的是 实例对象 ldh/script
1.13 扩展内置对象
可以通过原型对象对原来的内置对象进行扩展自定义的方法比如给数组增加自定义求偶数和的功能
scriptconsole.log(Array.prototype);Array.prototype.sum function () {var sum 0;for (var i 0; i this.length; i) {sum sum this[i];}return sum;}var arr [1, 2, 3];console.log(arr.sum());/script
1.13.1 call()
call
调用这个函数并且修改函数运行时的this指向
fun.call(thisArg,arg1,arg2,……)
thisArg:当前调用函数this的指向对象
arg1,arg2:传递的其他参数
scriptfunction fn(x, y) {console.log(你是谁);console.log(this);console.log(x y);}var o {name: andy};// fn();// 1.call 可以调用函数// fn.call();// 2.call 可以改变这个函数的this指向fn.call(o, 1, 2)/script
jiey哦那个父构造函数继承属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r8XIl2ti-1620388130982)(pink老师js869集笔记.assets/image-20200716175519359.png)]
子类如何继承父类的方法并且修改子构造函数的方法不会影响父
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zJYTOPwF-1620388130983)(pink老师js869集笔记.assets/image-20200716175530848.png)]
1.14 es5新增的方法
1.14.1 数组方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NWsKl0Df-1620388130983)(pink老师js869集笔记.assets/image-20200716175543254.png)]
1.14.1.1 forEach() 遍历数组
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xG7Ylnty-1620388130984)(pink老师js869集笔记.assets/image-20200716175619732.png)]
1.14.1.2 filer()筛选数组
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O3UVoJEi-1620388130985)(pink老师js869集笔记.assets/image-20200716175632029.png)]
最后输出的则是 66 88
查找数组中是否有符合条件的元素
1.14.1.3 some()
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yOqtLqRd-1620388130985)(pink老师js869集笔记.assets/image-20200716175758601.png)]
在forEach 里面 return 不会终止遍历
在some里面 遇到return true 就是终止遍历 迭代效率更高
在filter里面遇到return 也不会终止迭代
查询数组中的唯一一个元素 用some是最好的选择
案例查询商品
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}table {width: 500px;}/style
/headbodydiv classsearch按照价格查询input typetext classstart - input typetext classend buttonclasssearch-price搜索/button 按照商品名称查询input typetext classproduct buttonclasssearch-pro查询/button/divtable cellpadding0 cellspacing0 border1px solid #000theadtrthid/thth产品名称/thth价格/th/tr/theadtbody/tbody/tablescriptvar data [{id: 1,pname: 小米,price: 3999}, {id: 2,pname: oppo,price: 999}, {id: 3,pname: 荣耀,price: 1299}, {id: 4,pname: 华为,price: 1999}];// 获取相应的元素var tbody document.querySelector(tbody);// 把数据渲染到页面中setDate(data);function setDate(mydata) {tbody.innerHTML ;mydata.forEach(function (value) {var tr document.createElement(tr);tr.innerHTML td value.id /tdtd value.pname /tdtd value.price /td;tbody.appendChild(tr);})}// 3 根据价格查询商品var search_price document.querySelector(.search-price);var start document.querySelector(.start)var end document.querySelector(.end)search_price.addEventListener(click, function () {var newDate data.filter(function (value) {return value.price start.value value.price end.value})console.log(newDate);setDate(newDate);})// 按照商品名称查询// 如果查找数组中唯一的元素一般情况下用somevar product document.querySelector(.product);var search_pro document.querySelector(.search-pro);search_pro.addEventListener(click, function () {var arr [];data.some(function (value) {if (value.pname product.value) {arr.push(value);return true//必须写 true}})setDate(arr);})/script
/body/html
1.14.2 字符串方法
1.14.2.1 trim() 字符串两端删除空白字符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-grtEenOn-1620388130986)(pink老师js869集笔记.assets/image-20200716175934402.png)]
1.14.3 对象方法
1.14.3.1 Object.keys() 用于获取对象所有的属性 返回的是一个数组
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rAcOeFtk-1620388130987)(pink老师js869集笔记.assets/image-20200716175946005.png)]
1.14.3.2 给对象添加新属性或者修改原有的属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XcAMHomN-1620388130987)(pink老师js869集笔记.assets/image-20200716180005327.png)]
Prop的值是字符串形式的 要加引号 ennumerable 默认是false 则不允许遍历
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7avmPGna-1620388130988)(pink老师js869集笔记.assets/image-20200716180016142.png)]
1.15 函数进阶
1.15.1 定义函数
1、函数定义的方式
1、通过函数声明方式
2、函数表达式 匿名函数方式 Var funfunction(){}
3、利用new Function
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nXqvZjdI-1620388130988)(pink老师js869集笔记.assets/image-20200716180036270.png)]
利用new Function的时候 里面的参数、函数体必须用引号括起来
所有函数都是Function的实例对象
函数也属于对象万物皆对象
1.15.2 构造函数 原型对象 对象实例 三者关系
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EOm4KUSi-1620388130989)(pink老师js869集笔记.assets/image-20200716180047382.png)]
1.15.3 函数调用方式
script/* 函数的调用方式1、普通函数2、对象的方法3、构造函数4、绑定事件函数5、定时器函数6、立即执行函数*/// 1、普通函数function fn(){console.log(人生的顶峰);}/* 普通函数 调用方式1、 fn(); 格式函数名;2、 fn.call() 格式函数名.call()*/// 2、对象的方法var o{sayHi:function(){console.log(人生的顶峰);}}/* 对象的方法 调用方式o.sayHi() 格式对象名.方法名*/// 3、构造函数function Star(){}new Star();/* 构造函数 调用方式new 构造函数名()*/// 4、绑定事件函数btn.οnclickfunction(){}/* 绑定事件函数 调用方式点击按钮就可以调用*/// 5、定时器函数setInterval(function(){},100)//这个函数是定时器自动1秒调用一次的函数// 6、立即执行函数(function(){console.log(人生巅峰);})()// 立即执行函数 是自己自动调用/script
1.15.4 函数内的this的指向
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KwuGUjXf-1620388130990)(pink老师js869集笔记.assets/image-20200716180148304.png)]
1.15.5 修改函数的指向
1.15.5.1 call
改变函数内部this指向
1、call方法
作用
1、可以调用这个函数
2、改变函数内的this指向
3、call的主要作用是可以实现继承
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ItLTXEAk-1620388130991)(pink老师js869集笔记.assets/image-20200716180203403.png)]
1.15.5.2 apply方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FPiuMRDC-1620388130991)(pink老师js869集笔记.assets/image-20200716180408899.png)]
作用 1、调用函数 2、改变函数内部的指向 但是它的参数必须是数组形式 打印出来 是一个字符串 3、apply 的主要应用 我们可以利用apply 借助数学内置对象求最大值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CHdA0G6m-1620388130992)(pink老师js869集笔记.assets/image-20200716180424229.png)]
1.15.5.3 bind
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bQ8wlHCj-1620388130993)(pink老师js869集笔记.assets/image-20200716180434732.png)]
如果我们有的函数我们不需要立即调用但是又想改变函数的this指向常用bind方法 例如发送短信的案例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KKie6gUK-1620388130993)(pink老师js869集笔记.assets/image-20200716180445420.png)]
call apply bind 总结
总结 call apply bind
相同点都可以改变函数内部的this指向
不同点
1、call 和apply 会调用函数并且改变函数内部this指向
2、call和apply传递的参数不一样call传递参数 aru1,aru2…… 形式 apply参数必须是数组形式[arg]
3、bind不会调用函数 可以改变函数内部this的指向
主要应用场景
1、call经常做继承
2、apply经常跟数组有关系比如借助于数学对象实现数组最大值最小值
3、bind不调用函数但是还想改变this指向比如改变定时器内部的this指向
1.16 严格模式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oPrUZJ5z-1620388130994)(pink老师js869集笔记.assets/image-20200716180501861.png)]
开启严格模式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-22P7Oeow-1620388130995)(pink老师js869集笔记.assets/image-20200716180511590.png)]
严格模式中的变化
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ejd0VqvM-1620388130995)(pink老师js869集笔记.assets/image-20200716180529804.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vt9O6NrI-1620388130996)(pink老师js869集笔记.assets/image-20200716180539452.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DjsUOCor-1620388130997)(pink老师js869集笔记.assets/image-20200716180549789.png)]
1.17 高阶函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HfItht61-1620388130997)(pink老师js869集笔记.assets/image-20200716180600765.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pUu2fNHS-1620388131000)(pink老师js869集笔记.assets/image-20200716180610255.png)]
1.17.1 闭包
闭包
变量作用域
变量根据作用域的不同分为两种全局变量和局部变量
1、函数内部可以使用全局变量
2、函数外部不可以使用全局变量
3、当函数执行完毕本作用域的局部变量会销毁
闭包定义
闭包指有权访问另一个函数作用域中变量的函数
简单理解就是一个作用域可以访问另外一个函数内部的局部变量
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Dsi5HF6-1620388131001)(pink老师js869集笔记.assets/image-20200716180629101.png)]
script// 闭包的作用延伸了变量的作用范围function fn() {var num 10;function fun() {console.log(num);}// 里面的函数可以访问外面函数局部作用域的变量 内可以访外fun();}fn();// fn 就是闭包// 被访问的局部变量所在的函数就是闭包// 我们f1外面的作用域可以访问 f2内部的局部变量function f1() {var num1 20;function f2() {console.log(num1);}return f2;// 这里返回的就是一个函数}var f f1();f();// 类似于// var f function f2() {// console.log(num1);// }/script
闭包案例
ul classnavli榴莲/lili臭豆腐/lili鲱鱼罐头/lili大猪蹄子/li/ulscript// 闭包应用 点击li输出当前li的索引号// 1我们可以利用动态添加属性的方式var lis document.querySelector(.nav).querySelectorAll(li);for (var i 0; i lis.length; i) {lis[i].index i;lis[i].onclick function () {console.log(this.index);}}// 2 利用闭包的方式得到当前小li的索引号// 经典面试题// 立即执行函数格式// (function(){})(这里传递的是参数,实参);for (var i 0; i lis.length; i) {// 利用for循环 创建了4个立即执行函数(function (i) {lis[i].onclick function () {console.log(i);}})(i);// 这里的立即执行函数是个闭包// 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这个变量}/script
ul classnavli榴莲/lili臭豆腐/lili鲱鱼罐头/lili大猪蹄子/li/ulscript// 闭包应用 -3秒钟之后打印所有li元素的内容var lisdocument.querySelector(.nav).querySelectorAll(li);for(var i0;ilis.length;i){(function(i){setTimeout(function(){console.log(lis[i].innerHTML);},3000)})(i);}/script
script/* 闭包应用-计算打车价格起步价133公里内之后没多一公里增加5块钱如果有拥堵情况总价格多收取10元*/var car (function () {var start 13;//起步价var total 0;//总价return {// 正常的价格price: function (n) {if (n 3) {total start;}else {total start (n - 3) * 5}return total;},yd: function (flag) {return flag ? total 10 : total;}}})();console.log(car.price(5));console.log(car.yd(true));/script
1.17.2 递归
递归函数
定义如果一个函数再内部可以调用其本身那么这个函数就是递归函数
简单理解函数内部自己调用自己这个函数就是递归函数
递归效果的作用和循环效果一样
由于递归很容易发生“栈溢出”错误所以必须要加退出条件 return
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-has7vwx5-1620388131001)(pink老师js869集笔记.assets/image-20200716180648468.png)]
递归案例
script/* // 1 求阶乘function fn(n) {if (n 1) {return 1;}return n * fn(n - 1);}fn();// 2 求斐波那契数列function fb(n) {if (n 1 || n 2) {return 1;}return fb(n - 1) fb(n - 2);}fb(); */// 3 根据输入的id号返回数据对象var data [{id: 1,name: 家电,goods: [{id: 11,gname: 冰箱,}, {id: 12,gname: 洗衣机}]}, {id: 2,name: 服饰}];// 1 利用forEach去遍历里面的每一个对象function getID(json, id) {var o {};json.forEach(function (item) {if (item.id id) {o item;return item;}// 得到里层的数据 利用递归函数// 里面应该有goods这个数组 并且长度不等于0else if (item.goods item.goods.length 0) {o getID(item.goods, id);}})return o;}console.log(getID(data, 1));console.log(getID(data, 11));/script
1.18 浅拷贝和深拷贝
script/* 浅拷贝只是拷贝一层更深层次对象级别的只拷贝引用深拷贝拷贝多层每一级别的数据都会拷贝*/var obj {id: 1,name: andy};var o {};// }// console.log(o);// 格式Object.assign(拷贝给谁拷贝谁) 这个也是浅拷贝Object.assign(o, obj);console.log(o);/script
scriptvar obj {id: 1,name: andy,msg: {age: 18},color: [pink, red]};var o {};function deepCopy(newobj, oldobj) {for (var k in oldobj) {// 判断属性值属于那种数据类型// 获取属性值var item oldobj[k];// 判断这个值是否是数组if (item instanceof Array) {newobj[k] [];o.color [];deepCopy(newobj[k], item)}else if (item instanceof Object) {newobj[k] [];deepCopy(newobj[k], item)}else {newobj[k] item;}// 判断这个值是否是对象// 属于简单数据类型}}/script
1.19 正则表达式
正则表达式
正则表达式是用于匹配字符串中字符组合的模式。再js中正则表达式也是对象
匹配、替换、提取
1.19.1 创建正则表达式
// 创建正则表达式// 1.利用RegExp对象来创建 正则表达式var regexp new RegExp(/123/);console.log(regexp);// 2 利用里面量创建 正则表达式var rg /123/;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bqtCtZ3n-1620388131002)(pink老师js869集笔记.assets/image-20200716180722625.png)]
正则表达式特殊字符
特殊字符也成为元字符
1.19.2 边界符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mMPnxDL5-1620388131003)(pink老师js869集笔记.assets/image-20200716180731080.png)]
// 边界符 ^ $var rg /abc/; //正则表达式不需要加引号 不管是数字型还是字符型// /abc/ 只要包含abc这个字符串 返回的都是trueconsole.log(rg.test(abc));console.log(——————————————————————————);var reg /^abc/;console.log(reg.test(abc));//trueconsole.log(reg.test(abcd));//trueconsole.log(reg.test(aabcd));// falseconsole.log(——————————————————————————);var reg1 /^abc$/;// /^abc$/ 精确匹配必须是abc 才符合规范
1.19.3 字符类
var reg2 /[abc]/;// 表示只要包含a或者b或者c 都返回trueconsole.log(reg2.test(andy));//trueconsole.log(reg2.test(bady));//trueconsole.log(reg2.test(color));//trueconsole.log(reg2.test(red));//falseconsole.log(——————————————————————————);var reg3 /^[a-z]$/;// 表示26个英文字母 任何一个字母返回 trueconsole.log(reg3.test(r));//trueconsole.log(reg3.test(1));//falseconsole.log(——————————————————————————);console.log(组合形式的);var reg4 /^[a-zA-Z0-9]$///26个英文字母大小写都可以任何一个字母返回 true 还是多选一console.log(reg4.test(a));//trueconsole.log(reg4.test(b));//trueconsole.log(reg4.test(9));//trueconsole.log(reg4.test(A));//trueconsole.log(reg4.test(!));//falseconsole.log(——————————————————————————);console.log(——————————————————————————);var reg5 /^[^a-zA-Z0-9]$/// 如果中括号里面有^ 则表示取反的意思就是不能包含这些
1.19.4 量词符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YZltKFGx-1620388131003)(pink老师js869集笔记.assets/image-20200716180744137.png)]
script// * 相当于0 可以出现0次或者很多次var reg /^a*$/;console.log(reg.test());//trueconsole.log(reg.test(a));//trueconsole.log(reg.test(aaa));//trueconsole.log(号);// 相当于1 可以出现1次或者很多次var reg1 /^a$/;console.log(reg1.test());//falseconsole.log(reg1.test(a));//trueconsole.log(reg1.test(aaa));//trueconsole.log(?号);// ? 相当于 1||0var reg2 /^a$/;console.log(reg2.test());//trueconsole.log(reg2.test(a));//trueconsole.log(reg2.test(aaa));//false// {3} 重复 3次var reg3 /^a{3}$/;console.log(reg3.test());//falseconsole.log(reg3.test(a));//falseconsole.log(reg3.test(aaa));//true// {3,} 表示三次起步 大于等于3// {316} 表示大于等于3 并且 小于等于16// 量词中间不能有空格/script
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6nlhR7m6-1620388131004)(pink老师js869集笔记.assets/image-20200716180755021.png)]
1.19.5 预定义类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-du4TgPLN-1620388131004)(pink老师js869集笔记.assets/image-20200716180804277.png)]
正则表达式的 或者是一个竖线
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ES6glltn-1620388131005)(pink老师js869集笔记.assets/image-20200716180813707.png)]
手机号的正则表达式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MvdZGPeW-1620388131005)(pink老师js869集笔记.assets/image-20200716180823946.png)]
QQ号的正则表达式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9GuoSPaM-1620388131006)(pink老师js869集笔记.assets/image-20200716180832664.png)]
昵称的正则表达式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6PQ1uAnS-1620388131006)(pink老师js869集笔记.assets/image-20200716180853349.png)]
正则表达式 https://c.runoob.com/front-end/854
1.19.6 正则表达式的替换 switch 全局匹配
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9WKryoi5-1620388131007)(pink老师js869集笔记.assets/image-20200716180908805.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cfpKnyNe-1620388131007)(pink老师js869集笔记.assets/image-20200716180919324.png)]
替换铭敏感词
括号总结
大括号 量词符 里面表示重复的次数中括号 字符集合 匹配方括号中的任意字符小括号表示优先级
JavaScript ES6
1.1 ES6简介 什么是ES6 ES全称是ECMAScript它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8CxxFcie-1620388131008)(pink老师js869集笔记.assets/image-20200716180934716.png)]
ES6实际上是一个泛指泛指ES2015及后续的版本 为什么要使用ES6 每一次标准的诞生都意味着语言的完善功能的加强。JavaScript脚本本身也有一些令人不满意的地方
变量提升特性增强了程序运行时的不可预测性语法过于松散实现相同的功能不同的人可能会写出不同的代码
1.2 let let是ES6新增的用于声明变量的关键字 let声明的变量只在处于块级有效块级外边的代码访问let会出现报错在大括号中用let声明的变量才具有块级作用域var声明的变量 是不具备这个特性的let声明的变量 不存在变量提升使用let声明变量的块级作用域具有暂时性死区特性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fJdeyv8H-1620388131009)(pink老师js869集笔记.assets/image-20200716180949083.png)] scriptif (true) {let b 20;console.log(b);if (true) {let c 30;}console.log(c);// 还是报错}console.log(b);//b是块级作用变量外面强行访问只有报错// 防止循环变量成为全局变量for (let i 0; i 2; i) { }console.log(i);// 也会出现报错console.log(a);// 也会报错 不存在变量提升let a100;// 使用let关键字声明的变量具有暂时性死区特性var num10;if(true){console.log(num); // 会报错let num20;/* 运行的时候 不会直接向上一级查找num在这个块级作用域中声明了let num 变量 这个num就和这个块级作用域进行了绑定所以在声明之前使用它会出现报错*/}/script经典面试题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T2grCBcQ-1620388131009)(pink老师js869集笔记.assets/image-20200716181019070.png)]
变量 i 是全局变量函数执行输出的都是全局作用域下的 i 的值 所以结果是输出两次2
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X50nmOt9-1620388131010)(pink老师js869集笔记.assets/image-20200716181037786.png)]
经典面试图解此题的关键点在于每次循环都会产生一个块级作用域每个块级作用域中的变量都是不同的函数执行输出的是自己上一级循环产生的块级作用域作用域下 i 的值
1.3 const
作用声明常量。常量就是值内存地址不能变化的量2
用const声明的变量 是具有块级作用域的声明常量时必须赋值 否则会报错常量复制后值不能修改
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-liZ16wUq-1620388131011)(pink老师js869集笔记.assets/image-20200716181049721.png)]
注意 PI100 不行 报错
ary[0]123 可以 他没有更改内存的地址
ary【1.2】 报错
对于复杂数据类型它的内部元素的值可以更改但是你对他的内存地址更改不可以就不能给这个值重新赋值 ary[0] 只是修改数据内部的值 没有修改地址
1.4 let、const、var的区别
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-64VgNZdv-1620388131012)(pink老师js869集笔记.assets/image-20200716181133038.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qdx6gk3B-1620388131012)(pink老师js869集笔记.assets/image-20200716181141738.png)]
存储的数据不变化尽量使用const 比如数学中不更变的值
1.5 解构赋值 es6中允许从数组中提取值按照对应位置对变量赋值对象也可以实现解构 数组解构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IbVQ2TU5-1620388131014)(pink老师js869集笔记.assets/image-20200716181151857.png)]
let后面不是数组是解构 是变量的名字123是值他们是一一对应的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JEFgGY1O-1620388131015)(pink老师js869集笔记.assets/image-20200716181204396.png)]
输出的是1 2 3
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jspi4n16-1620388131016)(pink老师js869集笔记.assets/image-20200716181214738.png)]
bar 是1 foo是underfined
对象解构
等号的右边就是 从哪里获取值 左边就是你获取谁
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bI6tbl4P-1620388131017)(pink老师js869集笔记.assets/image-20200722175311810.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vJTJlrPn-1620388131018)(pink老师js869集笔记.assets/image-20200716181223951.png)]
对象解构实际上是属性匹配
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R2Cdo2q2-1620388131019)(pink老师js869集笔记.assets/image-20200716181234141.png)]
1.6 箭头函数
格式{}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HrtwGbla-1620388131019)(pink老师js869集笔记.assets/image-20200716181248226.png)]
函数体中只有一句代码且代码的执行结果就是返回值可以省略大括号如果形参只有一个可以省略小括号箭头函数不绑定this关键字箭头函数中的this指向的是函数定义位置的上下文this。即箭头函数的this指向的是箭头函数定义区域的this
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WCkF3ooB-1620388131020)(pink老师js869集笔记.assets/image-20200716181328823.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qiMB3iOb-1620388131021)(pink老师js869集笔记.assets/image-20200716181336819.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CFlbsXWw-1620388131022)(pink老师js869集笔记.assets/image-20200716181350547.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6wZz8HBl-1620388131023)(pink老师js869集笔记.assets/image-20200716181446473.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k9Ts3PGE-1620388131024)(pink老师js869集笔记.assets/image-20200716181455950.png)]
因为对象不能产生作用域实际上箭头函数在全局作用域中定义了window没有this 所以是underfined
1.7 剩余参数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w5Hlan1d-1620388131025)(pink老师js869集笔记.assets/image-20200716181518213.png)]
…表示把剩下的都接收了用数据接收
在形参前面加上三个点表示都接收过来
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8wecqiZs-1620388131026)(pink老师js869集笔记.assets/image-20200716181528338.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YotGzFlQ-1620388131026)(pink老师js869集笔记.assets/image-20200716181537328.png)]
1.8 Array 的扩展方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5sYvnYZb-1620388131027)(pink老师js869集笔记.assets/image-20200716181545936.png)]
输出结果是没有逗号的因为逗号被当成了分隔符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C70kGmf1-1620388131028)(pink老师js869集笔记.assets/image-20200716181556184.png)]
合并数组
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dFecyqa6-1620388131029)(pink老师js869集笔记.assets/image-20200716181617957.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CqsOSsFj-1620388131030)(pink老师js869集笔记.assets/image-20200716181634567.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1o3rOjqc-1620388131031)(pink老师js869集笔记.assets/image-20200716181644236.png)]
将伪数组转换为真正的数组
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RVWEWCYV-1620388131032)(pink老师js869集笔记.assets/image-20200716181654417.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LdeJdMRC-1620388131033)(pink老师js869集笔记.assets/image-20200716181702938.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G65DgQO0-1620388131034)(pink老师js869集笔记.assets/image-20200716181713696.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Elbzqa8i-1620388131034)(pink老师js869集笔记.assets/image-20200716181731770.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dKEmMrYL-1620388131035)(pink老师js869集笔记.assets/image-20200716181746951.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JQiFQIOw-1620388131036)(pink老师js869集笔记.assets/image-20200716181804440.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1dcHGhzH-1620388131036)(pink老师js869集笔记.assets/image-20200716181816873.png)]
模板字符串中可以解析变量
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fuathlBJ-1620388131037)(pink老师js869集笔记.assets/image-20200716181826684.png)]
模板字符串可以换行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hIgjoft0-1620388131037)(pink老师js869集笔记.assets/image-20200716181836453.png)]
反引号在英文状态下 连敲两下ESC下面的键即可
模板字符串可以调用函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ttGZuIv4-1620388131038)(pink老师js869集笔记.assets/image-20200716181856543.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ZNlqQin-1620388131039)(pink老师js869集笔记.assets/image-20200716181907792.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CQCkboiN-1620388131039)(pink老师js869集笔记.assets/image-20200716181922454.png)]
Set 数据结构
ES6提供了新的数据解构Set。它类似于数组但是成员的值都是i唯一的没有重复的值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aVdrHoqD-1620388131040)(pink老师js869集笔记.assets/image-20200716181933321.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ihkBzKa2-1620388131041)(pink老师js869集笔记.assets/image-20200716181947727.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-amprUWxw-1620388131041)(pink老师js869集笔记.assets/image-20200716181956301.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qw19VxT7-1620388131042)(pink老师js869集笔记.assets/image-20200716182006522.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n8IGGKmn-1620388131042)(pink老师js869集笔记.assets/image-20200716182017626.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GqBvMunq-1620388131043)(pink老师js869集笔记.assets/image-20200716182027505.png)]
数组常用方法、字符串常用方法总结
1、数组的常用方法
1.1 push 后加 返回值是新数组的长度 注意 此方法是从原始数组的最后面开始添加此方法的返回值是 新数组的长度不会生成新的数组是在原始数组上进行操作 var arr1 [1, 2, 3];var arr_1 arr1.push(4, 5, 6);console.log(数组arr为 arr1);// 数组arr为123456 注意因为此处是字符串拼接了console.log(arr_1为 arr_1);// arr_1为61.2 unshift 前加 返回值是新数组的长度 unshift方法是从原始数组的最前面开始添加内容unshift方法的返回值是 新数组的长度unshift方法不会生成新的数组是在原始数组上进行操作 // unshiftvar arr2 [unshift第一项, unshift第二项];var arr2_new arr2.unshift(unshift新添加的);console.log(数组为: arr2);//数组为:unshift新添加的,unshift第一项,unshift第二项console.log(unshift返回值为: arr2_new);//unshift返回值为:31.3 pop 后删 返回的是被删除的元素 pop方法是删除原始数组的最后一个元素pop方法的返回值是 被删除的元素 var pop_yuan [pop1, pop2];var pop_new pop_yuan.pop();console.log(原始的数组为: pop_yuan);//原始的数组为:pop1console.log(返回值为: pop_new);//返回值为:pop21.4 shift 前删 返回的是被删除的元素 shift方法是删除原始数组的第一个元素shift方法返回的是 被删除的元素 1.5 splice 删除 添加 此方法会修改原数组并且返回新的数组 splice 方法 参数 分为别添加或者删除下标的位置 删除元素的个数或者是0剩下的参数就是需要添加的元素splice 方法 第一个参数 的值 大于或者等于 数组长度时从数组的最后面开始操作如果第一个参数的值是 负数 并且这个负数加上数组长度 还是负数的时候 从数组的最前面开始操作 若加上 数组长度是正数 则从正数位置开始操作splice 方法 第二个参数 为 0 时表示 添加元素splice 方法 会修改原数组splice 方法 的返回值是 添加或者删除的元素 组成的新的数组 var splice_yuan [1, 2, 3,];var splice_fan splice_yuan.splice(1, 1);console.log(数组为: splice_yuan);// 数组为 1,3console.log(splice_fan);// 返回值被删除或者添加的元素形成的数组 [2]1.6 concat 拼接 concat 方法 返回值是一个新的数组 不会修改原始的数组 var concat_yuan1 [1, 2, 3];var concat_yuan2 [3, 4, 5];var concat_yuan3 [3, 4, 5];var concat_fan concat_yuan1.concat(concat_yuan2);console.log(concat_fan);//1,2,3,3,4,5console.log(concat_yuan1);// 1,2,3console.log(concat_yuan2);//3,4,51.7 slice() 剪切 截取 slice 方法的第一个参数是从第几个索引开始 第二个参数是截至到第几个索引 注意 包括开始索引并不包括结束的索引slice 方法 返回新的数组不改变原数组新的数组是截取的内容组成新的数组 var slice_yuan [1, 2, 3, 4, 5, 6, 7];var slice_fan slice_yuan.slice(2, 5)console.log(slice_fan);// 3,4,5console.log(slice_yuan);//1,2,3,4,5,6,71.8 jointoString 数组转换成字符串 join 方法 后面的小括号中如果什么东西都不加则返回值中会有逗号分隔如果加上 ‘’ 单引号单引号间没有空格则返回值中没有分隔符join 方法 的返回值 是一个 新的字符串原始数组并没有被改变 var join_yuan [你好, 你不好];var join_fan join_yuan.join();console.log(join_yuan);//[你好, 你不好]console.log(join_fan);//你好你不好1.9 sort 升序 、降序 sort 方法 括号里面跟一个函数如果函数里面的 return b - a 则表示降序若是 return a - b 则表示升序sort 方法 会直接会原数组进行操作sort 方法 返回值 是 完成排序后的数组 var sort_yuan [9, 20, 4, 7, 8, 1]var sort_fan sort_yuan.sort(function (a, b) {return b - a;});console.log(sort_yuan);//[20, 9, 8, 7, 4, 1]console.log(sort_fan);//[20, 9, 8, 7, 4, 1]1.10 reverse 颠倒顺序 reverse 方法 返回值 是 颠倒后的数组reverse 方法 会改变原数组 1.10 indexOf括号内写元素 返回此元素的下标 indexOf 方法 第一个参数是 想要查找的内容第二个参数是从几号索引开始查找如果数组内有相同的元素则只会查找到第一个元素并且返回第一个元素的索引值如果没有找到则返回 -1如果第二个参数 大于或者等于数组长度的时候 直接返回 -1 , 如果第二个参数的值是 负数 并且这个负数加上数组长度 还是负数的时候 则 检索整个数组 var indexof_yuan [2, 3, 3, 5, 6];console.log(indexof_yuan.indexOf(3));// 1console.log(indexof_yuan.indexOf(5));// 1console.log(indexof_yuan.indexOf(3, 3));// -1console.log(indexof_yuan);// [2, 3, 3, 5, 6]1.11 includes确认数组中是否有某个元素要么返回 true 要么 返回 false
1.12 jses5中 新增的数组常用方法
1.12.1 forEach() 遍历数组 var foreach_yuan [3, 6, 9];foreach_yuan.forEach(function (value, index, array) {console.log(数组中的每一个元素 value);console.log(数组中的每一个元素的索引 index);console.log(数组本身 array);})1.12.2 map 格式化数组 就是格式化数组跟forEach的参数一样 此方法必须有return 最终返回的是一个新的数组 不修改原数组 1.12.3 filter筛选数组 不会修改原数组返回值是一个新的数组filter 方法中遇到 是 遍历完 数组 所有 元素 才结束 var a [1, 2, 3, 4, 11]// 第一个参数为一个方法有三个参数current:当前值 index:当前值下标 array:这个数组对象var b a.filter(function (value, index, array) {return value 10})console.log(b) // [1,2,3,4]console.log(a) // [1,2,3,4,11]1.12.4 every方法 不修改原数组返回值 要么是 true 要么是 false函数内必须有 return 才可以数组中所有元素都符条件才返回 true 若有一个不符合 则返回 false var a [1,2,3,4,5]var b a.every(function(current,index,array){return current 6
})var c a.every(function(current,index,array){return current 3
})
console.log(b) // true
console.log(c) // false 1.12.5 some方法 some方法 返回值是布尔类型如果查找到符合条件的元素则返回 true 如果没有查找到符合条件的元素则返回 false如果找到第一个满足条件的元素则不再继续往下找 var a [1,2,3,4,5]var b a.some(function(current,index,array){return current 4
})var c a.some(function(current,index,array){return current 5
})
console.log(b) // true
console.log(c) // false 1.12.6 find 查找数组中符合条件的第一个元素并返回这个元素找不到则返回 underfined var a [1,2,3,4]
// b在下面需要使用则一般用find
var b a.find(function(ele,index,array){return ele 1
})var c 3
var d b c
console.log(a) // [1,2,3,4]
console.log(b) // 1
console.log(d) // 4// 若只需判断元素是否存在
// 若果是简单数组(非对象数组)则一般使用Array.includes(value)方法
// 如果为对象数组则可以使用Array.some()方法var a [1,2,3]
console.log(a.includes(1)) // truevar a [{name: xiaoming },{name: xiaohong}]console.log(a.some(function(ele){return ele.name xiaoming
})) // true
1.12.7 array.isArray() 判断一个元素是否为数组 Array.isArray([]) // true
Array.isArray({}) // false1.12.8 关于 filter some forEach 总结
在forEach 里面 return 不会终止遍历在some里面 遇到return true 就是终止遍历 迭代效率更高在filter里面遇到return 也不会终止迭代对于查找数组中唯一一个存在的元素用some效率更高
2、字符串的一些常用方法
2.1 indexOf 返回值 是 此元素在字符串中的索引号找不到返回 -1找到第一个符合元素条件的元素就返回不在继续执行 //字符串对象 根据字符串返回位置// indexOf(想要查找的字符,起始位置)var str 改革春风吹满面春天来了;console.log(str.indexOf(春));// 2console.log(str.indexOf(春, 3));// 82.2 charAtindex 根据位置返回 相应的元素 charCodeAt(index) var str1 ddgconsole.log(str1.charAt(2));// gconsole.log(str1.charCodeAt(0));// 1002.3 concat(), substr() replace() , split() // 1. concat(字符串1,字符串2)var str andyaconsole.log(str.concat(red));// andyred// 2 substr(截取的起始位置,截取几个字符)var str1 改革春风吹满地console.log(str1.substr(2, 2));//春风// 3 replace(被替换的字符,替换为的字符) 只能替换被第一次匹配到的字符console.log(str.replace(/a/g, b));//bndyb// 4 字符转换为数组 split(分隔符)var str2 red,pink,blue;console.log(str2.split(,));substr 第二个参数 是 截取的个数split 括号中加上 逗号 才能被分隔成 每一个索引中的元素 是每一格数组元素 解构赋值和箭头函数
箭头函数 箭头函数是 ES6 里面一个简写函数的语法方式 重点 箭头函数只能简写函数表达式不能简写声明式函数 function fn() {} // 不能简写
const fun function () {} // 可以简写
const obj {fn: function () {} // 可以简写
}语法 (函数的行参) { 函数体内要执行的代码 } const fn function (a, b) {console.log(a)console.log(b)
}
// 可以使用箭头函数写成
const fun (a, b) {console.log(a)console.log(b)
}const obj {fn: function (a, b) {console.log(a)console.log(b)}
}
// 可以使用箭头函数写成
const obj2 {fn: (a, b) {console.log(a)console.log(b)}
}箭头函数的特殊性 箭头函数内部没有 this的指向箭头函数的 this 是上下文的 this 也就是说箭头函数上一级的this是什么那么箭头函数里面的this也就是什么。 箭头函数中的this和函数的调用没关系和函数在哪里创建有关系 // 在箭头函数定义的位置往上数这一行是可以打印出 this 的
// 因为这里的 this 是 window
// 所以箭头函数内部的 this 就是 window
const obj {fn: function () {console.log(this)},// 这个位置是箭头函数的上一级但是不能打印出 thisfun: () {// 箭头函数内部的 this 是书写箭头函数的上一级一个可以打印出 this 的位置console.log(this)}
}obj.fn()
obj.fun()divhello/div
scriptvar div1document.querySelector(div)div1.onclick function () {console.log(this) //div对象let fn() {console.log(this)}fn() //div对象
// var fn function () {
// console.log(this)
// }
// fn() //window对象}
/script按照我们之前的 this 指向来判断两个都应该指向 obj但是 fun 因为是箭头函数所以 this 不指向 obj而是指向 fun 的外层就是 window 箭头函数内部没有 arguments 这个参数集合 const obj {fn: function () {console.log(arguments)},fun: () {console.log(arguments)}
}
obj.fn(1, 2, 3) // 会打印一个伪数组 [1, 2, 3]
obj.fun(1, 2, 3) // 会直接报错函数的行参只有一个的时候可以不写 () 其余情况必须写 const obj {fn: () {console.log(没有参数必须写小括号)},fn2: a {console.log(一个行参可以不写小括号)},fn3: (a, b) {console.log(两个或两个以上参数必须写小括号)}
}函数体只有一行代码的时候可以不写 {} 并且会自动 return const obj {fn: a {return a 10},fun: a a 10
}console.log(fn(10)) // 20
console.log(fun(10)) // 20函数传递参数的时候的默认值 我们在定义函数的时候有的时候需要一个默认值出现 就是当我不传递参数的时候使用默认值传递参数了就使用传递的参数 function fn(a) {a a || 10console.log(a)
}
fn() // 不传递参数的时候函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候函数内部的 a 就是 20在 ES6 中我们可以直接把默认值写在函数的行参位置 function fn(a 10) {console.log(a)
}
fn() // 不传递参数的时候函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候函数内部的 a 就是 20这个默认值的方式箭头函数也可以使用 const fn (a 10) {console.log(a)
}
fn() // 不传递参数的时候函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候函数内部的 a 就是 20注意 箭头函数如果你需要使用默认值的话那么一个参数的时候也需要写
解构赋值
解构赋值解析一个数据结构并赋值作用就是快速的从对象或者数组中取出成员的一个语法方式
解构对象 快速的从对象中获取成员 // ES5 的方法向得到对象中的成员
const obj {name: Jack,age: 18,gender: 男
}let name obj.name
let age obj.age
let gender obj.gender// 解构赋值的方式从对象中获取成员
const obj {name: Jack,age: 18,gender: 男
}// 前面的 {} 表示我要从 obj 这个对象中获取成员了
// name age gender 都得是 obj 中有的成员
// obj 必须是一个对象
let { name, age, gender } obj// ES5 的方法向得到对象中的成员
const obj {name: Jack,age: 18,gender: 男
}
//定义变量接收对象里面拿出来的成员
let usernameobj.name
console.log(username)// 解构赋值的方式从对象中获取成员
const obj {name: Jack,age: 18,gender: 男
}
//解构赋值的时候可以给变量起一个别名
let{name:username}obj
console.log(username)//多级解构赋值
var obj{name:Tom,age:23,info:{id:1001,class:1913}
}
//访问id属性
let{info}obj
console.log(info)
let{id}info
console.log(id)
//可以书写在一行
let{info:{id}}obj
//起别名
let {info:{id:userId}}obj
console.log(userId)解构数组 快速的从数组中获取成员 // ES5 的方式从数组中获取成员
const arr [Jack, Rose, Tom]
let a arr[0]
let b arr[1]
let c arr[2]// 使用解构赋值的方式从数组中获取成员
const arr [Jack, Rose, Tom]// 前面的 [] 表示要从 arr 这个数组中获取成员了
// a b c 分别对应这数组中的索引 0 1 2
// arr 必须是一个数组
let [a, b, c] arr//多级解构数组
let arr[1,2,[3,4]]
let[a,b,[c,d]]arr
console.log(c)
console.log(d)注意
{} 是专门解构对象使用的[] 是专门解构数组使用的不能混用
call() apply() bind()
call() 第一个参数是this的指向后面的参数是要传递的参数 scriptvar a {name: onepixel, //定义a的属性say: function () { //定义a的方法console.log(Hi,Im function a!);}};function b(name) {console.log(Post params: name);// Post params: testconsole.log(Im this.name);// Im onepixelthis.say();// Hi,Im function a!}b.call(a, test); //将b的this指向a参数是b的/scriptapply() 第一个参数是this的指向后面的参数必须是一个数组中包括你想要传递的参数 //里面有最大最小数字值的一个数组对象var numbers [5, 6, 2, 3, 7];/* 使用 Math.min/Math.max 在 apply 中应用 */var max Math.max.apply(null, numbers);// 一般情况是用 Math.max(5, 6, ..) 或者 Math.max(numbers[0], ...) 来找最大值var min Math.min.apply(null, numbers);console.log(max, min);bind() 这个方法需要调用一下并不会本身自己调用
