JavaScript学习笔记（三）---事件、正则表达式、ES6、运动

  • 27.insertbefore
  • 28.滚动条及事件
  • 29.事件及事件对象
  • 30.鼠标事件对象的属性
  • 31.案例：图片随鼠标移动
  • 32.事件流
  • 33.键盘事件及键盘事件对象
    • 33.1键盘事件
    • 33.2键盘的事件对象
  • 33.事件绑定的三种方式
  • 34.事件的解绑
  • 35.事件的委托
  • 36.正则表达式
    • 36.1正则表达式的概念及作用
    • 36.2正则对象的定义
    • 36.3正则的各种符号
    • 36.4正则中相关的方法及属性
  • 37.ES6
    • 37.1 let
    • 37.2 const
    • 37.3json对象和字符串的互相转换
    • 37.4this
    • 37.5 bind
    • 37.6 for...in...和for...of...
    • 37.7 字符串扩展方法
    • 37.8箭头函数
    • 37.9 解构函数
    • 37.10 set集合
    • 37.11 map（映射）
    • 37.12ES6模板字符串
    • 37.13 ES5新增数组迭代方法
  • 38.运动
    • 38.1匀速运动
    • 38.2封装
    • 38.3往返运动
    • 38.4匀速透明运动

27.insertbefore

父节点.insertbefore(目标节点，参照节点)：将目标节点添加至参照节点之前。

28.滚动条及事件

获取滚动条高度的兼容写法

console.log(document.body.scrollTop || document.documentElement.scrollTop);

返回顶端案例：

var oBtn = document.querySelector("#btn");oBtn.onclick = function(){document.body.scrollTop = document.documentElement.scrollTop = 0;}

29.事件及事件对象

  • 事件：对某个元素的某种操作
事件元素 事件类型 [事件对象]
高楼 着火了 消防员
button 单击 事件对象

事件三要素：

  1. 事件元素：触发该事件的元素

  2. 事件类型：什么动作 单击 双击 划入 划出

  3. 事件对象：事件对象不是必须的，它携带着相关事件类型的所有属性和方法

    注意事项：有事件产生时，才会有事件对象。

事件对象的兼容写法：

var e = evt || event;

 document.onclick = function(evt){// console.log(event);// console.log(evt);// 单前四周使用事件对象时，直接照抄var e = evt || event;console.log(e);}

30.鼠标事件对象的属性

鼠标事件对象围绕三组坐标：page , client , offset

// 鼠标事件对象围绕三组坐标document.onclick = function (evt) {var e = evt || event;// page针对于页面的左顶点   常用console.log("page:" + e.pageX + "," + e.pageY);// client针对于可视窗口的左顶点  不常用console.log("client:" + e.clientX + "," + e.clientY);// offset针对于父元素的左顶点   常用于拖拽console.log("offset:" + e.offsetX + "," + e.offsetY);}

31.案例：图片随鼠标移动

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box {width: 100px;height: 100px;background-image: url(img/tiger.jpg);background-size: 100px 100px;position: absolute;left: 200px;top: 500px;}</style>
</head><body><div id="box"></div>
</body></html>
<script>var oBox = document.querySelector("div");// 事件绑定// 要搞清楚事件对象和事件元素的区别document.onmousemove = function (evt) {var e = evt || event;oBox.style.left = e.pageX - oBox.offsetWidth / 2 + "px";oBox.style.top = e.pageY - oBox.offsetHeight / 2 + "px";}</script>

32.事件流

  1. 事件流：当子元素和父元素拥有相同事件时，子元素向父元素传递或者父元素向子元素传递的过程，称为事件流。

  2. 事件的冒泡：子—>父

  3. 但并不是所有事件都会产生冒泡问题 onfocus onblur onload不会产生冒泡问题

  4. 阻止冒泡：阻止事件流的传递

    将阻止冒泡的代码添加至传播源中

    第一种：e.stopPropagation();

    第二种：e.cancelBubble = true;

    兼容写法：

    if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble = true;}

     e.stopPropagation?e.stopPropagation():e.cancelBubble = true;

  5. 阻止浏览器的默认行为

    前提：点击a标签一定会刷新页面

    <body><a href="">跳转</a>
</body>
</html>
<script>//前提:点击a标签一定会刷新页面var oA = document.querySelector("a");oA.onclick = function(evt){console.log("heihei");var e = evt || event;// 阻止浏览器的默认行为// e.preventDefault();// e.returnValue = false;// e.preventDefault?e.preventDefault():e.returnValue = false;return false;}
</script>

33.键盘事件及键盘事件对象

33.1键盘事件

键盘事件的事件元素全都是document（通常都是）：onkeyup、onkeydown、onkeypress

  • onkeyup：键盘弹起的时刻触发
  • onkeydown：键盘按下的时刻触发，缺陷单独录入功能字符（shift，ctrl）也会触发
  • onkeypress：生成一个字符时触发

33.2键盘的事件对象

  • key是键盘录入的字符

console.log(e.key);

  • 获取键盘录入的ASC码值
console.log(e.keyCode);
console.log(e.which);
console.log(e.charCode);
  • 兼容性获取ASC码值

var myKeyCode = e.keyCode || e.which || e.charCode;

console.log(myKeyCode);

  • 常见的ASC码

    97 65 48   32     13       10
a   A  0   空格   回车   ctrl+回车

  • 判断ctrl是否被按下

    console.log(e.ctrlKey);

33.事件绑定的三种方式

  1. 通过HTML元素绑定

     <button onclick="fun()">哈哈哈</button>function fun(){console.log("嘿嘿嘿");}

  2. 通过js对象绑定

    var oBtn = document.querySelector("#btn");oBtn.onclick = function(){console.log("呵呵呵");}

  3. 以上两种绑定方式都有一些缺陷：1.无法为同一元素多次绑定相同的事件；2.无法决定事件流是冒泡还是捕获

  4. 第三种事件绑定的方式：事件监听

    好处：1.可以为同一元素多次绑定相同的属性；2.可以决定事件流的传递是冒泡还是捕获

  5. 事件监听的语法：dom对象.addEventListener("去掉on的事件","回调函数","[是否捕获]"); true为捕获false为冒泡，默认不写是false

    如果捕获和冒泡同时存在时会先捕获再冒泡

34.事件的解绑

  1. js对象的解绑：目的就是将事件右值赋值为null

    // 1.js事件解绑var btn = document.querySelector("button");// 绑定btn.onclick = function () {console.log("hhh");}btn.onclick = null;

  2. 事件监听的解绑，必须要保证回调函数是同一个

    var fun = function () {console.log("heihei");}document.addEventListener('click', fun);document.removeEventListener('click', fun);

35.事件的委托

委托：你的事让别人干

事件委托：依赖于冒泡机制，将子元素触发的事件通过父元素实现

好处：1.可以批量将子元素的事件绑定通过父元素实现，提高运行效率；2.可以为未来添加的子元素提前绑定事件

  • 问题：如何获取真实操作的元素

    var target = e.target || e.srcElement;

    获取真实操作的元素的名字

    console.log(target.tagName);

36.正则表达式

36.1正则表达式的概念及作用

概念：字符串正确的规则；如：身份证格式，邮箱格式，电话号码格式---->由1开始，后面还有10为数字

作用：前后端交互的过程中，往往有大量数据效验功能，通过正则对象的本地字符串格式验证，可以大大提高前后端交互的效果，降低服务器的压力。

36.2正则对象的定义

1.构造方法

var reg = new RegExp("格式字符串",["修饰符"]);

  • test

    功能：判断目标字符串是否满足正则对象的格式，返回布尔值

    参数：test（目标字符串）

    返回值：布尔值

2.字面量

var reg = /格式字符串/修饰符;

3.通常创建正则用字面量的方式，但以下必须用构造方法

var arr = ["heihei","haha","xixi"];
var reg = new RegExp(arr[0]);

36.3正则的各种符号

  1. 格式字符串：普通字符+特殊字符

    普通字符：普通的字符，看起来是啥就是啥

    特殊字符：a.单个字符

    ​ b.组合字符

    ​ c.各种括号

  2. 正则中的特殊字符：

    单个字符：

    ^:正则开始

    $:正则结束

    .:元字符，表示任意一个字符

    \:表示转义字符 \.表示.

    +:表示其前面紧挨着的字符至少出现1次 等价{1,}

    *:表示其前面出现的字符至少出现过0次 等价{0,}

    ?:表示其前面出现的字符至少出现过0次，至多1次， 等价{0,1}

    |:表示或者(1|3|7)

    组合字符：

    \d:0-9之间的任意一个数字 \d只占一个位置

    \D:除了0-9之间的任意一个数字

    \w:数字，字母，下划线0-9 a-z A-Z _

    \W:除了\w:

    \s:空格

    \S:除了空格

    括号：

    {m,n}表示括号前面紧挨着的字符至少出现m个，至多出现n个

    {m}表示括号前面紧挨着的字符只能出现m个

    {m,}表示括号前面紧挨着的数字至少出现m个

    [] 表示括号内的任意一个字符

    [wd3h]

    [a-z]表示任意一个小写字母[a-zA-Z0-9_]

    [^ ]表示非括号内的任意一个字符

    （）一般与或连用 表示优先级

    [\u4e00 - \u9fa5 ]任意一个中文字符

  3. 密码强弱的判断

    var oInput = document.querySelector("input");var oBtn = document.querySelector("button");// 数字，字母，其他字符构成// 三者都有  强// 只有其一  弱// 除此之外  中// 至少包含var regNum = /\d+/;var regChar = /[a-zA-Z]+/;var regLettr = /[!@#$]+/;// 只能包含var _regNum = /^\d+$/;var _regChar = /^[a-zA-Z]+$/;var _regLettr = /^[!@#$]+$/;oBtn.onclick = function () {if (regNum.test(oInput.value) && regChar.test(oInput.value)&& regLettr.test(oInput.value)) {console.log("强");} else if (_regNum.test(oInput.value) || _regChar.test(oInput.value)|| _regLettr.test(oInput.value)) {console.log("弱");} else {console.log("中");}}

  4. 表单验证：

    action：提交数据的服务器文件地址

    method：数据提交的方式

    get：效率高 但安全性低 五菱宏光

    post：效率低 但安全性高 武装押运

    <script>var oInput =  document.getElementsByTagName("input");var oF = document.querySelector("form");oF.onsubmit = function(){var regId = /^\D\w{5,17}$/;var regPwd = /^.{6,}$/;if(!regId.test(oInput[0].value)){return false;}if(!regPwd.test(oInput[1].value)){return false;}}
</script>

36.4正则中相关的方法及属性

方法：

  • test

    功能：判断目标字符串是否满足正则对象的格式，返回布尔值

    参数：test(目标字符串)

    返回值：布尔值

  • exec

    功能：返回满足正则对象的子串，存放至长度为1的数组中

    参数：exec(目标字符串)

    返回值：符合正则的子串，存储在长度为1的数组

    var reg = /\d+/g;var str = "123a456b789";console.log(reg.exec(str));console.log(reg.exec(str));console.log(reg.exec(str));

修饰符：

  • g 全局
  • i 忽略大小写

正则对象作为字符串函数的参数

  • search

    功能：查找子串

    参数：search(正则对象)

    返回值：下标

    // 正则对象作为字符串函数的参数// var str = "hello world";// i  忽略大小写// console.log(str.search(/llo/i));

  • replace

     var str = "pingguo  juzi xiangjiao juzi";console.log(str.replace(/juzi/g, "橘子"));

  • match

    功能：返回满足正则对象的子串，存放至数组中

    参数：match(目标字符串)

    返回值：符合正则的子串，存放至数组中

    // matchvar reg = /\d+/g;var str = "123a345a456a";console.log(str.match(reg));

37.ES6

37.1 let

let：定义变量的关键字

特点：

  • 先定义后使用
  • 变量不能重复定义
  • 块级作用域，变量使用的范围只能是该作用域，且不会在该作用域消失
  • 暂时性死区，当内部作用域与外部作用域变量同名时，内部变量屏蔽外部变量

37.2 const

只读变量：是一个变量，但是只能读不能写

特点：

  1. 被const修饰的变量就是只读变量
  2. 被const修饰的变量必须初始化
  3. 必须先定义后使用
  4. 不能重读定义
  5. 块级作用域
  6. 暂时性死区

软性规则：被const修饰的变量名大写

面试题

var , let , const 的异同

1.都是用来声明变量的关键字

2.var定义变量具备声明提升

3.let和const必须先定义后使用，不能重复定义，块级作用域，暂时性死区

4.被const修饰的变量称为只读变量，必须初始化，习惯上变量名大写

37.3json对象和字符串的互相转换

//前提:一定时严格的JSON格式//字符串转对json对象// let str = '{"name":"fanfan","age":18}';// let json = JSON.parse(str);// console.log(json);//json对象转字符串let json = {"name":"fanfan","age":18};let str = JSON.stringify(json);console.log(str);

37.4this

this：函数体内的内置对象，作用域是函数的{ }

1.与事件体连用，触发该事件的元素

2.与普通函数连用（除了事件体和构造方法），调用该函数的对象

37.5 bind

bind：函数对象的函数

功能：改变函数的this指向

函数对象.bind(被修改的this指向)

37.6 for…in…和for…of…

  • for…in…遍历下标，常用于遍历json

     let json = {"name": "老王","age": 18,"gender": "M"}for (let k in json) {// 值console.log(json[k]);// 键console.log(k);}

  • for…of…遍历元素内容

    for(let item of 容器){

    ​ 循环体

    }

    let arr = [6, 5, 7, 4, 8, 9, 3];for (let item of arr) {// item容器里的值console.log(item);}

37.7 字符串扩展方法

在ES5中使用的是 indexOf() 方法，

在ES6中可以使用includes()、startsWith()、endsWith()三个方法

  • str.includes(参数)：返回布尔值，表示是否找到了参数字符串
  • str.startWith(参数)：返回布尔值，参数是否在源字符串的头部
  • str.endsWith(参数)：返回布尔值，参数是否在源字符串的尾部

生僻字处理方案：

[\u4e00 - \u9fa5]：19968~40869

let str = "												


											

JavaScript学习笔记（三）---事件、正则表达式、ES6、运动相关推荐
	

    
						
  1. JavaScript 学习笔记 - 挂载事件 Demo
		
    JavaScript 学习笔记 - 挂载事件 Demo 例子 addEventListener 监听事件 挂载事件的同时带上参数 dispatchEvent 触发事件 removeEventListe ...
    
		
    2. 
						
  2. Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 IhandleT
		
    Caliburn.Micro学习笔记目录 今天 说一下Caliburn.Micro的IEventAggregator和IHandle<T>分成两篇去讲这一篇写一个简单的例子 看一它的的实现 ...
    
		
    3. 
						
  3. JavaScript 学习笔记 之事件
		
    事件 事件是DOM(文档对象模型)的一部分.事件流就是事件发生顺序,这是IE和其他浏览器在事件支持上的主要差别. 一.事件流 1.冒泡型事件 IE上的解决方案就是冒泡型事件,它的基本思想是从最特定的目 ...
    
		
    4. 
						
  4. JavaScript学习笔记三——查阅MDN、日期对象
		
    目录 一.学会查阅MDN文档 1.1 MDN 1.2如何学习对象中的方法 二.Math对象 2.1math对象 2.2利用对象封装自己的数学对象 2.3随机数方法 三.日期对象 3/1.日期格式化 3 ...
    
		
    5. 
						
  5. javascript 学习笔记三 之 变量
		
    关于变量 其实也没什么知识点.需要注意的大概就是以下几点 变量命名规则 js变量必须以$,英文字母 开头. js变量基本类型 基本类型分为 1. 基本类型. 也就是数字, [未完待续,要断电了] 转载 ...
    
		
    6. 
								
  6. JavaScript 学习笔记（第三天）
		
    JavaScript 学习笔记(第三天) 一.数组 1.1.数组的基础 1.2.数据类型分类 1.3.创建数组 1.3.1.字面量创建一个数组 1.3.2.内置构造函数创建数组 1.4.数组的基本操作 ...
    
		
    7. 
						
  7. JavaScript学习笔记（五）---cookie、Proxy、服务器、PHP语言、http协议、同步异步、事件轮循机制、ajax编写、接口
		
    JavaScript学习笔记(五)---cookie.Proxy.服务器.PHP语言.http协议.同步异步.事件轮循机制.ajax编写.接口 1.cookie 1.1cookie概念 1.2cook ...
    
		
    8. 
						
  8. JavaScript学习笔记06【高级——JavaScript中的事件】
		
    w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
    
		
    9. 
						
  9. JavaScript:学习笔记(7)——VAR、LET、CONST三种变量声明的区别
		
    JavaScript:学习笔记(7)--VAR.LET.CONST三种变量声明的区别 ES2015(ES6)带来了许多闪亮的新功能,自2017年以来,许多JavaScript开发人员已经熟悉并开始使用 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 2019年最受欢迎的JVM配置参数是怎样的？
		
    2. 
						
  2. Python lambda用法及其与def的区别
		
    3. 
						
  3. leetcode算法题--学生分数的最小差值
		
    4. 
						
  4. mysql存储过程中文乱码_mysql存储过程碰到中文乱码问题
		
    5. 
						
  5. 震惊！垃圾分类居然能用Python搞定!
		
    6. 
						
  6. IoT -- (一) 物联网平台架构设计分析
		
    7. 
						
  7. 基于K60/K66/LPC的HC-SR04超声波测距(附带代码)
		
    8. 
						
  8. 其中一个页签慢_房建工程全套技术交底，720页Word版表格，各分部分项全覆盖...
		
    9. 
						
  9. java二分法查找_java 中二分法查找的应用实例
		
    10. 
						
  10. 查看Eclipse版本号，及各个版本区别
		
    11. 
						
  11. python win32api sendmessage_python win32api模拟后台鼠标点击的问题。
		
    12. 
						
  12. 度数换算_度数换算计算器
		
    13. 
						
  13. P4与5G UPF实践
		
    14. 
						
  14. 按键消抖Verilog
		
    15. 
						
  15. 基因组数据质控中：先进行SNP缺失质控还是样本缺失质控？
		
    16. 
						
  16. 关于csdn 博客图片无法加载的问题！
		
    17. 
						
  17. Flutter（Dart）基础——函数详解
		
    18. 
						
  18. 想要入行web前端要知道web前端的的基本工作职责
		
    19. 
						
  19. Ubuntu-nome下查看笔记本电池损耗情况
		
    20. 
						
  20. 汉诺塔的递归算法与解析
		
    21. 
		

	


热门文章
	

    
									
  1. jpg图片转换成pdf文件，方法步骤
			
    2. 
						
  2. [Vue warn]: Unknown custom element: ＜rules-set＞ - did you register the component correctly? For recu
			
    3. 
						
  3. 条形码录入测试软件,条码管理：商品条码录入
			
    4. 
						
  4. 微信公众号开发之流式数据读取
			
    5. 
						
  5. 设置Layui表格字段的字体颜色
			
    6. 
						
  6. 高温熔融玻璃液位检测用激光玻璃液位计
			
    7. 
						
  7. parameter缩略语_WB 术语及缩略语表
			
    8. 
						
  8. Spring 测试运行的时候提示 Unable to find a @SpringBootConfiguration 错误
			
    9. 
						
  9. 路由器老掉线的原因之一
			
    10. 
						
  10. #R语言# 生成随机数
			
    11.