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