这篇博客详细记录了JavaScript的学习过程，涵盖字符串操作、Math和日期对象、BOM和DOM、DOM进阶、事件处理、正则表达式、ECMAScript 5和6的新特性、面向对象编程、运动和游戏开发、AJAX与PHP交互、JSONP跨域、网络协议与Cookie、闭包和设计模式、模块化开发、SCSS编程、GitHub常用命令等多个方面。每个主题都包含多个具体的实践案例和代码示例，是全面学习JavaScript及其相关技术的宝贵资料。
一、JavaScript
内容链接 包含笔记 tool.js 等
https://download.csdn.net/download/weixin_42530002/13086675
1、字符串
(1)、验证码
(2)、将字符串按照单词进行逆序，空格作为划分单词的唯一条件
(3)、对称数组
(4)、已知一个字符串对象中,英语单词用各种非字母字符分割，统计单词个数
(5)、判断单个字符是否是字母(包含大小写)
(6)、实现函数，查找子串出现的次数，返回字符串str中出现substring的次数
(7)、判断是否为邮箱，已知千锋邮箱的用户名只能由数字字母下划线组成，域名为@1000phone.com,
(8)、判断单个字符是否符合数字字母下划线
(9)、敏感词过滤
(10)、表单验证 验证用户名密码是否符合规范
2、math对象及日期对象
(1)、认识对象
(2)、对象的代码
(3)、Math对象
(4)、日期对象
(5)、定时器
(6)、案例 秒表
3、BOM和DOM
(1)、认识BOM
(2)、open方法
(3)、history对象
(4)、location
(5)、DOM
(6)、获取元素节点的方法
4、DOM进阶下
(1)、获取节点样式 跨浏览器的兼容
(2)、生成随机颜色
(3)、attribute
(4)、元素节点的属性
(5)、属性节点
(6)、节点操作
(7)、节点操作案例 添加删除列表
(8)、this概念
(9)、选项卡
(10)、微博发布功能
(11)、offset系列方法
(12)、文档碎片
(13)、遍历
5、event事件上
(1)、绑定事件
(2)、事件类型的种类
(3)、事件绑定
(4)、鼠标事件对象的属性
(5)、跟随鼠标提示框
(6)、修改键 特殊键 shiftKey ctrlKey altKey metakey
(7)、键码和字符码
(8)、微博发布功能
(9)、案例 方向键移动方块
(10)、目标对象target和this (事件绑定)
(11)、事件冒泡 (阻止事件冒泡)
(12)、跟随鼠标移动
(13)、判断手机号码格式
(14)、案例 模拟下拉菜单
(15)、案例 动态生成表格
(15)、案例 ctrl+回车提交
(16)、案例 只能输入数字
(17)、案例 弹出右键菜单
(18)、案例 弹出菜单
(19)、案例 隔行变色及划入隔行变色
5、event事件下
(1)、阻止右键菜单
(2)、阻止超链接的默认行为
(3)、当前窗口的高和宽
(4)、拖拽 限制出界
(5)、事件委托
(6)、微博发布拖拽
(7)、事件监听器 一个事件可触发多个函数
(8)、动态生成表格
(9)、案例 放大镜
6、正则表达式
(1)、创建正则表达式
(2)、在字符串中使用正则的方法
(3)、正则_元字符
(4)、正则补充
(5)、正则练习 验证压缩包 手机号码 身份证号码 纯中文
(6)、注册表单验证(正则)
(7)、localStorage本地存储技术
(8)、案例 滑动条slide 关闭浏览器后存储当前位置
7、ECMA5和ECMA6
(1)、认识this
(2)、强制数据类型转换 改变this指向对象
(3)、let关键字
(4)、const关键字
(5)、箭头函数
(6)、箭头和ECMA5数组方法结合 filter 箭头函数this指向的是上一层函数的主人
(7)、解构
(8)、ECMA6字符串 ``
(9)、ECMA6新增数组方法 Array.from() find() findIndex() arr.copyWithin
(10)、合并对象 Object.assign()
(11)、集合 set
(12)、集合 map
(13)、英汉词典
(14)、Symbol
8、面向对象
(1)、遍历
(2)、创建对象 (未优化)
(3)、prototype原型
(4)、混合法 创建prototype原型对象
(5)、构造函数构造出来的对象__proto__
(6)、面向对象的语法 (继承、封装、多态)
(7)、对象拷贝
(8)、ECMA6class语法
(9)、this指向问题
(10)、选项卡 面向对象
(11)、拖拽 限制拖拽 面向对象
9、运动和游戏开发上
(1)、运动基本流程
(2)、侧边浮动菜单栏
(3)、淡入淡出
(4)、缓冲运动 正反向
(5)、缓冲菜单
(6)、多物体运动 淡入淡出
(7)、offset系列问题
(8)、链式运功
(9)、回调函数 (总结)
(10)、碰撞
(11)、案例 打砖块
(12)、案例 微信打飞机
10、运动和游戏开发下
(1)、圆周运动
(2)、完美运动 多样式运动
(3)、设置多条css样式
(4)、案例 打砖块
(5)、案例 banner图效果
(6)、案例 多图片缩放
(7)、案例 抛物线运动
(8)、案例 评分特效
11、PHP和ajax入门
(1)、认识ajax
(2)、ajax下载数据 非兼容
(3)、ajax对象 兼容
(4)、try_catch
(5)、ajax对象_兼容_try
(6)、onreadystatechange
(7)、form表单的get请求
(8)、form表单的post请求
(9)、ajax get请求
(10)、ajax post请求
12、ajax进阶
(1)、mysql语法
(2)、ajax封装
(3)、JSON对象
(4)、getlist案例 html <-> php 前后端通过ajax交互下载数据
(5)、表单与ajax get post请求区别 及php读取
(6)、案例 新闻列表
(7)、服务器基础知识
(8)、php基本句法
(9)、PHP访问数据库 showStudents.php
13、前后端交互 mysql html -> (from | ajax) -> php -> mysql
(1)、插入学生数据
(2)、登录界面
(3)、注册界面
(4)、查看学生数据
(5)、获取用户列表
14、JSONP跨域
(1)、修改用户密码 mysql html -> (from | ajax) -> php -> mysql
(2)、删除用户 mysql html -> (from | ajax) -> php -> mysql
(3)、跨源方法
(4)、认识JSONP跨域
(5)、案例 天气查询
(6)、案例 百度下拉搜索框
15、网络协议和cookie
(1)、认识网络协议
(2)、认识cookie
(3)、cookie中的中文
(4)、cookie中的可选项
(5)、封装cookie
16、闭包和设计模式
(1)、认识闭包
(2)、闭包的好处
(3)、立即执行函数
(4)、私有化
(5)、闭包在实战中的使用
(6)、自定义警告框
(7)、观察者模式 闭包存储函数
(8)、适配器模式 闭包继承函数
17、gulp
(1)、补充
(2)、使用gulp的流程
(3)、gulpDemo
18、模块化开发
(1)、模块规范
(2)、款放大模式 两js文件可同时声明
(3)、shoppingDemo banner轮播图
(4)、模块化开发 Demo AMD规范
19、scss编程
(1)、声明变量
(2)、选择器嵌套 &
(3)、混合 @mixin @include
(4)、继承 @extend
(5)、import引入公共样式
(6)、scss注释
(7)、控制指令 @if @else
(8)、循环
(9)、函数 @function
(10)、scss sass -> gulp
(11)、sass和scss区别
20、github常用命令
(1)、git基本命令
(2)、git 分支管理
(3)、查看日志版本
附录、tool.js
1、n位验证码 每一个数字的范围 0~9 parseInt(Math.random() * 10);
2、n位验证码 每一个数字的范围 0~9 a-z A-Z parseInt(Math.random() * 123);
3、冒泡排序
4、array去重
5、升序
6、降序
7、显示当前时间 年月日 时分秒格式
8、日期数字转成中文 0-6 -> 日-六
9、数字前补零
10、获取两个日期之间相差的天数
11、输入n，输出n天后的时间。
12、自定义byClassName 兼容IE8以下
13、获取节点样式 跨浏览器的兼容
14、生成随机颜色
15、阻止事件冒泡
16、判断是否是数字
17、删除空白文本子节点
18、随机任意范围整数的函数
19、交换排序
20、倒着遍历元素去重
21、生成n位数字验证码
22、阻止默认行为 跨浏览器
23、限制拖拽
24、拖拽 无限制出界
25、事件监听器兼容
26、判断单个字符是否是字母(包含大小写)
27、判断单个字符是否符合数字字母下划线
28、拖拽 面向对象
29、限制拖拽 面向对象
30、多物体运动 (注释)
31、多物体运动 淡入淡出 (注释)
32、多物体多样式运动 (包含透明度) (注释)
33、链式运动 在第一个动画结束的时候，开始第二个动画。(注释)
34、完美运动
35、碰撞函数
36、设置多条css样式
37、ajax封装
38、封装cookie
一、JavaScript
1、字符串
(1)、验证码
验证码：验证你是否是机器人
纯数字组成的验证：非常容易破解 6位数字验证码
数字和字符组成的验证码：
0~9
a-z 97~122
A-Z 65~90
随机：0~122
方法：
1、生成一个数组，装有单个字符，长度62数字
随机 0~61的下标
2、随机ASCII码值
//n位验证码 每一个数字的范围 0~9 parseInt(Math.random() * 10);
numTestCode(n)
//n位验证码 每一个数字的范围 0~9 a-z A-Z parseInt(Math.random() * 123);
testCode(n);
(2)、将字符串按照单词进行逆序，空格作为划分单词的唯一条件
传入:”Welome to Beijing”改为 “Beijing to Welcome”
reverseStr(str)
(3)、对称数组
传入一个数组，起元素类型与个数皆未知，返回新数组，由原数组的元素正序反序拼接而成。
传入
[“One”, “Two”,”Three”]
返回
[“One”, “Two”, “Three”,”Three”,”Two”, “One”]
symmetryArr(arr)
(4)、已知一个字符串对象中,英语单词用各种非字母字符分割，统计单词个数
传入:”Yes, she*is%my@love.”;
返回 5
【规律】当前面一个字符是字母，后面一个字符是非字母的时候，这就是一个单词
countOfWord(str)
(5)、判断单个字符是否是字母(包含大小写)
isABC(charStr)
(6)、实现函数，查找子串出现的次数，返回字符串str中出现substring的次数
传入:”abcabcabc”, “abc”
返回:3
countOfStr(supStr, subStr)
(7)、已知千锋邮箱的用户名只能由数字字母下划线组成，域名为@1000phone.com,
判断一个字符串是否是千锋邮箱，是返回true，不是返回false。
mail@1000phone.com 是
$mail@1000phone.com 不是
mail@1000phone.comp 不是
isEmail(email)
(8)、判断单个字符是否符合数字字母下划线
isDEF(charStr)
(9)、敏感词过滤
采用正则表达式过滤
表单元素，获取其中内容，通过.value的属性
双标签节点 innerHTML属性，获取标签间内容，设置标签间内容，如果文本中含有标签，会自动解析。
要求：
1、敏感词都过滤 正则表达式
2、将敏感词替换成*
replace()
(10)、表单验证
验证用户名和密码是否符合规范
2、math对象及日期对象
(1)、认识对象
语法（在JavaScript中没有类这个概念，只有对象，ECMA6版新增了类的概念）
类：一类具有相同特征事物的抽象概念。
对象：具体某一个个体，唯一的实例。
类 对象
狗 你遇到的那只
电脑 你桌上那台
数据结构
基本数据类型(存储一个值) => 数组(处理批量的数据) => 对象(既可以存储数据又可以存储函数)
代码
var car = {
speed: 60,
run: function(road){
return road.length / car.speed;
}
};
var kuahaidaqiao = {
length: 1000
};
/*
数字.toFixed(n)
保留n为小数的
*/
var hours = car.run(kuahaidaqiao);
alert("一共花了" + hours.toFixed(2) + "小时");
(2)、对象的代码
1、通过new运算符声明对象
2、通过省略new
3、对象常量赋值 （使用大括号，代表对象）
var obj1 = new Object();
var obj2 = Object();
var obj3 = {};
通过obj. 或 obj[] 添加属性和方法
obj3.show();
obj3['show']();
delete 关键字 删除对象的属性或者方法
delete obj3.username; 删除属性
delete obj3.show; 删除方法
(3)、Math对象
【注】在JS中一切皆对象。
【注】在JS，很多关系数学运算的函数，直接一个Math对象提供。
【注】查阅文档。
■Math.random() //返回0-1之间的随机数
■Math.max(num1, num2) //返回较大的数
■Math.min(num1, num2) //返回较小的数
■Math.abs(num) //绝对值
■Math.round() 四舍五入(成整数，只看小数点后一位)
■Math.ceil(19.3) //向上取整
■Math.floor(11.8) //向下取整
■Math.pow(x,y) //x的y次方
■Math.sqrt(num) //开平方
传入的参数是：弧度
Math.sin() 正弦
Math.cos() 余弦
Math.PI = Π
1弧度 = 180 / Math.PI;
(4)、日期对象
1、日期对象声明
1、没有传入参数，默认当前系统时间
Wed Oct 09 2019 09:06:49 GMT+0800 (中国标准时间)
GMT 格林尼治时间
2、传入参数
"2000-01-01"
"2000/01/01"
按照顺序，分别传入参数 年 月 日 时 分 秒 毫秒
【注】在国外月份是从0开始数的 0~11
直接传入毫秒数 1秒 = 1000毫秒 （已1970年1月1日 0:0:0 为参照时间点去进行换算）
小彩蛋：linux的创始人
2、日期对象方法
【注】所有的参照时间点都是1970年
Date.parse()
格式：Date.parse(日期对象)
功能：可以将日期对象转成毫秒数
d.getTime()/d.setTime();
格式：日期对象.getTime/setTime
功能：将当前日期对象转成毫秒数
3、日期对象格式化
//2020/11/1 下午8:07:08
d.toLocaleDateString() + " " + d.toLocaleTimeString()
4、自定义当前时间 系统的并非最好的 (推荐)
tool.js中的showTime() return
5、获取两个日期之间相差的天数
规定，传入日期格式
"2000-01-01"
"2000/01/01"
tool.js countOfDate(d1, d2) return 天数
afterOfDate(n) return 日期 Tue Dec 01 2020 20:12:58 GMT+0800 (中国标准时间)
(5)、定时器
格式：var timer = setInterval(函数, 毫秒数);
功能：每隔对应的毫秒数，执行一次传入的函数。
返回值：启动定时器的，系统分配的编号。
clearInterval(timer); 取消定时器
(6)、案例 秒表
3、BOM和DOM
(1)、认识BOM
BOM： browser object model
系统对话框
window 方法 (一般情况下window可以省略)
alert() 弹出警告框
confirm() 弹出一个带确定和取消的提示框
返回值：如果点击确定，返回true
如果点击取消，返回false
prompt() 弹出一个带输入框的提示框
参数：
第一个参数：面板上显示的内容
第二个参数：输入框里面的默认（可以不传入）
返回值：点击确定，返回输入框中的内容
点击取消，返回null。
(2)、open方法
open()
第一个参数：跳转的url 打开一个新窗口，加载url
第二个参数：字符串，给打开的窗口起一个名字
第三个参数：一串特殊含义的字符串，可以控制打开窗口的属性
(3)、history对象
history 对象 window.history 掌管的是，当前窗口(注意不是浏览器)历史记录(只要加载url不一样就会产生历史记录)
属性
history.length 输出当前窗口历史记录的条数
方法
history.back() 返回上一条历史记录
history.forward() 前进到下一条历史记录
history.go()
参数： 0 刷新当前页面
正整数 前进n条记录
负整数 后退n条记录
(4)、location
location 地址栏
属性：
location.protocol
url：统一资源定位符。
协议://IP(域名)/:端口号/路径/?查询字符串#锚点
location.hostname
方法：
location.assign(url)
【注】在当前窗口跳转带这个url
location.replace(url)
【注】在当前窗口替换成新的url。不会产生历史记录。
location.reload()
【注】刷新窗前窗口
location.reload(true) 不经过浏览器缓存强制从服务器重载
(5)、DOM
DOM： document object model(文档对象模型)
节点类型：
元素节点 <div></div>
属性节点 id = 'div1'
文本节点 div文本
元素节点的获取
document.getElementById(id)
功能：通过id获取符合条件的元素，（id必须是唯一的）
返回值：就是符合条件的一个节点。
获取行间属性的值
alert(oDiv.id);
alert(oDiv.title);
//访问class 通过className访问
alert(oDiv.className);
//设置行间属性的值
/* oDiv.id = "div2";
oDiv.title = 'world';
oDiv.className = 'box4'; */
/*
【注】只能访问标签行间的css样式。
*/
alert(oDiv.style.width);
alert(oDiv.style.height);
/*
【注】如果css样式带-，将-去掉，从第二个单词开始首字母大写
*/
// alert(oDiv.style.backgroundColor);
oDiv.style.backgroundColor = 'blue';
(6)、获取元素节点的方法
document.getElementById(id);
node.getElementsByTagName(标签名);
功能：从node节点开始，通过标签名获取符合条件的元素节点。
返回值：伪数组/类数组
node.getElementsByClassName(class名字) （IE8以下不兼容）
功能：通过class名字获取符合条件的元素节点。
document.getElementsByName(name属性的值);
功能：通过name属性的值获取符合条件的元素节点。
【注】一般使用在表单元素里。
document.querySelector()
返回值：一个元素节点，找到符合条件的第一个元素节点。
document.querySelectorAll()
返回值：返回值，是一个伪数组。
自定义byClassName （IE8以下兼容）
tool.js 中node.getElementsByClassName()
4、DOM进阶下
(1)、获取节点样式 跨浏览器的兼容
//可获得sytle中的样式
//通过.style.xxx的方式只能访问内联的css样式。
getStyle(node, cssStyle)
(2)、生成随机颜色
tool.js 中randomColor();
oDiv.style.color = randomColor();
(3)、attribute
setAttribute
getAttribute
removeAttribute()
1、class的访问
2、支持自定义属性
.不支持自定义属性
alert(oDiv.className);
alert(oDiv.getAttribute(“class”));
oDiv.setAttribute("class", 'box5');
oDiv.setAttribute("zzz", 'ooo');
oDiv.className = '';
oDiv.removeAttribute("title");
(4)、元素节点的属性
innerHTML 获取标签间内容 会解析标签
innerText 获取标签间纯文本 不会解析标签，设置纯文本
outerHTML 从外标签开始到外标签结束 会解析标签
childNodes 访问当前节点下所有的子节点
firstChild 访问子节点中的首位
lastChild 访问子节点中的最后一位
//d 属性节点
var d = document.getElementById("john").getAttributeNode("name");
childNodes 访问当前节点下所有的子节点
firstChild 访问子节点中的首位
lastChild 访问子节点中的最后一位
nextSibling 访问当前节点兄弟节点中的下一个节点
previousSibling 访问当前节点兄弟节点中的上一个节点
【注】上述这些属性都包含文本节点
【注】下述这些方法只获取子节点中的元素节点。(IE8以下不兼容)
children
firstElementChild
lastElementChild
nextElementtSibling
previousElementSibling
nodeType nodeName nodeValue
元素节点 1 标签名 null
属性节点 2 属性名 属性值
文本节点 3 #text 文本内容
空格、回车、换行 看不见，是字符。 也算文本节点
【注】获取当前节点的父节点通过parentNode获取。
【注】获取当前整个页面的根节点 document
(5)、属性节点
attributes 获取当前元素节点上的所有的属性节点
集合：
1、无序
2、不重复
alert(oDiv.attributes["title"].nodeName);
alert(oDiv.attributes["title"].nodeType);
alert(oDiv.attributes["title"].nodeValue);
(6)、节点操作
document.write()
【注】会覆盖页面上原有的内容。
createElement()
格式：document.createElement()
参数：标签名
返回值：创建好的这个节点
appendChild()
格式：node1.appendChild(node2);
功能：将node2节点插入到node1节点子节点的末尾
createTextNode()
格式：document.createTextNode(文本);
功能：创建文本节点(纯文本)
insertBefore()
格式：box1.parentNode.insertBefore(box2, box1);
功能：将box2添加到box1的前面
replaceChild()
格式：box1.parentNode.replaceChild(box2, box1);
功能：用box2节点将box1节点替换掉。
cloneNode()
格式：node.cloneNode()
格式2：node.cloneNode(true); 克隆节点本身和子节点 (整棵树)
返回值：克隆出来的新节点
removeChild()
格式：box.parentNode.removeChild(box);
功能：将box节点从页面上删除
(7)、节点操作案例 添加删除列表
(8)、this概念
this概念：只要封装函数，任何一个函数系统都会内置一个叫做this的变量，
this变量存储的是地址，是当前函数主人的地址。
【注】this永远指向当前函数的主人。函数的主人要通过当前上下文去判断。
this类似于现实生活中，用到的"我"。
(9)、选项卡
(10)、微博发布功能
(11)、offset系列方法
offsetWidth
offsetHeight
offsetLeft
offsetTop
// alert(oDiv.offsetWidth); //width + border + padding (眼睛能看到的实际的宽)
// alert(oDiv2.offsetLeft); //眼睛能看到实际距离第一个有定位的父节点的距离。
(12)、文档碎片
先创建好10W个节点，将10W节点查入到一个节点上，最后将这1个节点添加到页面上
(13)、遍历
数组：
for循环
for...in快速遍历
forEach
var arr = [10, 20, 30, 40, 50];
for(var i = 0; i < arr.length; i++){
document.write("for, " + i + ", " + arr[i] + "<br/>");
}
for(var i in arr){
document.write("forin, " + i + ", " + arr[i] + "<br/>");
}
arr.forEach(function(item, index, arr){
document.write("forEach, " + index + ", " + item + "<br/>");
});
对象：
对象遍历 for...in
5、event事件上
(1)、绑定事件
1、内联模式
2、外联模式/脚本模式(最多)
绑定事件格式：
元素节点.on + 事件类型 = 匿名函数。
click 事件类型
onclick 事件处理的函数
(2)、事件类型的种类：
一、鼠标事件（可以绑定在任意的元素节点上）
click 单击
dblclick 双击
mouseover 鼠标移入
mouseout 鼠标移出
mousemove 鼠标移动（会不停的触发）
mousedown 鼠标按下
mouseup 鼠标抬起
mouseenter 鼠标移入
mouseleave 鼠标移出
【注】经过子节点会重复触发。
mouseover
mouseout
【注】经过子节点不会重复触发。IE8以后才有。
mouseenter
mouseleave
二、键盘事件
keydown 键盘按下（如果按下不放手，会一直触发）
keyup 键盘抬起
keypress 键盘按下（只支持字符键）（如果按下不放手，会一直触发）
三、HTML事件
1、window事件
load 当页面加载完成以后会触发
unload 当页面解构的时候触发(刷新页面，关闭当前页面) IE浏览器兼容
scroll 页面滚动
resize 窗口大小发生变化的时候触发
2、表单事件 绑定表单
blur 失去焦点
focus 获取焦点
select 当我们在输入框内选中文本的时候触发
change 当我们对输入框的文本进行修改并且失去焦点的时候
【注】必须添加在form元素上
submit 当我们点击submit上的按钮才能触发
reset 当我们点击reset上的按钮才能触发
(3)、事件绑定
元素节点.on + 事件类型 = 匿名函数;
【注】系统会在事件绑定一旦完成的时候，生成一个事件对象。
【注】触发事件的时候，系统会自动去调用事件绑定的函数。将事件对象当做第一个参数传入。
oBtn.onclick = function(ev){
//事件对象获取的方式，固定写法。
var e = ev || window.event;
alert(e);
}
(4)、鼠标事件对象的属性
事件对象：
button 的属性
0 左键
1 滚轮
2 右键
获取当前鼠标位置：(原点位置不一样)
clientX clientY 原点位置：可视窗口的左上角为原点
pageX pageY 原点位置：整个页面的左上角(包含滚出去的滚动距离)
screenX screenY 原点位置：电脑屏幕的左上角
document.onmousedown = function(ev){
var e = ev || window.event;
// alert(e.button);
alert(e.clientX + ", " + e.clientY);
// alert(e.pageX + "," + e.pageY);
alert(e.screenX + ", " + e.screenY);
}
(5)、跟随鼠标提示框
(6)、修改键 特殊键 shiftKey ctrlKey altKey metakey
事件对象的四个修改键：
var e = ev || window.event;
e.shiftKey
shiftKey 如果按下shift键，值就是true，否则是false
ctrlKey
altKey
metakey （windows键 mac电脑下command键）
(7)、键码和字符码
键码:只在keydown下支持。
【注】不管是在大写字母还是小写字母的情况下，返回的统一都是大写字母的ASIIC码值。
keyCode
which
var which = e.keyCode || e.which;
字符码: 只在keypress下支持
【注】区分大小写，并且按下的时候我当前按下这个键的ASCII码值。
【注】
charCode
which
var which = e.charCode || e.which;
(8)、微博发布功能
(9)、案例 方向键移动方块
(10)、目标对象target和this (事件绑定)
target 目标对象/触发对象 事件对象的属性
【注】这个事件是由谁而起的。
IE8以下不兼容 window.event.srcElement;
var target = e.target || window.event.srcElement;
this 永远指向当前函数的主人。
(11)、事件冒泡 (阻止事件冒泡)
浏览器上事件天生的一个特点：事件流
事件冒泡：由里向外逐级触发。
事件捕获：由外向里逐级触发。
阻止事件冒泡：浏览器兼容问题
事件对象的属性和方法：
cancelBubble=true stopPropagation()
var e = ev || window.event;
tool.js 中stopBubble(e);
(12)、跟随鼠标移动
(13)、判断手机号码格式
(14)、案例 模拟下拉菜单
(15)、案例 动态生成表格
(15)、案例 ctrl+回车提交
(16)、案例 只能输入数字
(17)、案例 弹出右键菜单
document.oncontextmenu
(18)、案例 弹出菜单
(19)、案例 隔行变色及划入
最低0.47元/天 解锁文章
扫一扫
2655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
