一、运动框架
时间版运动框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;}
#box{ 200px;
height: 200px;
background: red;
/*transition: 2s;*/
}
#box:hover{ 300px;}
</style>
</head>
<body>
<div id="box">xxx</div>
<script>
var oBox=document.getElementById('box');
function animation(dom,attr,target,time) {
var speed=(target-getStyle(dom,attr))/(1000*time);
var startTime=new Date();
var startAttr=getStyle(dom,attr);
var timer=setInterval(function () {
var _time=new Date()-startTime;//获取时间差值
dom.style[attr]=startAttr+speed*_time+'px';
if (getStyle(dom,attr)>=target){//判断边界值
dom.style[attr]=target+'px';
clearInterval(timer);
}
},20);
function getStyle(dom,attr) {//获取元素的计算机属性
if (dom.currentStyle)
{return parseFloat(dom.currentStyle[attr])}
else
{return parseFloat(getComputedStyle(dom)[attr])}
}
}
animation(oBox,'width',300,2);
animation(oBox,'height',500,2);
</script>
</body>
</html>
速度版的运动框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;padding: 0;
}
#box{
200px;
height: 200px;
opacity: 0;
background: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var oBox=document.getElementById('box');
function animation(dom,attr,target,speed) {
var timer=setInterval(function () {
if (attr==='opacity'){
dom.style[attr]=getStyle(dom,attr)+speed/100
}
else{
dom.style[attr]=getStyle(dom,attr)+speed+'px'
}
if (getStyle(dom,attr)>=target){
if (attr==='opacity'){
dom.style[attr]=target
}
else{
dom.style[attr]=target+'px'
}
clearInterval(timer);
}
},30);
function getStyle(dom,attr) {
return dom.currentStyle?parseFloat(dom.currentStyle[attr]):parseFloat(getComputedStyle(dom,null)[attr]);
}
}
animation(oBox,'opacity',1,1);
</script>
</body>
</html>
二、事件
事件监听
dom.addEvenListener(事件字符串，事件处理函数，false/true)
//1.第三个参数默认是false
//2.事件处理函数中的this是dom自身
事件绑定：只能给一个元素绑定一个事件处理函数
事件监听：可以给一个元素绑定多个（不同）事件处理函数
什么是事件处理模型
- 当一个dom节点触发事件后，该事件会按照HTML结构在根节点和这个元素节点之间传播，路径上所有节点都会收到该事件
- 事件冒泡（默认）：事件从dom节点开始传递到document，即从下到上
dom.addEvenListener(事件字符串，事件处理函数，false)
- 事件捕获：事件从document开始传递到dom节点，即从上到下
dom.addEvenListener(事件字符串，事件处理函数，true)
- 一个dom在触发同一个事件时不同事件处理函数的触发顺序是先捕获，后冒泡
事件对象上储存的常用信息
e.clientX/e.clientY//鼠标距离浏览器左上角的水平/竖直距离
e.pageX/e.pageY//鼠标距离页面左上角的水平/竖直距离
e.offsetX/e.offsetY//鼠标距离触发事件的元素左上角的水平/竖直距离
e.layerX/e.layerY//鼠标距离定位元素左上角的水平/竖直距离
e.screenX/e.screenY//鼠标距离计算机屏幕左上角的水平/竖直距离
e.traget//源事件
事件委托
利用事件冒泡的原理把子级的事件委托给先祖元素
优点：1.不需要循环绑定每一个子元素，可以节约浏览器性能
2.添加新的子元素时，不需要再给新元素绑定事件
三、BOM
BOM：Broswer Object Model
- BOM和DOM类似也是一个编程接口，这个编程接口让JavaScript有能力与浏览器对话
- 和DOM不同的是，DOM的核心是document，而BOM的核心是window
- 在全局环境中的变量&&函数声明自动成为window的属性和值
Location:浏览器地址栏信息
location.href//地址栏中完整的url
location.pathname//地址栏的路径
location.hash//地址栏#后面的字符串
location.search//地址栏？后面的字符串
location.protocol//地址栏的协议
location.port//地址栏的端口号
location.hostanme//地址栏的主机名
location.host//地址栏的主机名+端口号
history：某窗口的历史页面
history.length//历史页面个数
history.back()//跳转到前一个页面
history.forward()//跳转到后一个页面
history.go(参数)//基于当前页面向前跳转多少个页面，参数为数字，可正可负
window对象的方法
alert()//弹出一个窗口，无返回值
confirm()//弹出一个窗口的同时，增加了两个选择按钮，返回值为布尔值
prompt()//在confirm的基础上，增加了输出框供用户输出内容，返回值为用户输出的内容
open('新页面','打开方式')//例如：open('//www.baidu.com','_blank')
close()//无参数
四、正则表达式
正则表达式是字符串的一种匹配模式，专门为简化字符串操作而生
正则表达式的创建方式
var reg=/askjd/修饰符//字面量形式
var reg=new RegExp(字符串，修饰符)//构造函数形式
修饰符:可以多个修饰符一起使用
g globel//全局匹配,例子/a/g
i ignoreCase//忽略大小写
m multiLine//换行匹配
形容词
$//查找到指定字符的最后一个，例子/a$/
^//查找到指定字符的最前一个，例子/^a/
(?=n)//匹配到后面紧跟字符n的字符
(?!n)//匹配到后面没有紧跟字符n的字符
正则表达式的方法和属性
reg.test(str)//检测str中有没有符合reg的规则，有则返回true，反之false
str.match(reg)//匹配str中有没有符合reg规则的字符
//1.有则返回数组
// 2.数组中的index 表示检索的位置
reg.exe(str)//1.分批次检测str中有没有符合reg的规则
//2.有则返回一个包含检测结果信息的数组，继续检测，知道没有，返回null
//3.reg.lastIndex记录下一次exe检查测的索引值
表达式：用来表示字符串区间
在正则表达式中（）是子表达式
在正则表达式中|是或者
[abcde]//查找abcde内的任意一个字符
[^abcde]//查找除了abcde内的任意一个字符
[0-9]//查找0-9的任意一个字符
[A-Z]//查找A-Z的任意一个字符
[A-z]//查找A-z的任意一个字符
[u6d77u6587u8001u5e08]//查找对应unicode编码的任意一个中文字符
元字符
元字符本质也是表达式，也是用来表示字符的区间，元字符也只能匹配一个字符
w<==>[0-9A-z]
W<==>[^w]
d<==>[0-9]
D<==>[^d]
s<==>[
f
v]
S<==>[^s]
<==>单词边界//例子：/[c]/匹配到单词开头的c
B<==>非单词边界
.<==>[^
]可以匹配到所有的字符，除了换行
量词
原则是贪婪匹配原则，能匹配到几个就匹配几个
可以在量词后面加上？，就能取消贪婪匹配
n+//匹配到[1,无穷]个字符n
n*//匹配到[0,无穷]个字符n
n？//匹配到[0,1]个字符n
n(x)//匹配到x个字符n
n(x,y)//匹配到[x,y]个字符n
n(x.)//匹配到[x,无穷]个字符n
{x}//匹配到x个
反向引用 它是一个数据
1引用的第一个2引用的第二个