前端——JavaScript

1.js编写的位置

前端——JavaScript_第1张图片

 前端——JavaScript_第2张图片

 

非布尔值的与或运算

前端——JavaScript_第3张图片

对象的属性名和属性值

前端——JavaScript_第4张图片

 前端——JavaScript_第5张图片

 基本数据类型和引用数据类型

前端——JavaScript_第6张图片

 前端——JavaScript_第7张图片

 对象字面量

前端——JavaScript_第8张图片

前端——JavaScript_第9张图片

 函数

前端——JavaScript_第10张图片

 前端——JavaScript_第11张图片

立即执行函数

前端——JavaScript_第12张图片

枚举对象中的属性 

前端——JavaScript_第13张图片

 全局作用域

前端——JavaScript_第14张图片

 函数作用域

this

前端——JavaScript_第15张图片

this情况总结:

前端——JavaScript_第16张图片 构造函数

前端——JavaScript_第17张图片

 this前端——JavaScript_第18张图片

 前端——JavaScript_第19张图片

 原型

前端——JavaScript_第20张图片

前端——JavaScript_第21张图片

 垃圾回收前端——JavaScript_第22张图片

 数组

前端——JavaScript_第23张图片

前端——JavaScript_第24张图片

前端——JavaScript_第25张图片

 前端——JavaScript_第26张图片

 数组字面量

前端——JavaScript_第27张图片

 前端——JavaScript_第28张图片

前端——JavaScript_第29张图片

 数组的几个方法

前端——JavaScript_第30张图片

前端——JavaScript_第31张图片
silce

前端——JavaScript_第32张图片

 splice

前端——JavaScript_第33张图片

 concat前端——JavaScript_第34张图片

 join

前端——JavaScript_第35张图片

 sort

前端——JavaScript_第36张图片

call和apply

前端——JavaScript_第37张图片

 argument

前端——JavaScript_第38张图片

 Date

前端——JavaScript_第39张图片

前端——JavaScript_第40张图片

前端——JavaScript_第41张图片

random

包装类

前端——JavaScript_第42张图片

前端——JavaScript_第43张图片

 正则表达式前端——JavaScript_第44张图片

前端——JavaScript_第45张图片

前端——JavaScript_第46张图片

 正则语法

前端——JavaScript_第47张图片

 前端——JavaScript_第48张图片

 前端——JavaScript_第49张图片

 前端——JavaScript_第50张图片

 前端——JavaScript_第51张图片

前端——JavaScript_第52张图片

前端——JavaScript_第53张图片

前端——JavaScript_第54张图片

前端——JavaScript_第55张图片

 前端——JavaScript_第56张图片

 前端——JavaScript_第57张图片

 邮件的正则

前端——JavaScript_第58张图片

 事件前端——JavaScript_第59张图片

文档的加载

前端——JavaScript_第60张图片

 dom查询

 前端——JavaScript_第61张图片前端——JavaScript_第62张图片

前端——JavaScript_第63张图片

前端——JavaScript_第64张图片

获取元素节点的子节点

前端——JavaScript_第65张图片

 childNodes

前端——JavaScript_第66张图片

firstChild 

前端——JavaScript_第67张图片

前端——JavaScript_第68张图片

前端——JavaScript_第69张图片

 修改value属性值

value能获取到文本框里面的内容,如果要修改就直接um.value=

前端——JavaScript_第70张图片

dom的其他查询方式

前端——JavaScript_第71张图片

前端——JavaScript_第72张图片

 dom的增删改查

 创建元素节点对象:

前端——JavaScript_第73张图片

 创建文本节点对象:

前端——JavaScript_第74张图片

 添加子节点:

前端——JavaScript_第75张图片

在指定的子节点前面插入新的子节点: 

前端——JavaScript_第76张图片

 替换子节点:

前端——JavaScript_第77张图片

  删除子节点:

前端——JavaScript_第78张图片

 添加子节点简单方式:

前端——JavaScript_第79张图片

 添加子节点两种方式结合:

前端——JavaScript_第80张图片

 点击超链接取消跳转的操作:

前端——JavaScript_第81张图片

 confirm

前端——JavaScript_第82张图片

 使用dom操作css

前端——JavaScript_第83张图片

前端——JavaScript_第84张图片

获取元素的样式

前端——JavaScript_第85张图片

前端——JavaScript_第86张图片

  获取元素样式通常做法:(将所以浏览器考虑在内)

前端——JavaScript_第87张图片

前端——JavaScript_第88张图片

其他样式的相关属性:

clientWidth,clientHeight

前端——JavaScript_第89张图片

 offsetWidth,offsetHeight

前端——JavaScript_第90张图片

 offsetParent:

前端——JavaScript_第91张图片

  scrollWidth,scrollHeight

前端——JavaScript_第92张图片

 scrollLeft,scrollTop

前端——JavaScript_第93张图片

 检查滚动条是否滚动到底:

 事件对象:

 clientX和clientY

 pageX和pageY

 事件的冒泡:  

前端——JavaScript_第94张图片

事件的委派 

例如: 

前端——JavaScript_第95张图片

前端——JavaScript_第96张图片

前端——JavaScript_第97张图片

 事件的绑定:

前端——JavaScript_第98张图片

 通过下面的方法同一个对象绑定的多个触发事件不会被覆盖前端——JavaScript_第99张图片

前端——JavaScript_第100张图片

 综合写法:前端——JavaScript_第101张图片

 事件的传播:

前端——JavaScript_第102张图片

 鼠标的滚轮:

前端——JavaScript_第103张图片

前端——JavaScript_第104张图片

前端——JavaScript_第105张图片

键盘事件:

前端——JavaScript_第106张图片

 获得当前按下的是哪个键盘:

前端——JavaScript_第107张图片

 判断两个按键同时被 按下:

前端——JavaScript_第108张图片

 BOM

前端——JavaScript_第109张图片

 Navigator:

前端——JavaScript_第110张图片

前端——JavaScript_第111张图片

 但是IE11中已将微软和IE相关的标识都去除了,所以基本上不能通过UserAgent来识别一个浏览器是否是IE了

前端——JavaScript_第112张图片

 判断浏览器类型的总体写法:

前端——JavaScript_第113张图片

 History:

前端——JavaScript_第114张图片

 前端——JavaScript_第115张图片

 Location
assign:前端——JavaScript_第116张图片

 ​​​reload:前端——JavaScript_第117张图片

 replace:前端——JavaScript_第118张图片

  定时器简介:前端——JavaScript_第119张图片

前端——JavaScript_第120张图片

 前端——JavaScript_第121张图片

关闭定时器:

前端——JavaScript_第122张图片

 延时调用:

前端——JavaScript_第123张图片

类的操作:

前端——JavaScript_第124张图片

 通过修改类,可以一行代码修改多个样式(样式被封装到类里面了)

前端——JavaScript_第125张图片

 给元素增加样式,可以通过类操作,来添加指定的属 性值

前端——JavaScript_第126张图片

 检测对象中有没有对应的class属性值:用正则表达式

前端——JavaScript_第127张图片

删除一个元素中指定的class属性

前端——JavaScript_第128张图片

切换一个类:

 前端——JavaScript_第129张图片

JSON:

前端——JavaScript_第130张图片

前端——JavaScript_第131张图片

前端——JavaScript_第132张图片

将JSON字符串转换为JS中的对象  

前端——JavaScript_第133张图片

前端——JavaScript_第134张图片

 将JS中的对象转换成JSON字符串:

前端——JavaScript_第135张图片

 eval():前端——JavaScript_第136张图片

 兼容问题:

前端——JavaScript_第137张图片

                                                                JS高级

   1.数据类型前端——JavaScript_第138张图片

2.判断数据类型

前端——JavaScript_第139张图片 3.数据类型相关问题前端——JavaScript_第140张图片

this:

前端——JavaScript_第141张图片

原型对象:

 显式原型与隐式原型:

前端——JavaScript_第142张图片

 原型链:

前端——JavaScript_第143张图片

前端——JavaScript_第144张图片

 补充知识:

函数的隐式原型对象都是function的显式原型对象

前端——JavaScript_第145张图片

前端——JavaScript_第146张图片

 原型链的属性问题:

instance:

前端——JavaScript_第147张图片

 原型链结构图:前端——JavaScript_第148张图片

原型链总结:

函数的显式原型等于空的Object实例对象

实例的隐式原型等于构造函数的显式原型

函数的隐式原型对象都是function的显式原型对象

所有函数都是function的实例

变量提升和函数提升:

前端——JavaScript_第149张图片

 注意:必须是声明的形式

前端——JavaScript_第150张图片输出 undefined

 闭包的理解:

前端——JavaScript_第151张图片前端——JavaScript_第152张图片

 闭包的作用:

前端——JavaScript_第153张图片

 闭包的生命周期:

 闭包的应用:

前端——JavaScript_第154张图片

 前端——JavaScript_第155张图片

                                           ES6

1.let变量声明以及声明特性:

特性1:变量不能重复声明

前端——JavaScript_第156张图片

 特性2:块级作用域,只能在代码块里面有效

前端——JavaScript_第157张图片

 3.不存在变量提升

4..不影响作用域链

前端——JavaScript_第158张图片

 实例:如果定义 var i 那么i的作用域是全局的,i为lenth,所以这里需要用this

            如果定义let i ,那么i的作用域是在代码块里,因此直接items[i].style.background即可

 2.const声明常量以及特点:

前端——JavaScript_第159张图片

 3.ES6变量的解构赋值

前端——JavaScript_第160张图片

 前端——JavaScript_第161张图片

 前端——JavaScript_第162张图片

 4.ES6模板字符串--引入新的声明字符串方式(反引号)                

前端——JavaScript_第163张图片

 5.简化对象写法:

前端——JavaScript_第164张图片

  6.箭头函数

前端——JavaScript_第165张图片

特性1:

前端——JavaScript_第166张图片

 特性2:

前端——JavaScript_第167张图片

 特性3:

前端——JavaScript_第168张图片

特性3:

前端——JavaScript_第169张图片 箭头函数总结:

7.函数参数的默认值设置 

前端——JavaScript_第170张图片

 8.rest参数

args是一个数组

前端——JavaScript_第171张图片

 9.扩展运算符:

前端——JavaScript_第172张图片

应用:

前端——JavaScript_第173张图片

前端——JavaScript_第174张图片

 10.symbol的介绍与简介

前端——JavaScript_第175张图片

 前端——JavaScript_第176张图片

symbol内置属性:

前端——JavaScript_第177张图片

前端——JavaScript_第178张图片前端——JavaScript_第179张图片 11.迭代器

前端——JavaScript_第180张图片

 前端——JavaScript_第181张图片

 for of 里面保存的是键值  for in里面保存的是键名

前端——JavaScript_第182张图片

 12生成器  前端——JavaScript_第183张图片

 生成器可以使用yield

前端——JavaScript_第184张图片

 生成器函数的参数传递:

1.可以进行整体函数传参:

2. next方法也可以传参,参数可以作为上一个yield的返回结果

前端——JavaScript_第185张图片

 13.promise

前端——JavaScript_第186张图片

 当调用resolve时,p的状态为成功,就会调用p.then里面的第一个回调函数前端——JavaScript_第187张图片

 当调用reject时,p的状态为失败,就会调用p.then里面的第二个回调函数

前端——JavaScript_第188张图片

 promise封装Ajax请求:

前端——JavaScript_第189张图片

 前端——JavaScript_第190张图片

 Promise对象的catch方法:

其实就是将then方法的第一个回调函数省略

前端——JavaScript_第191张图片

 promise的then方法:

前端——JavaScript_第192张图片

Set

前端——JavaScript_第193张图片

前端——JavaScript_第194张图片

实例1:数组去重

前端——JavaScript_第195张图片

 实例2:求交集

前端——JavaScript_第196张图片

 实例3:并集

 实例4:差集

 Map

前端——JavaScript_第197张图片

 前端——JavaScript_第198张图片

 前端——JavaScript_第199张图片

 Class

前端——JavaScript_第200张图片

 前端——JavaScript_第201张图片

 Class静态成员:

用static标注的属性/方法 它属于类 而不属于实例对象

 前端——JavaScript_第202张图片

 类的继承:

前端——JavaScript_第203张图片

 前端——JavaScript_第204张图片

前端——JavaScript_第205张图片 class中的get和set

 前端——JavaScript_第206张图片

 数组扩展

前端——JavaScript_第207张图片

 前端——JavaScript_第208张图片

前端——JavaScript_第209张图片

前端——JavaScript_第210张图片

 前端——JavaScript_第211张图片

 对象方法扩展:

前端——JavaScript_第212张图片

 如果重名覆盖,不重名不覆盖 前端——JavaScript_第213张图片

 前端——JavaScript_第214张图片

模块化:

前端——JavaScript_第215张图片

模块化语法:

前端——JavaScript_第216张图片

  实例:前端——JavaScript_第217张图片

 ES6模块暴露数据语法汇总:

统一暴露:

前端——JavaScript_第218张图片

默认暴露:

前端——JavaScript_第219张图片

 ES6引入模块数据语法汇总:

方法一:

 1.通用方式

前端——JavaScript_第220张图片

 2.解构赋值形式:

前端——JavaScript_第221张图片

 当引用不同的模块出现有重复名字的时候,可以使用别名来避免报错

  3.简便形式,针对默认暴露

方式二:

前端——JavaScript_第222张图片

前端——JavaScript_第223张图片

   

 

 

 

 

  

  

   

你可能感兴趣的:(前端,前端,javascript,html)