0、知识点补充

查找节点：

firstChild lastChild：会把空白计算在内

firstElementChild lastElementChild ：只查找元素类型的子节点，不会计算空白，但是在IE8+才支持

克隆节点：cloneNode()

一、案例—淡入效果

1、做默认的html+css

2、每隔两秒生硬的变化

加入临界条件，控制inIndex和outIndex的范围：

3、创建一个设置透明图的方法

4、让图片慢慢变化

5、解决变化过程中，最后一张总是显示的问题

变化过程中，待显示的图片的透明度还没有达到1，也就是半透明状态，而其他图片的z-index值又都为1，z-index值相同的话，默认总是显示最后一张。

解决的办法，变化这一刻（在变化的1秒钟之内），待显示的图片的z-index设置为3，其他的图片的z-index的值设置为1，让待隐藏的图片的z-index值为2.

二、事件与事件对象

1、事件监听与移除事件监听

事件监听要解决的问是给一个dom对象绑定多个事件。

1、事件监听

针对IE8+及火狐浏览器，使用addEventLister()，在绑定事件的时候，不要写on。

针对IE8及更低版本浏览器使用attachEvent()，绑定的事件倒序执行。

写一个兼容性的函数：

2、移除事件监听

兼容性写法：

2、事件对象

事件对象存在于事件处理函数中。

事件对象就是描述当前事件的具体的情况的对象。这个对象根据事件的不同，内容可能会发生细微的变化，比如键盘事件，事件对象就会包括keyCode，比如单击事件，事件对象就会包含点击的坐标。

获取事件对象的兼容性写法：

shiftKey：表示是否按了shift键，如果按了返回true，没有按返回false

ctrlKey：表示是否按了ctrl键，如果按了返回true，没有按返回false

altKey：表示是否按了alt键，如果按了返回true，没有按返回false

keyCode：表示键盘的代码，是一个数字，每个键都会对应一个数字。具体查看“键盘KeyCode对照表.docx”

判断是否按了@键：

3、阻止冒泡事件

1、什么是冒泡事件？

在点击b这个div的时候，由于b在a的上面，也相当于点击了a。所以会触发两个事件，这种情况就是冒泡事件。

2、如何阻止冒泡行为

如果要阻止冒泡，

标准浏览器使用evt.stopPropagation()

IE内核浏览器使用window.event.cancelBubble = true;

4、阻止默认行为

比如表单提交或者超链接跳转，都会有一个地址，点击表单中的提交按钮或者超链接就会跳转到相应的地址。如果点击之后不希望这样跳转，就使用js方法阻止它，这就是阻止默认行为。

另外的方法：

三、案例—可编辑的表格

1、完成html+css布局

css：

2、隔行换色

3、找到包括名字的td，并绑定单击事件

4、点击td后，将input放到td中

设置input的样式，阻止产生多个input

5、给input绑定事件

四、面向对象概述

1、什么是对象

我喜欢大眼睛，长头发，大长腿，小蛮腰，会洗衣服，会做饭，会生孩子的女孩。比如有孙俪，范冰冰。

上面这句话中的“大眼睛，长头发，大长腿，小蛮腰，会洗衣服，会做饭，会生孩子”表示一类人，在程序中就是一个类。而孙俪，范冰冰是符合这类的人，在程序中就的对象。

2、面向对象编程

面向对象编程简称OOP（Object-Oritened Programming）为软件开发人员敞开了一扇大门，它使得代码的编写更加简洁、高效、可读性和维护性增强。它实现了软件工程的三大目标：（代码）重用性、（功能）扩展性和（操作）灵活性，它的实现是依赖于面向对象的三大特性：封装、继承、多态。在实际开发中 使用面向对象编程 可以实现系统化、模块化和结构化的设计 它是每位软件开发员不可或缺的一项技能。

五、自定义对象

1、构造函数和类的说明

PHP中要声明一个对象的话，必须先声明一个类，然后通过关键字new实例化得到一个对象。

在js中，没有类的概念，只有构造函数的概念，js中会把构造函数当做类。

在ES6（ECMAScript6）中才引入了类的概念。

2、this关键字和成员

用this关键字，在构造函数中添加成员：

this表示根据Person实例化的每个对象。当前用的是哪个对象，this就表示哪个对象。

3、删除成员

使用的关键字是delete。delete关键字用于删除对象的成员，既可以删除成员属性，也可以删除成员方法。

4、练习

案例目的是设置dom对象的css样式：

使用的办法不是直接设置，而是将设置dom对象css样式写到对象的成员方法中

完成链式调用：

5、自定义对象在内存中的表现形式

创建一个对象后，会在内存中栈和堆都开辟一个新的空间，堆中存储的是对象的实际内容，栈区存放的是堆的地址。

删除其中一个对象，会不会对另外的对象有影响？

六、json格式的对象

1、json简介

json就是符合某种格式的字符串。

JavaScript 对象表示法（JavaScript Object Notation）。

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析

JSON是独立于语言和平台的。所有的编程语言都认识JSON，这一点和XML一样。

2、json格式

有两种写法：

①：方括号在外层，和JavaScript中的数组格式一样。

[‘apple’, ‘banana’, ‘pear’, ‘orange’, ‘xigua’]

[{id:1, name:’宋江’, nickname:’及时雨’}, {id:2, name:’卢俊义’, nickname:’玉麒麟’},{id:1, name:’林冲’, nickname:’豹子头’}]

②、大括号在外，和JavaScript中的对象格式一样。

{键:值, 键:值, ….}

{键:[], 键:[], …}

只要是[]，就要符合中括号的语法（和数组写法一样）;

只要是大括号，就要符合大括号的语法（键:值, …）

3、json格式的对象

我们最终要讨论的是JavaScript的对象写法，只不过这种写法和json的格式一样。

成员属性和成员方法：

调用成员：

七、内置对象

手册位置：上面的JavaScript—左侧的JavaScript—右侧的参考书

1、Object

2、String对象

使用方法：

属性

length：表示字符串的长度。

方法：

indexOf() – 查找一个字符串是否存在，返回值是存在的位置（存在的情况），或-1（不存在）

substr() – 截取字符串。两个参数，第一个参数表示起始位置可以是负数；第二个参数可选，表示长度，非负，不填表示到结尾

substring() –截取字符串。两个参数，都是非负数。分别表示起始位置和结束位置，第二个参数不写表示到结尾

slice() –截取字符串。两个参数，第一个表示起始位置，可以是负数。第二个是结尾位置。注意结尾位置不能在起始位置之前。

split() – 将字符串分割成数组。两个参数，第一个表示分隔符，第二个可选表示数组的最大长度

replace – 替换字符串中的值。两个参数，第一个表示查找的值，第二个表示替换后的值。

3、Date对象

使用方法，先new Date()，得到一个对象，然后用这个对象调用它里面的成员方法。

4、Array对象

属性：

length，表示数组元素个数

方法：

concat() 连接两个或更多的数组，并返回结果。

join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

pop() 删除并返回数组的最后一个元素

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

reverse() 颠倒数组中元素的顺序。

shift() 删除并返回数组的第一个元素

slice() 从某个已有的数组返回选定的元素

splice() 删除元素，并向数组添加新元素。

toString() 把数组转换为字符串，并返回结果。

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

5、Math对象

方法：

abs(x) 返回数的绝对值。 正数的绝对值是它本身，负数的绝对值是它的相反数。

ceil(x) 对数进行上舍入。

floor(x) 对数进行下舍入。

max(x,y) 返回 x 和 y 中的最高值。

min(x,y) 返回 x 和 y 中的最低值。

random() 返回 0 ~ 1 之间的随机数。包含0，不包含1。[0,1)

随机整数公式：Math.floor(i + Math.random() * (j – i + 1))

round(x) 把数四舍五入为最接近的整数。

6、window对象

方法：

alert(); — 弹出一个警告框

confirm(‘你确定要删除吗’); 点击确定返回true，点击取消返回false

prompt() – 弹出一个可输入的对话框，点击确定返回输入的内容，点击取消返回null

open() – 打开一个新窗口

var s =setTimeout(“js代码或js函数”, 毫秒数) – 表示多少毫秒后，执行前面的js代码或函数，只执行一次

var t =setInterval(“js代码或js函数”, 毫秒数) – 表示每隔多少毫秒，执行一次前面的js代码或函数。

clearTimeout(s); — 清除由setTimeout产生的定时器

clearInterval(t); — 清除由setInterval产生的定时器

7、navigator

navigator.userAgent，从这个结果中可以查看到浏览器及浏览器的版本。

8、screen

screen.availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。

screen.availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。

screen.height返回显示屏幕的高度

screen.width返回显示屏幕的宽度

9、history

back() 加载 history 列表中的前一个 URL。

forward() 加载 history 列表中的下一个 URL。

go() 加载 history 列表中的某个具体页面。

10、location

reload() – 刷新页面，和点击浏览器中的刷新按钮是一个意思，如果添加参数为true表示强制刷新，和按Ctrl+F5一样，都表示清除缓存刷新。

location的属性：