三大家族和一个事件对象
- 三大家族(offset/scroll/client)
- 事件对象/event (事件被触动时,鼠标和键盘的状态)(通过属性控制)
offset
js中有一套方便的获取元素尺寸的办法就是offset家族:offsetWidth offsetHeight offsetLeft offsetTop offsetParent
offsetWidth和offsetHight (检测盒子自身宽高+padding+border)
不包括margin,返回的是数字可直接运算
offsetLeft和offsetTop (检测距离父盒子有定位的左/上面的距离)
- 返回距离上级盒子(带有定位)左边s的位置
- 如果父级都没有定位则以body为准
- offsetLeft 从父亲的padding 开始算,父亲的border 不算。
- 在父盒子有定位的情况下,offsetLeft == style.left(去掉px)
offsetParent (检测父系盒子中带有定位的父盒子节点)
如果当前元素的父级元素没有进行CSS定位,offsetParent为body;如果有定位,offsetParent取最近的那个父级元素。
offsetLeft和style.left区别
- 最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置,如果父系盒子中都没有定位,以body为准 而 style.left只能获取行内式,如果没有返回空字符串,必须有定位才可以
- offsetTop 返回的是数字,并且四舍五入取整,而 style.top 返回的是字符串,除了数字外还带有单位:px。
- offsetTop 只读,而 style.top 可读写。(只读是获取值,可写是赋值)
动画
动画的种类
闪现,匀速,缓动
动画的原理
盒子未来的位置=盒子本身所在的位置+步长
缓动动画原理
盒子未来位置 = 盒子本身位置+(目标位置-盒子本身位置)/ 10
- 保证步长越来越小的缓动,但永远到不了,所以需要将步长向上或向下取整(大于0向上取整,小于0向下取整)
scroll
ScrollWidth和scrollHeight(不包括border)
- 检测盒子的宽高。
- 盒子内容的宽高(如果有内容超出了,显示内容的高度),IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
scrollTop和scrollLeft
网页,被浏览器遮挡的头部和左边部分或是被卷去的头部和左边部分。
scrollTop和scrollLeft的兼容性问题
一、未声明 DTD(谷歌只认识他)(ie9+认识)
document.body.scrollTop
二、已经声明DTD(IE678只认识他)(ie9+认识)
document.documentElement.scrollTop
三、火狐/谷歌/ie9+以上支持的(不管DTD)
window.pageYOffset
如果window.pageYOffset属性存在,返回值是0~无穷大,如果没有返回值是undefined。
兼容写法
var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var aaa = document.documentElement.scrollTop + document.body.scrollTop;
||号可以写为+号,因为不识别会得到0,可以相加
获取title、body、head、html标签,(html基本结构访问方法)
document.title --- 文档标题;
document.head --- 文档的头标签
document.body --- 文档的body标签;
document.documentElement --- 文档的html标签,重要
判断页面有没有DTD
document.compatMode === "BackCompat" 未声明 CSS1Compat 已经声明
事件
window.onscroll=function(){},屏幕滚动触发事件
window.scrollTo(X,Y),屏幕跳转,可以把内容滚动到指定的坐标
window.onresize 浏览器大小变化
window.onload 页面加载完毕
window.screen.width/height 获得屏幕宽高,分辨率
楼层跳跃
- 100%子盒子会继承父盒子的宽高。父盒子继承body宽高。Body继承html的宽高。
- 盒子属性:auto:适应盒子自身的宽度或者高度。(对自己负责)
- 盒子属性:100%:适应盒子父盒子的宽度或者高度。(对父级负责)
事件对象event(实际为 mouse.event)
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。
所有浏览器都支持event对象,但支持的方式不同。
比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。(类似Date)
普通浏览器支持 event(带参,任意参数)
ie 678 支持 window.event(无参,内置)
在火狐谷歌中,event或者,在事件绑定的函数中,加参,这个参数就是event.
Box.onclick = function (aaa){ aaa就是event }
总结:event是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。
兼容获取方式有两种:
- 不写参数直接使用event;
- 写参数,但是为event....var event = event || window.event;(主要用这种)
event属性
timeStamp:返回事件生成的日期和时间
bubbles:返回布尔值,指示事件是否是冒泡事件类型
button:返回事件被触发时,哪个鼠标按钮被点击
pageX/pageY:光标对于网页的水平/垂直位置(ie无)(页面)
screenX/screenY:光标对于屏幕的水平/垂直位置(屏幕)
target:触发该事件的对象
type:事件的类型
clientX/clientY:光标在浏览器可视区域的水平/垂直位置 (浏览器大小和位置)
PageY和pageX的兼容写法(很重要)
在页面位置就等于 = 看得见的+看不见的
pageY/pageX=event.clientY/clientX+scroll().top/scroll().left (scroll()为封装的函数)
pageY=event.pageY||scroll().top+event.clientY
鼠标新事件
onmousemove 鼠标移动
onmousedown 鼠标按下
onmouseup 鼠标弹起
onmouseover 鼠标经过 onmouseenter
onmouseout 鼠标离开 onmouseleave 不冒泡
禁止文本选中(清除选中的内容)
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
client
- clientWidth/clientHeight 获取网页可视区域宽度/高度(两种用法)
- 盒子调用: 指盒子本身。
- body/html调用: 可视区域大小。
- clientX/clientY 鼠标距离可视区域左侧/上侧距离(event调用)
- clientTop/clientLeft 盒子的border宽高
三大系列width和height的区别
clientWidth = width + padding
offsetWidth = width + padding + border
scrollWidth = 内容宽度(不包含border)含padding
三大系列top和left的区别
offsetTop/offsetLeft :
调用者:任意元素。(盒子为主)
作用:距离父系盒子中带有定位的距离。
scrollTop/scrollLeft:(盒子也可以调用,必须有滚动条)
调用者:document.body.scrollTop/window
作用:浏览器无法显示的部分(被卷去的部分)。
clientY/clientX:(clientTop/clientLeft 的值是border)
调用者:event.clientX(event)
作用:鼠标距离浏览器可视区域的距离。
检测浏览器可视区域的宽高(兼容)
window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
ie9以上 有DTD(标准模式) 无DTD
冒泡
子元素事件被触动,父盒子的同样的事件也会被触动
事件传播阶段
三个阶段:捕获,冒泡,目标阶段
- 事件捕获:事件从最上一级标签开始往下查找,直到捕获到事件目标
- 事件冒泡:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签
- 目标:事件被执行的过程阶段
冒泡顺序
- ie6:div->body->html->document
- 其它:div->body->html->document->window
- 不冒泡事件:blur,focus,load,unload,onmouseenter,onmouseleave
阻止冒泡
- w3c的方法是:(火狐、谷歌、IE11)event.stopPropagation()
- IE10以下则是使用:event.cancelBubble = true
- 兼容代码如下:
var event = event || window.event;
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
addEventListenner(参数1,参数2,参数3)
调用者是:事件源
参数1:事件去掉on
参数2 :调用的函数
参数3:可有可无。没有,默认是false,false情况下,支持冒泡。True支持捕获。
event.bubbles,event.target,普通事件调用测试冒泡和事件源
判断事件源对象
- ie678:event.srcElement;
- 火狐/谷歌等:event.target;
- 兼容写法获取ID:var aaa.id=event.target?event.target.id:event.srcElement.id;
- 标签名获取的是大写的,如:LI,DIV;
事件委托
普通的事件绑定,没有办法为新创建的元素绑定事件,所以用事件委托,如触动li时将事件绑定到ul上来实现li事件
获取元素样式
赋值和获取
- 单个赋值:div.style.width 变量赋值:div.style["width"]
获取属性值(只能获取)
- 单个获取:div.currentStyle.width; ie678 div.currentStyle["width"]; 变量获取
- 单个获取:window.getComputedStyle(div,null).width; window.getComputedStyle(div,null)["width"] 变量获取 参数1:获取属性的元素 参数2:伪元素,c3
- 兼容写法获取元素样式: function getStyle(ele,str){ if(window.getComputedStyle){ return window.getComputedStyle(ele,null)[attr]; } return ele.currentStyle[attr]; }
正则表达式(RegExp)Regular Expression
本质:用来记录文本规则的代码,由一些普通字符和元字符组成,普通字符就是字母和数字,元字符具有特殊意义的字符
正则表达式声明
- 通过构造函数定义 var 变量名= new RegExp(/表达式/);
- 通过直接量定义 (较为常用) var 变量名= /表达式/;
检测正则test() 方法
正则对象方法,检测测试字符串是否符合该规则,返回true和false
Boolean = 表达式.test("要验证的内容,字符串");
正则内部类(帮我们写好的工具直接使用)
预定义类
. [^\n\r] 除了换行和回车之外的任意字符(“”不行)
\d [0-9] 数字字符
\D [^0-9] 非数字字符
\s [ \t\n\x0B\f\r] 空白字符
\S [^ \t\n\x0B\f\r] 非空白字符
\w [a-zA-Z_0-9] 单词字符
\W [^a-zA-Z_0-9] 非单词字符
简单类(正则://中什么特殊符号都不写,和[]的加入)
- /string/.test(“string”); 必须是完整的,只多不能少,只要完整的包含string就可
- /[andy]/.test("assd"); 只要包含里面的任何一个就可以
负向类(不能是其中的整体或者一部分)
中括号内,前面加个元字符^进行取反,不是括号里面的字符(一部分也不行)。
(可以不够,但是不能多)(不够和正好,返回false;多了或者没有返回true)
console.log(/[^abc]/.test('a'));
console.log(/[^abc]/.test('gg'));
注意: 这个符号 ^ 一定是写到方括号里面
范围类
有时匹配的东西过多,而且类型又相同,全部输入太麻烦,我们可以在中间加了个横线
console.log(/[a-z]/.test('1111'));
console.log(/[A-Z]/.test('aa'));
组合类
用中括号匹配不同类型的单个字符。
console.log(/[a-m1-5]/.test("b"))//true
正则边界(重点)
^ 会匹配行或者字符串的起始位置,注:^在[]中才表示非!这里表示开始
$ 会匹配行或字符串的结尾位置
^$在一起 表示必须是这个(精确匹配)
量词(重点)
(多个字母,重复最后一个)
* 重复零次或更多 (>=0),{0,}
+ 重复一次或更多次 (>=1),{1,}
? 重复零次或一次 (0||1), {0,1}
{} 重复多少次的意思 可以有多少个
{n} n次 (x=n)
{n,} 重复n次或更多 (x>=n)
{n,m} 重复出现的次数比n多但比m少 (n<=x<=m)
| 代表或,()提高权限,有限计算
方法
trim(); 去除字符串前后的空格(ie678不支持)
replace();替换 ,返回的是新字符串 / /gi,g代表全局,i代表不区分大小写
需要匹配的对象.replace(正则式/字符串,替换的目标字符)
search();给字符或正则查索引
indexOf();给字符查索引
trim封装
function trim(str){
return str.replace(/(^\s+)|(\s+$)/g,"");
}
特殊字符
/\t/制表符
/\n/换行符
/\r/回车符
/\f/换页符
/\b/与回退字符
/\v/垂直制表符
/\o/空字符