offset家族
三大家族和一个事件对象
三大家族（offset/scroll/client）
事件对象/event （事件被触动时，鼠标和键盘的状态）（通过属性控制）
Offset家族简介
offset这个单词本身是--偏移，补偿，位移的意思。
js中有一套方便的获取元素尺寸的办法就是offset家族；
offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent
共同组成了offset家族。
offsetWidth和offsetHight （检测盒子自身宽高+padding+border）
这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。
offset宽/高 = 盒子自身的宽/高 + padding +border；
offsetWidth = width+padding+border；
offsetHeight = Height+padding+border；
offsetLeft和offsetTop （检测距离父盒子有定位的左/上面的距离）
返回距离上级盒子（带有定位）左边s的位置
如果父级都没有定位则以body为准
offsetLeft 从父亲的padding 开始算,父亲的border 不算。
在父盒子有定位的情况下，offsetLeft == style.left(去掉px)
offsetParent （检测父系盒子中带有定位的父盒子节点）
1、返回改对象的父级 （带有定位）
如果当前元素的父级元素没有进行CSS定位 （position为absolute或 relative，fixed）， offsetParent为body。
2、如果当前元素的父级元素中有CSS定位 （position为absolute或 relative，fixed）， offsetParent取最近的那个父级元素。
offsetLeft和style.left区别
最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。
而 style.left不可以
二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
三、offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
四、如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。
style.left在=的左边和右边还不一样。（左边的时候是属性，右边的时候是值）
动画和封装
动画定义
运动的图片。（让图片或者图画动起来）
动画的种类
闪现（基本不用）
匀速（今天重点）
缓动（以后重点）
动画原理
盒子的位置 = 盒子本身所在的位置+步长。
体验匀速动画
案例
焦点图
难点1：先点亮盒子，然后移动图片。
2：移动图片的目标位置都是负值。
（负的图片的个数乘以图片的宽，到0之间）（负数）
3：获取盒子的索引值，我们才能知道，ul向右移动几张图片。
切换图
难点：1.为什么移动的图片是负值。（参看上面的案例难点2）
为什么要计数器。
（我们需要一个值， 记录当前图片，方便后续操作）
为什么方法1里的num--；方法2里面的num++。
我们要看之前的图片，就要num--，要看后面的图片就要num++；
图片想左走显示后面的，图片向右走显示前面的。
无缝滚动
缓动动画
三个函数
都是在数轴上向上或者向下取整。
Math.ceil() 向上取整
Math.floor() 向下取整
Math.round(); 四舍五入
缓动动画原理
leader=leader+(target-leader)/10; 盒子位置 = 盒子本身位置+（目标位置-盒子本身位置）/ 10；
动画原理 = 盒子位置 + 步长（步长越来越小）。
体验缓动动画
分析为什么没有到达指定位置
盒子本身位置 目标位置 步长 已经到达了的位置
0 400 0 0
0 400 40 40
40 400 36 76
76 400 32.4 108.4
.........
JS实际运算时会四舍五入取整，然后计算。
396(四舍五入获取) 400 0.4 396.4
396(四舍五入获取) 400 0.4 396.4
....
offsetLeft和style.left的值的获取问题
获取盒子距离左侧具有定位的父盒子的距离（没有的body），四舍五入取整。
Style.left获取的是具体值。 （赋值的时候也是直接赋值）
按例：筋斗云
鼠标悬停和鼠标移开不会影响初始化值，只有点击影响。而移开的情况下，span移动到计数器的位置。
第二系列scroll
Scroll家族组成
ScrollWidth和scrollHeight（不包括border）
检测盒子的宽高。（调用者：节点元素。属性。）
盒子内容的宽高。（如果有内容超出了，显示内容的高度）
IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
scrollTop和scrollLeft
网页，被浏览器遮挡的头部和左边部分。
被卷去的头部和左边部分。
他有兼容性问题
未声明 DTD（谷歌只认识他）
document.body.scrollTop
已经声明DTD（IE678只认识他）
document.documentElement.scrollTop
火狐/谷歌/ie9+以上支持的
window.pageYOffset
兼容写法
var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var aaa = document.documentElement.scrollTop + document.body.scrollTop;
获取title、body、head、html标签
document.title --- 文档标题；
document.head --- 文档的头标签
document.body --- 文档的body标签；
document.documentElement --- 这个很重要
它表示文档的html标签， 也就是说，基本结构当中的html标签并不是通过document.html 去访问的，而是document.documentElement 。
Json
Json是一种和数组类似的数据类型。
不同的是：数组中的元素是单一的。
而json中的元素，是以键值对的形式出现的。（key: value）
定义方法
var json = { key1：value1,key2：value2,key3：value3... };
数组是通过索引值获取数组中的元素的，而json是通过key获取元素的。
获取内容
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一。表示方法为键值对，key：value。
var myjson={k1:v1,k2:v2,k3:v3...}
获取方式：v1 == myjson.k1 v2 == myjson.k2
Json一般就是被当做一个配置单用；
Json的遍历（了解）
用的是新的语法方法：for ... In ....
Scroll()的封装
判断页面有没有DTD
document.compatMode === "BackCompat"
BackCompat 未声明
CSS1Compat 已经声明
注意大小写
案例
固定导航栏
广告跟随
返回头部小火箭 （原理类似：缓动框架。只不过是多一个页面跳转）
小知识
onscroll事件
只要页面滚动无论向左向右，向上向下，哪怕只有1px，都会触动这个事件
屏幕跳转
window.scrollTo
方法可把内容滚动到指定的坐标。
格式：
scrollTo(xpos,ypos)
xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标
scroll家族
案例
楼层跳跃
100%子盒子会继承父盒子的宽高。父盒子继承body宽高。Body继承html的宽高。
盒子属性：auto:适应盒子自身的宽度或者高度。（对自己负责）
盒子属性：100%:适应盒子父盒子的宽度或者高度。（对爸爸负责）
事件对象（event）
再触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。
比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。（类似Date）
普通浏览器支持 event（带参，任意参数）
ie 678 支持 window.event（无参，内置）
总结：他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。
事件对象的获取（event的获取）
IE678中，window.event
在火狐谷歌中，event或者，在事件绑定的函数中，加参，这个参数就是event.
Box.onclick = function (aaa){ aaa就是event }
兼容获取方式有两种：
不写参数直接使用event;
写参数，但是为event....var event = event || window.event;(主要用这种)
event内容重要内容
screenX、pageX和clientX的区别
PageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）
ScreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。（屏幕）
ClientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）
PageY和pageX的兼容写法（很重要）
在页面位置就等于 = 看得见的+看不见的
pageY/pageX=event.clientY/clientX+scroll().top/scroll().left
新事件（onmousemove）
只要鼠标在绑定该事件的事件源上移动，哪怕1像素，也会触动这个事件。
（这个事件可以直接或者间接的替代定时器）
案例
放大镜
注意1：CSS部分要注意：大图片/大盒子 = 小图片/显示部分
注意2：(大图片/大盒子 = 小图片/黄盒子)
大盒子滑动的距离/小盒子滑动的距离 = 大盒子滑倒头/小盒子滑倒头
大盒子滑倒头/小盒子滑倒头（他们的距离如何获取呢？）
（大图片-大盒子）（两边各有一伴儿大盒子的距离是没有走的）（小盒子-小图片）（两边各有一伴儿小盒子的距离是没有走的）
注意3：
onmouseover、onmouseout事件给定一个盒子，子元素也会获取这个事件。
替代方法：onmosueenter和onmouseleave.
拖拽案例
模拟滚动条
第三大家族client
主要成员
1、clientWidth 获取网页可视区域宽度（两种用法）
clientHeight 获取网页可视区域高度（两种用法）
调用者不同，意义不同：
盒子调用： 指盒子本身。
body/html调用： 可视区域大小。
2、clientX 鼠标距离可视区域左侧距离（event调用）
clientY 鼠标距离可视区域上侧距离（event调用）
3、clientTop/clientLeft 盒子的border宽高
三大家族区别（三大家族总结）
Width和height
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 内容宽度（不包含border）
scrollHeight = 内容高度（不包含border）
top和left
offsetTop/offsetLeft ：
调用者：任意元素。(盒子为主)
嘛作用：距离父系盒子中带有定位的距离。
scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)
调用者：document.body.scrollTop/.....(window)
嘛作用：浏览器无法显示的部分（被卷去的部分）。
clientY/clientX:（clientTop/clientLeft 值的是border）
调用者：event.clientX(event)
嘛作用：鼠标距离浏览器可视区域的距离（左、上）。
client家族特殊用法之:检浏览器宽/高度(可视区域)
Onresize事件
只要浏览器的大小改变，哪怕1像素，都会触动这个事件。
案例：根据浏览器可视区域大小，给定背景色
事件总结
区分：
1.window.onscroll 屏幕滑动
2.window.onresize 浏览器大小变化
3.window.onload 页面加载完毕
4.div.onmousemove 鼠标在盒子上移动
（注意：不是盒子移动！！！）
5.onmouseup/onmousedown == onclick
获得屏幕宽高
window.screen.width
分辨率是屏幕图像的精密度，指显示器所能显示的像素有多少。
我们的电脑一般：
横向1280个像素点，
纵向960个像素点。
我们看电影的时候是满屏和半屏的，就是这。
冒泡
事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。(BUG)
（本来应该一人做事一人当，结果，我做错了事情，你去告诉我妈）
什么是冒泡：子元素事件被触动，父盒子的同样的事件也会被触动。
取消冒泡就是取消这种机制。
阻止冒泡
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支持捕获。
案例
点击空白隐藏模态框
Document事件的绑定，无论绑定什么事件，只要事件被出发，传递过来的应该是指定的元素本身，而不是document。
事件委托
缓动框架
封装框架遇到的两个问题
原有的方法：div.style.width :这个方法比较固定，不能用变量或者字符串的形式更换属性，不方便我传值获取属性，和给属性赋值。
属性值的获取和属性的赋值
div.style["width"] = "5000px";
可以通过传字符串或者变量的方式获取和赋值属性。
缺点：他的操作完全是对行内式CSS来操作的。赋值的时候毫无问题。但是，获取值的时候有问题了。
获取任意类型的CSS样式的属性值
Div.style.width
div.currentStyle.width
Window.getComputedStyle(div,null).width;
他们的公共使用变量或者字符串获取属性值的方法都是：去电属性和点，然后加上中括号和属性的字符串形式。
Div.style[“width”];
div.currentStyle[“width”];
Window.getComputedStyle(div,null)[“width”];
开闭原则
定义一个变量。数据可以修改。但是，只能修改成为两个值。
回调函数
程序执行完毕，在次执行的函数。
在函数中给指定的函数定义一个形参，然后程序执行到最后，调用这个形参后面加一个括号。
案例（缓动框架的应用）
手风琴案例
鼠标放上去的时候，该li变大的速度太快，而其他的li变小的速度没有跟上。导致盒子右侧出现了空白。
360关闭广告
缓动框架
存在的问题
很多属性我们的框架无法获取值和赋值。
border-radius: 1px 21px 41px 1px ;
opacity: 0.5;
background: rgba(0,0,0,.4);
z-index: 1;
主要处理两个
第一个是透明度（旋转木马）
值为小数，获取的时候要特殊处理。
兼容问题。IE678不识别opacity;
第二个是层级（旋转木马）（由需求决定的）
层级的提高是一次性直接提到最高，不需要一点一点儿的缓动。
缓动框架案例
旋转木马
原理：我们先定义一个数组，数组中的元素是json；json中的元素是属性。
点击一个按钮，按顺序更换数组中元素的位置。
（如果我们想完成旋转木马，只需要更换数组中元素的位置）
步骤：
我们必须让页面加载的时候把所有的属性加载出来，让我看看。（核心）
鼠标放到大盒子上显示对应的左右切换按钮，移开隐藏
获取两个按钮。对他们进行事件绑定。对他们进行判断。
如果是左侧的按钮执行一套程序，如果是右侧的按钮执行另一套程序。
绑定按钮的函数，一个是正转，一个是反转。（传参确定）
调换相应的数组对应的元素。（先删除谁，在怎么添加）
正转反转的问题
最开始是：12345；我想让他变成：23451
把1删除，在最后添加1；
在数组json中，删除第一个元素，添加到最末尾。（正转）
在数组json中，删除最后一个元素，添加到第一位。（反转）
函数节流
定义一个变量，只有函数执行完毕在去执行下一个。
正则表达式（RegExp）
概述
正则表达式（英语：Regular Expression）
本质：用来记录文本规则的代码
（为字符串定义规则，为输入内容定义规则！）
应用非常广泛，如：表单验证、高级搜索、生化科学
（有一定难度，不要求非常熟练，但至少会表单验证）
表单验证
隐藏手机号码： 150****7654
可以通过正则表达式，从字符串中获取我们想要的特定部分
正则表达式的特点是：
- 灵活性、逻辑性和功能性非常的强；
- 可以迅速地用极简单的方式达到字符串的复杂控制。
- 对于刚接触的人来说，比较晦涩难懂。
比如：
匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}
验证手机号：
/((13[0-9])|(15[4,\D])|(18[0,5-9]))\d{8}$/
很难记住。
正则表达式声明
1.通过构造函数定义
var 变量名= new RegExp(/表达式/);
2.通过直接量定义 （较为常用）
var 变量名= /表达式/;
console.log(regexp1.test(345));
console.log(/\d/.test(567));（直接使用）
正则表达式的组成是：(总结)
有一些普通字符和元字符组成，普通字符就是字母和数字，元字符具有特殊意义的字符
匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始
比如 \d
预定义类: 表示数字 [0-9]
test() 方法
正则对象方法，检测测试字符串是否符合该规则，返回true和false，参数（测试字符串）
使用语法：
Boolean = 表达式.test("要验证的内容");
console.log(/\d/.test(567));
验证 567 符不符合 \d 的规范
正则内部类（帮我们写好的工具直接使用）
预定义类
. [^\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”); 必须是完整的，只多不能少
/andy/.test(“andy”) // true
/andy/.test(“andylv”) // true
/andy/.test(“an”) // false
一句话，只要完整包含了andy 就可以了（有他就行）
2、/[string]/.test(“string”); 只要包含里面的任何一个就可以
/[andy]/.test("andy"); // true
/[andy]/.test("an"); // true
/[andy]/.test("ady"); // true
/[andy]/.test("anll"); // true
/[andy]/.test("assd"); // true
/[andy]/.test("ss"); // false
/[3aH8]/.test("ss"); // false
负向类（不能是其中的整体或者一部分）
中括号内，前面加个元字符^进行取反，不是括号里面的字符（一部分也不行）。
(可以不够，但是不能多)（不够和正好，返回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
正则边界（重点）
^ 会匹配行或者字符串的起始位置
注：^在[]中才表示非！这里表示开始
$ 会匹配行或字符串的结尾位置
^$在一起 表示必须是这个（精确匹配）
// 边界可以精确说明要什么console.log(/lily/.test("lilyname")); // trueconsole.log(/^lily$/.test("lily")); // trueconsole.log(/^lily$/.test("ly")); // false
console.log(/^andy$/.test("andy")); // true
这个的最终意思就是 说， 必须是 andy 这四个字母
量词（重点）
（多个字母，重复最后一个）
- (贪婪) 重复零次或更多 (>=0)
- (懒惰) 重复一次或更多次 (>=1)
? (占有) 重复零次或一次 （0||1） 要么有 要么没有
{} 重复多少次的意思 可以有多少个
您的银行卡密码只能是 6位 {6}
{n} n次 （x=n）
{n,} 重复n次或更多 (x>=n)
{n,m} 重复出现的次数比n多但比m少 (n<=x<=m)
{0,}
{1,}
? {0,1}
x|y 一个 | x 或者 y（没有&，用的是，代替的）
（）提高权限，有限计算
案例：
匹配座机号
var regexp = /^(0\d{2}-\d{8})|(0\d{3}-\d{7})$/;var demo = /0\d{2}-\d{8}$|0\d{3}-\d{7}$/;
匹配中文
（ /^[\u4e00-\u9fa5]{2,4}$/ ）
3.匹配验证表单（注册QQ）
replace 函数
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
语法格式：(返回值是新字符串)
需要匹配的对象.replace(正则式/字符串，替换的目标字符)
正则表达式的匹配模式支持的2个标志
g：表示全局模式（global），即模式将被应用于所有字符串而非发现一个而停止
i：表示不区分大小写（ease-insensitive）模式，在确定匹配想时忽略模式与字符串的大小写
封装自己的trim 函数
function trim(str) {
return str.replace(/（^\s+）|（\s+$）/g,""); // 去掉前面和后面的空格
}
网友评论