初学Javascript笔记整理 (下)

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 : 菜鸟整理，如有不好指出，欢迎指正。