PS: 笔者是学完一阶段整理一阶段,在往下学习的过程中发现上一期有一部分笔记整理的不够完善,所以在这一期我会继续补充一些上一期同一知识点的内容。
一、常用事件
1.常用事件
事件名 | 说明 |
onmousemove | 鼠标移动 |
onmouseup | 鼠标弹起 |
onmousedown | 鼠标按下 |
onscroll | 滚动屏幕 |
onresize | 窗口改变 |
2. 防止选择拖动
我们知道 按下鼠标然后拖拽可以选择文字 的。 所以
清除选中的内容
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
二、JSON
1. JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,我们称之为JavaScript对象表示法。使JSON进行数据传输的优势之一。
json很像我们学过的样式条
var myjson={k:v,k:v,k:v...} 键值对 key: value color: red;
如 : var json = {name: “png”,age: 22}
使用:json.name json.age
2. in 运算符
in运算符也是一个二元运算符,但是对运算符左右两个操作数的要求比较严格。in运算符要求第1个(左边的)操作数必须是字符
串类型或可以转换为字符串类型的其他类型,而第2个(右边的)操作数必须是数组或对象。只有第1个操作数的值是第2个操作
数的属性名,才会返回true,否则返回false
3. json的遍历
for ( 变量 in 对象) { 执行语句; }
三、offset 家族
js中有一套方便的获取元素尺寸的办法就是offset家族
1. offsetWidth offsetHeight
得到对象的宽度和高度(自己的,与他人无关)
offsetWidth = width + border + padding ( offsetHeight 同理)
2. offsetLeft offsetTop
返回距离上级盒子(最近带有定位)左边/上方的位置。从父级的padding 开始算 ,父级的border 不算。如果父级(不仅仅指父亲)都没有定位,则以body 为准
3. offsetLeft 和 style.left 的区别
1.最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。而 style.top 不可以 ,只有定位的盒子才有 left top
right
2. offsetLeft 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
3. offsetLeft 只读,而 style.left 可读写。
4. 如果没有给 HTML 元素指定过 left 样式,则 style.top 返回的是空字符串。
5. 最重要的区别 style.left 只能得到 行内样式 offsetLeft 都可以
4. offsetParent
返回该对象的最近的那个 带有定位 的父级元素 。 父级元素没有进行CSS定位(position为absolute或relative),那么offsetParent 为 body。
注 : 和上一期学过一个 返回 父亲(亲)的 parentNode 有所区别
案例 :筋斗云效果
四、scroll家族
1. scrollTop scrollLeft
scrollTop 被卷去的头部 就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离
2. scrollWidth scrollHeight
大小是内容的大小
下面是封装自己的 scrollTop和scrollLeft 兼容性写法
案例 : 跟随的广告
案例 : 固定导航栏
3. scrollTo(x,y)
该方法可把内容滚动到指定的坐标。
x 必需,要在窗口文档显示区左上角显示的文档的 x 坐标。
y 必需,要在窗口文档显示区左上角显示的文档的 y 坐标
因为我们的网页大部分都没有水平滚动条,所以,这个x 不太常用。
案例 : 点击箭头返回头部
五、client 家族
client 可视区域
三者区别 :
offsetWidth: width + padding + border (披着羊皮的狼)
clientWidth: width + padding 不包含border
scrollWidth: 大小是内容的大小
封装 兼容性 可视区域大小函数:
六、事件对象 event
1. 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。所有浏览器
都支持event对象,但支的方式不同
说白了,这event就是集合了事件的相关信息 。比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中
以下是兼容性写法:
2. event 常见属性
属性 | 作用 |
data | 返回拖拽对象的URL字符串(dragDrop) |
width | 该窗口或框架的高度 |
height | 该窗口或框架的高度 |
pageX | 光标相对于该网页的水平位置(ie无) |
pageY | 光标相对于该网页的垂直位置(ie无) |
screenX | 光标相对于该屏幕的水平位置 |
screenY | 光标相对于该屏幕的垂直位置 |
target | 该事件被传送到的对象 |
type | 事件的类型 |
clientX | 光标相对于该网页的水平位置 (当前可见区域) |
clientY | 光标相对于该网页的水平位置 |
3. pageX clientX screenX 区别
screen X screenY
是以我们的电脑屏幕 为基准点 测量
pageX pageY ie678 不认识
以我们的文档 (绝对定位) 的基准点 对齐
clientX clientY
以 可视区域 为基准点 类似于 固定定位
4. 案例 : 水平条拖动
七、冒泡机制
事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层
但是 不是所有的事件都能冒泡。以下事件不冒泡:blur、focus、load、unload
防止冒泡的兼容性写法:
八、
1. HTML基本结构访问方法
文档是 document
html body head
document.head
document.body
document.title
没有 document.html 取而代之的是 document.documentElement;
2. 判断当前对象
案例 : 点击空白处隐藏盒子
3. 获得用户选择内容
4. 三个取整
Math.ceil() 向上取整 (天花板)
Math.floor() 向下取整 (地板 )
Math.round() 四舍五入函数
九、js常用访问CSS属性
访问得到css 属性,比较常用的有两种
1.利用点语法
如:box.style.width box.style.top
点语法可以得到 width 属性 和 top属性 带有单位的。 100px
但是这个语法有非常大的缺陷, 后面的width 和 top 没有办法传递参数的。
2. 利用 [] 访问属性
语法格式: box.style[“width”]
元素.style[“属性”];
最大的优点 : 可以给属性传递参数
3. 访问CSS样式
前面那两种有个严重的缺陷,就是只能得到行内的样式,下面介绍得到内嵌或者外链的样式
1. obj.currentStyle ie opera 常用
外部(使用<link>)和内嵌(使用<style>)样式表中的样式(ie和opera)
2 . window.getComputedStyle("元素", "伪类") w3c
两个选项是必须的, 没有伪类 用 null 替代
4.封装返回自己样式的函数额兼容性写法
十、缓动动画原理
1. 匀速动画的原理: 盒子本身的位置 + 步长
缓动动画的原理: 盒子本身的位置 + 步长 (不断变化的)
2. 回调函数
回调函数就是一个参数,将这个函数当作参数传到另一个函数里面,当那个函数执行完毕之后,在执行传进去的那个函数。这个过程就叫做回调。下面会有例子
3. 封装运动函数与回调
案例:轮播图
js代码部分
十一、闭包
1. 什么是闭包 : 当内部函数在定义它的作用域的外部被引用时,就创建了该内部函数的闭包,如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被释放,因为闭包需要它们
我们知道,局部变量是不可以为外部所使用。说白了,就是我们可以用一个函数去访问另外一个函数的内部变量的方式。
JavaScript中所有的function都是一个闭包,不过一般来说,嵌套的function所产生的闭包更为强大,也就是我们大部分时候我们所谓的 闭包
下面举个例子:
在执行完var a=out() 后,变量a实际上就是指向了函数inner.在执行a()之后控制台就显示i的值(第一次为1).这段函数其实就创建了一个闭包。为什么?因为函数out外的变量a引用了函数out内的函数inner,就是说:当函数out的内部函数inner被函数out外的一个变量引用的时侯。就创建了一个闭包
2. 闭包的优缺点 :
优点:不产生全局变量,实现属性私有化。
缺点:闭包中的数据会常驻内存,在不用的时候要删掉否则会导致内存溢出。
3. window 的 resize事件并不是在我们 resize 结束后才出发,而是不停的调用,直到窗口的大小不再变化。类似的机制还有mousemove,都是短时间内重复触发。为了当改变窗口大小时,直到窗口的大小不再变化时只执行一次。那么这时候,我们就要用到闭包来控制函数节流。当然还有其他的方法
案例:屏幕缩放时件(闭包版的函数节流)
十二、对象
对象数据类型: 对象就是带有属性和方法的 数据类型
1. 声明对象
var obj = new Object();
字面量式声明对象 var obj = {};
2. new 关键字
我们经常利用new 关键字 去声明新的对象 。new 关键字可以让 this 指向新的对象
new运算符的作用是创建一个对象实例。这个对象可以是用户自定义的,也可以是带构造函数的一些系统自带的对象。
所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。
3. prototype
每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方
法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。
使用方法: 类名.prototype.方法=function(0{ };
PS : 对象这一部分还有很多知识点,这只是一小小部分。后面学习的话到还会继续补充整理。
最后再介绍个案例 :仿之前网易轮播图
PS : 菜鸟整理,如有不好指出,欢迎指正。