js特效

三大家族和一个事件对象

• 三大家族（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

本质：用来记录文本规则的代码,由一些普通字符和元字符组成，普通字符就是字母和数字，元字符具有特殊意义的字符

正则表达式声明

1. 通过构造函数定义 var 变量名= new RegExp(/表达式/);
2. 通过直接量定义 （较为常用） 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]	    非单词字符  

简单类（正则：//中什么特殊符号都不写，和[]的加入）

1. /string/.test(“string”); 必须是完整的，只多不能少，只要完整的包含string就可
2. /[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/空字符

转载于:https://my.oschina.net/u/3160839/blog/1788056