事件绑定
- 事件绑定：(DOM 2级事件，事件侦听，事件监听)一个元素对象上面可以绑定多个事件处理函数
- 标准浏览器：addEventListener(事件类型,事件处理函数,是否捕获)
- 事件类型：不带on
- 是否捕获：false：冒泡 true：捕获
//document.addEventListener('click',fn1,false);
// document.addEventListener('click',fn2,false);
// document.addEventListener('click',fn3,false);
- IE浏览器：attachEvent(事件类型,事件处理函数)
- 事件类型：带on
// document.attachEvent('onclick',fn1);
// document.attachEvent('onclick',fn2);
// document.attachEvent('onclick',fn3);
- 事件绑定下面IE和标准浏览器的区别
- 参数不一样，标准3个，IE 2个
- 事件类型不一样，标准不带on，IE带on
- 事件执行顺序不一样，标准顺序执行，IE反向执行
- 事件处理函数里面的this指向不一样。标准谁调用函数指向谁。IE指向window
//封装函数解决兼容问题
function addEvent(obj,etype,fn){//obj:元素对象 etype:事件类型 fn:事件处理函数
if(obj.addEventListener){//标准
obj.addEventListener(etype,fn,false);
}else{//IE
obj.attachEvent('on'+etype,fn);
}
}
- 取消事件绑定
- 注意：移除事件监听的参数和添加事件监听的参数是一致的
- removeEventListener();
- detachEvent();
- 注意：所有的DOM 0级事件(普通事件)都可以使用DOM 2级事件(事件绑定)来写，反之不行
// function removeEvent(obj, etype, fn) {//obj:元素对象 etype:事件类型 fn:事件处理函数
// if (obj.removeEventListener) {//标准
// obj.removeEventListener(etype, fn, false);
// } else {//IE
// obj.detachEvent('on' + etype, fn);
// }
// }
// addEvent(document, 'click', fn1);
// addEvent(document, 'click', fn2);
// removeEvent(document,'click',fn2);//移除事件监听
// addEvent(document, 'click', fn3);
滚轮事件
- IE和chrome：onmousewheel DOM 0级 DOM 2级
- firefox：DOMMouseScroll DOM事件只能在事件绑定中使用。 DOM 2级
正则
- 正则的作用：
- 利用正则完成表单验证
- 利用正则完成一些算法(去重,计数......)
- 创建正则的两种方式
- 构造函数创建正则对象
- var reg=new RegExp(正则规则,修饰符)
- 第一个参数就是匹配规则（字符串和变量）
- 第二个参数可选，模式修饰符
//i 表示忽略大小写
//g 表示全局匹配
//m 表示多行匹配\n
- 字面量方式直接声明（如果正则表达式中有变量则不可用此方式）
- var reg = /hello/i
- 规则不能使用变量,默认就是字符串类型，无需添加引号
- 正则的方法
- test(str)方法在字符串中查找是否存在与正则规则相符合的字符，如果存在则返回true，不存在则返回false
- 可匹配正则的字符串的方法
//var str = 'adfd22我3fdsaf78dsf7喜欢8f7hg987hgf6h76dsa5f你65df654saff';
// 使用 match 方法获取匹配内容，返回数组
// var reg=/[a-z]+/g;
// console.log(str.match(reg));
// 使用 search 来查找匹配数据，和全局没有关系，查找第一个匹配值的位置。(-1)
//console.log(str.search(/[0-9]/));//4
// 使用 replace 替换匹配到的数据,2个参数：1代表正则，2代表用来替换的字符*****
//console.log(str.replace(/[0-9]/g,'*'));
// 使用 split 拆分成字符串数组
//var str='a1b2c3d4e5f';//[a,b,c,d,e]
//console.log(str.split(/[0-9]/));
//exec()方法：和match方法一样，搜索符合规则的内容，并返回内容，格式为数组。
//用法：正则.exec(字符串)；
- 正则符号
//[0-9] == [0123456789] 表示数字
//[a-z]匹配小写字母
//[A-Z]匹配大写字母
//[A-Z0-9a-z]匹配数字字母
//[123]匹配数字123中的一个
//[^a-z0-9]:取反
//[^a-z]:非小写字母
var reg=/^1[3578]\d{9}$/g
// x{3}:匹配3个x
// x{3,5}:匹配至少3个，最多5个x
// x{3,}:匹配至少3个x
- this|where|logo 匹配this或where或logo中任意一个
//过滤敏感词
// var str='这件衣服是你妈的，还是你妹的，我猜是你大爷的';
// console.log(str.replace(/妈|妹|大爷/g,'*'));
this
- this指向
- 有一个总的原则，那就是this指的是调用函数的那个对象
- 指向当前的对象(this:自定义对象)
- 事件处理函数（this:当前点击的元素）
- 构造函数：new出来的实例对象（this就指这个new出来的新对象（实例对象））
- 改变this指向
- call(),apply(),bind() 都能够改变函数内部的this的指向
- call(),apply(),bind():第一个参数代表this指向，从第二个参数开始代表函数自身参数
call():从第二个参数开始代表函数自身参数。
apply():第二个参数是个数组，数组里面放置函数自身的参数。
bind():bind的参数和call一样的，但是bind返回的是函数体，需要再次触发。
json
- json数据：前后端交互最好的数据格式
- 它是基于 ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
- json的方法
- JSON.parse():用于从一个字符串中解析出json对象，具有json检测功能
- JSON.stringify():用于从一个对象解析出字符串
var 、 let 、 const
- var声明的变量：全局和局部(函数)
- var、let相同点：写入内存、值可以改变、同时定义多个、松散类型
- var、let区别：
- 只在let命令所在的代码块{}内有效，即let所声明的变量就“绑定”这个区域，不再受外部的影响
- Let声明的不存在变量提升(var 前置访问返回undefined--预解析)
- let不允许在相同作用域内，重复声明同一个变量
- ES6允许块级作用域的任意嵌套，外层无法读取内层作用域的变量，反之可以
- const常量：值不能被改变的（不可重复声明）.其他的特点和let一样
变量的解构赋值
- 解构：ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
- 解构的作用是可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者obj[key]等传统方式进行赋值
// let arr=[1,2,3,4,5];
// let num1=arr[0];
// let [a1,a2,a3,a4,a5]=arr;
// console.log(a1,a2,a3,a4,a5);
// let arr=[1,2,[3,4,[5,6,[7,8]]]];
// let [a,b,[c,d,[e,f,[g,h]]]]=arr;
// console.log(a,b,c,d,e,f,g,h);//1 2 3 4 5 6 7 8
// let [a,b,c]=[1,2,3,4];
// console.log(a,b,c);//1 2 3
// let [a,b,c]=[1,2];
// console.log(a,b,c);//1 2 undefined
// var a=5;
// var b=10;
// var [a,b]=[b,a];
// console.log(a,b);
// let obj={
// n1:10,
// n2:20,
// n3:30
// };
// let {n1,n2,n3}=obj;//变量名就是属性名
// console.log(n1,n2,n3);
// let {n1:a,n2:b,n3:c}=obj;//自定义变量名接受，得到值的后者(a,b,c)
// console.log(a,b,c);
// let {n2}=obj;//常见的写法
// console.log(n2);//20
// let arr=[1,2,3];
// let [a]=arr;
// console.log(1);
扩展运算符
- 扩展运算符：用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值
// let arr1=[1,2,3];
// let arr2=[4,5,6];
// let arr3=[7,8,9];
// console.log([...arr1,...arr2,...arr3]);//[1, 2, 3, 4, 5, 6, 7, 8, 9]
// console.log(Math.max(...arr1));//3
// console.log(Math.min(...arr2));//4
//let aLi=document.querySelectorAll('li');
//aLi.push(123);//aLi.push is not a function
//aLi=[...aLi];
//aLi.push(123);
//alert(aLi);
// let arr1=[1,2,3];
// let arr2=arr1;
// arr2.push(4);
// console.log(arr1);// [1, 2, 3, 4]
// console.log(arr2);// [1, 2, 3, 4]
- rest运算符：用三个点号表示，将一组值变成数组(arguments)
// function sum(...arr){//将实参的值变成数组了
// console.log(arr);
// let he=0;
// for(let i=0;i<arr.length;i++){
// he+=arr[i];
// }
// alert(he);
// }
// sum(1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10);
模板字符串
- 模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量(函数,对象...))（${}）
- 字符串扩展的方法
- repeat(n)方法返回一个新字符串，表示将原字符串重复n次
//let str='hello';
//console.log(str.repeat(10));
- includes()：返回布尔值，表示是否找到了参数字符串
//let str1='javascript';
//console.log(str1.includes('scr'));//true
//console.log(str1.includes('sor'));//false
//console.log(str1.includes('a'));//true
- startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部
let str1='javascript';
console.log(str1.startsWith('j'));
console.log(str1.startsWith('java'));
console.log(str1.startsWith('jiava'));//false
- endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部
console.log(str1.endsWith('t'));
console.log(str1.endsWith('ript'));
console.log(str1.endsWith('rpt'));//false
箭头函数
- 箭头函数最吸引人的地方是简洁
- 同时函数体内this对象，就是声明时所在的对象，而不是调用时所在的对象。This不会改变了（箭头函数的this来自父级的，无法改变）
- 函数的参数只有一个的时候，可以省略括号，其他的都要添加括号
- 函数内部return后面只有一句代码的时候可以省略花括号和return
数组和对象的扩展
- 数组的扩展
- Array.from()方法用于将对象转为真正的数组(类数组转数组)
- Array.of()方法用于将一组值，转换为数组
- fill()方法使用给定值，填充一个数组。改变原数组
- 对象的扩展
- Object.assign(目标对象，对象1，对象2...)用于对象的合并，将源对象的所有可枚举属性，复制到目标对象
Symbol
- Symbol--表示独一无二的值，它是js中的第七种数据类型。属于基本类型
- Symbol函数前不能使用new,否则会报错，原因在于symbol是一个原始类型的值，不是对象
- Symbol函数接收一个字符串作为参数，表示对symbol的描述，主要是为了在控制台显示，或者转为字符串的时候，比较容易区分，描述的内容相同仅仅表示的是描述，不代表其他的意义
- Symbol作用
- 对象的属性一定是字符串，对象的属性可以覆盖
- Symbol可以给对象设置私有属性
- 不能直接使用[symbol()]作为键值，最好添加对应的参数进行区分，而且也不能被for...in遍历出来。但可以通过Object.getOwnPropertySymbols(obj)方法获取一个对象所有的symbol属性
Generators生成器函数
// function* fname(){
// yield 'hello';
// yield 'world';
// return 'gameover';
// }
// let result=fname();//Generator函数会返回一个遍历器对象.
// console.log(result.next());//{value: "hello", done: false}
// console.log(result.next());//{value: "world", done: false}
// console.log(result.next());//{value: "gameover", done: true}
- 总结：调用 Generator函数，返回一个遍历器对象，代表 Generator函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。
iterator接口
- 遍历器（Iterator）它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口,就可以完成遍历操作
- 一个数据结构只要部署了Symbol.iterator属性，就被视为具有iterator 接口，就可以用for...of循环遍历它的成员
Set、Map
- set：ES6提供了数据结构Set. 它类似于数组，但是成员的值都是唯一的，没有重复的值
- Set本身是一个构造函数，用来生成 Set 数据结构，数组作为参数
// let s1=new Set([12,3,45,8,23,12,345,12,34]);
// console.log(s1);
// console.log(...s1);//支持扩展运算符
//数组去重
// let arr=[1,2,3,4,5,6,6,5,4,3,2,1];
// console.log([...new Set(arr)]);//[1, 2, 3, 4, 5, 6]
- map：JavaScript 的对象（Object），只能用字符串当作键。这给它的使用带来了很大的限制。ES6提供了Map数据结构。它类似于对象，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
运动
- 运动的原理
- 获取元素
- 读写元素的属性以及值
- getComputedStyle currentStyle 获取任意的css属性 单位
- offsetWidth offsetHeight 读取尺寸 没有单位
- offsetLeft offsetTop 读取位置 没有单位
- 定时器的使用基础
- setInterval setTimeout
- clearInterval clearTimeout
- 测试一个基本的运动-位置的变化
- 位置变化：定位实现的。
面向对象 VS 面相过程
- 面向过程--函数式：面向过程的思想是把一个项目、一件事情按照一定的顺序，从头到尾一步一步地做下去，先做什么，后做什么，一直到结束
- 面向对象：强调类的概念，通过类可以创建任意多个具有相同属性和方法的实例对象。面向对象的思想是把一个项目、一件事情分成更小的项目，或者说分成一个个更小的部分，每一部分负责什么方面的功能，最后再由这些部分组合而成为一个整体.
- 面型对象特点：
- 抽象:关注重点。
- 封装:函数特点相吻合
- 继承:子类继承父类，不能影响父类。
- 多态:js使用非常少
- 总结：js基于面向对象--构造函数(类)
- 面向对象的使用场景：
- 面向对象最适合复杂的场景，但是js本身没有太多复杂的场景。
- 采用面向对象的写法无非是更好的维护管理代码，因为面向对象的写法可以避免全局污染，方便程序的扩展。
- js提供的系统类(构造函数)全部采用的面向对象生成的。
本地存储
- 存
- 写入本地存储（存储时，如果key值相同，会覆盖）
- 如何查看存储的数据：控制面板-->application-->左侧找到localStorage
window.localStorage.name='zhangsan';
window.localStorage['age']=100;
window.localStorage.setItem('sex','男');//最优
let arr=['apple','banana','orange'];
localStorage.setItem('names',arr);//最优
let obj={
a:1,
b:2,
c:3
}
localStorage.setItem('objdata',obj);//最优
//存储的是'[object Object]'
- 取
// console.log(localStorage.name);
// console.log(localStorage['age']);
// console.log(localStorage.getItem('sex'));//最优
- 删
// localStorage.removeItem('names');
// localStorage.removeItem('objdata');
localStorage.clear()
- localStorage的键获取
//使用key()方法，向其中输入索引即可获取对应的键
//参数必须存在。
// console.log(localStorage.key(0));
// console.log(localStorage.key(1));
// console.log(localStorage.key(2));
// console.log(localStorage.key(3));//null
