目录

一、回顾与加强

1、JavaScript错误类型及特点

1、编译类型的错误

编译错误就是语法错误。

2、执行错误

语法上没有错误，结合上下午出现的错误，比如调用了一个不存在的变量或函数等。

2、事件

1、事件驱动式

事件驱动式由：用户的行为+JavaScript引擎捕获用户的行为+调用处理函数。实际上就是一个事件的组成。

2、事件处理函数的绑定与执行

①、行内绑定

在HTML标签内指定事件并写处理程序。

②、行内绑定—动态绑定

如果事件的处理程序又大段的js代码，那么直接写到行内，肯定是不合理的，解决的办法是将大段的js代码封装成函数，然后触发事件的时候，调用这个函数。

③、动态绑定

通过获取元素（标签、节点）的dom对象，然后给dom对象绑定事件的方式来实现事件的绑定。

3、在事件处理程序中，this分别表示什么

①、行内绑定

②、行内绑定—动态执行

③、动态绑定

二、闭包

1、概念

闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。

2、特点（作用）

1、和作用域的特定一致

可以在函数内部使用函数外部的变量。

2、使用闭包，内存不会释放

3、案例

1、点击页面中的三个li标签，能够正常输出li的下标

上面案例的另一种写法：

2、页面刷新后，每隔1秒分别输出1/2/3/4/5

三、DOM

1、什么是DOM

DOM全称是Document Object Model（文档对象模型），它是JS将HTML按文档结构和内容层次抽象出的模型，使得JS有了访问HTML的能力，能够实现对HTML中内容的操作。DOM存在广泛，PHP以及其他语言也有各自的DOM模型。

DOM模型呈现树状结构，因此也叫“树模型”，树中的内容（标签、属性、文本）称为“节点”，包含有元素节点（标签）、属性节点、文本节点。每个节点，都是一个dom节点对象。

2、节点与DOM模型

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点，用document对象表示

每个 HTML 元素是元素节点，比如html、head、body、a、h1

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点，比如href

注释是注释节点

3、节点之间的关系

4、元素节点查询操作

1、基于文档（document）查询

document.getElementById(元素id); //得到一个dom对象

document.getElementsByTagName(标签名); //得到的是一个数组，数组的每个单元是一个dom对象

前面这两种方法推荐使用，因为兼容性好。

document.getElementsByClassName(类名); //IE8+支持，就是从IE9支持 得到的是一个数组，数组的每个单元是一个dom对象

document.getElementsByName(元素的name属性); //得到的是一个数组

//h5中提供的方法

document.querySelector(css选择器); //IE7+支持 得到的是一个dom对象

document.querySelectorAll(css选择器); //IE7+支持 得到的是一个数组

测试的html：

js代码及效果：

2、相互关系查询

①、根据父节点查找子节点

②、根据子节点查父节点

③、查询兄弟节点

3、遗留DOM

早期DOM访问形式，在一些特定元素的获取上比较方便。被保留下来使用，W3C标准化之后 称为“0级DOM”。

document.body 访问body节点

document.forms 访问所有的表单 返回集合

document.formName[index].name 访问表单项

document.anchors 访问所有的锚点 返回集合

document.links 访问所有的链接 返回集合

document.images 访问所有的图片 返回集合

document.all 访问所有的元素

5、元素节点增删改操作

1、增加元素节点/创建节点

方法一：父节点.appendChild(子节点)

方法二：父节点.insertBefore(新节点, 参照的节点);

2、修改节点

方法：父节点.replaceChild(新节点, 待替换的节点);

3、删除节点

方法：父节点.removeChild(子节点);

6、属性节点操作

1、获取元素的属性

elementNode.attributes 获取元素的所有属性

elementNode.getAttribute() 读取一个属性值

elementNode.属性名 获取元素的属性

2、添加/修改元素的属性

elementNode.setAttribute() 设置（修改/添加）一个属性值

elementNode.属性名 = 值 设置元素的属性

3、删除元素的属性

elementNode.removeAttribute() 删除一个属性

4、判断元素是否有哪个属性

elementNode.hasAttribute() 检测是否有某个属性，有返回true，没有返回false

5、案例—全选，反选，取消

代码见19全选反选取消.html

7、操作css样式

1、设置css样式：

语法： node.style.css样式 = 值

不带中横线的css：node.style.样式 = 值。比如有color，border，width

带中横线的，样式要去掉中横线，后面的首字母大写，backgroundColor、fontSize、lineHeight

2、获取css样式

使用node.style.样式的方式只能获取行内样式和js已经设置过的样式。

在IE8及更低版本浏览器中支持node.currentStyle.样式

高版本浏览器支持getComputedStyle(node).样式

兼容的性的写法：

8、DOM属性

DOM有四个属性，分别是：

innerHTML

获取/设置元素里的html内容

nodeName

nodeName 是只读的

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

nodeValue

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

nodeType

表示节点的类型

元素 1

属性 2

文本 3

注释 8

文档 9

案例：完成兼容性的查找子节点的方法，及查找上一个兄弟的方法，及查找下一个兄弟的方法

获取子元素的兼容性写法：

获取上一个兄弟的兼容性写法：

获取下一个兄弟的兼容性写法：

9、获取元素的位置

offsetLeft 元素在网页中水平坐标值 ele.offsetLeft

offsetTop 元素在网页中垂直坐标值 ele.offsetTop

offsetWidth 元素在页面中占据的宽度 ele.offsetWidth

offsetHeight 元素在页面中占据的高度 ele. offsetHeight

HTML+css：

js及输出结果：

scrollLeft 滚动条在容器中水平滚动的距离 ele.scrollLeft

scrollTop 滚动条在容器中垂直滚动的距离 ele.scrollTop

测试的时候，先将页面设置的大一点，能看到滚动条：

当滚动条滚动的时候，输出滚动的距离：

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的属性：

回顾

1. for

for(初始值;条件;增量){

//循环体

}

1. while

while(条件){

//循环体

}

1. do-while

do{

//循环体

}while(条件)

1. for-in

for(var 变量 in 数组){

//循环体

}

1. 注意：切记不能出现死循环
2. 跳转语句
   1. Break：中断循环
   2. Continue：跳出当前循环，进入下一个循环

函数

1. 函数就是代码块，可以多次调用，很容易实现模块化编程。
2. 函数也叫方法（其实函数和方法有一点点的区别，在面向对象中去讲解，目前我们认为他们是一样的）。
3. 函数分为预定义函数和自定义函数
4. 自定义函数的语法

function 函数名([参数…]){

//函数体

}

1. 参数分为形式参数（形参）和实际参数（实参）。形参只起一个形式的作用，没有具体的值，只是告诉调用者调用的时候传递几个参数，在定义函数的时候使用。实际参数是传递给函数的具体的值，在调用函数的时候使用。

1. 通过函数名来调用函数

函数的预加载

函数有预编译（预加载）的过程，可以实现调用在前，声明再后。在编译的时候先把函数编译好放在内存中，在执行JS的时候函数其实已经编译好了，所以直接调用就可以了。

多学一招：不只是函数可以预加载，只要先声明的都可以预加载。

提醒一下：在有的资料上也说变量不能预加载，原因是只是声明了空间，并没有将值加载进入。有的资料上称为“预编译”。

思考：形参和实参个数不一样会怎么样？

总结：

1. 少传递的参数是undefined
2. 多传递的参数函数中接受不到。

函数的调用

函数是通过函数名来调用的

一般函数的调用要结合“事件”来调用

调用的方式：

方法一（通过HTML标签调用）：<标签 事件=”函数名()”/>

方法二（JS调用）：对象.事件=函数

方法一：

方法二：

事件

事件和事件处理

事件：以“on”开头的都是事件，每个事件后面都有“事件处理”，事件处理一般是由函数来担当。

<标签 事件=’事件处理[函数]’>

常用的事件

1. onclick：当鼠标点击的时候
2. onfocus：当获得焦点的时候
3. onblur：当失去焦点的时候
4. onchange：发生改变的时候
5. onkeydown：当键盘按键按下去的时候
6. onkeyup：当键盘的键抬起的时候
7. onmouseover：当鼠标滑过的时候
8. onload：当加载的时候

例题

1. 字符串.substr(start [, length ])
2. 字符串.substring(start, end)

代码如下

<script type=”text/javascript”>

function fun_focus(){ //得到焦点

if(frm.card.value==’请注意格式:10XXXXXX’)

frm.card.value=”;

}

function fun_blur(){ //失去焦点

if(frm.card.value==”)

frm.card.value=’请注意格式:10XXXXXX’;

else{ //判断输入值的格式是否正确

var card=frm.card.value;

if(card.length!=8){ //卡号不是8位

alert(‘卡号是8位的,你输入的是’+card.length+’位’);

}else{

if(card.substr(0,2)!=’10’){

alert(‘卡号必须是”10″开头’);

}else{

alert(‘卡号正确’);

}

}

}

}

</script>

<form name=’frm’ action=””>

卡号：<input type=”text” name=”card” value=’请注意格式:10XXXXXX’ onfocus=’fun_focus()’ onblur=’fun_blur()’>

</form>

匿名函数

没有名字的函数，

语法

function(){

//匿名函数

}

例题

匿名函数自调用

匿名函数的使用

return

作用：

1. 作用一：终止函数的执行

1. 作用二：返回数据

脚下留心：如果要返回多个数据，将多个数据放到数组中返回，不能写多个return;

应该这样写：

使用类型函数进行类型的获取或转换

在计算机内部，所有的数据都可以转成布尔值。转换规律：

1、数字和布尔值转换规律： 0为false，非0为true

2、字符串和布尔值转换规律：空字符串为false，非空字符串为true

我们也可以通过类型函数显式转换

String()：转成字符串

Boolean()：转成布尔型

Number()：转成数字型

typeof 获取数据类型

值传递和引用传递

函数中参数的传递有两种方式，值传递，引用传递（传递地址）

分析如下代码执行过程（值传递）

第一步：将保存10的空间的地址付给x。（x保存的是10的地址）

第二步：将10复制一份，将10的副本的地址付给y

分析如下代码执行过程（地址传递）

总结：只要是基本数据类型都是值传递，复杂类型都是地址传递。

传递不确定参数

通过arguments关键字保存传递的参数数组

变量作用域

变量按照作用的范围不一样分为

1. 全局变量：在整个页面使用的变量
2. 局部变量：在函数内部使用的变量

思考：隐式声明局部变量

总结：在函数中，通过var声明的变量是局部变量，不用var声明的变量在全局变量。

JS嵌入到网页的方法

方法一：内嵌引入，直接将函数体写到事件处理中

方法二：内部引入：在HTML页面的内部通过<script>开头，</script>结束

方法三：外部文件引入

第一步：创建JS文件，并在JS文件中写入代码

第二步：在HTML中引入外部的JS文件

具有特殊含义的字符

“”：字符串

‘’：字符串

JS换行 \n （new）

JS回车 \r （return）

制表位： \t

转义字符（\）

作用：将具有特殊含义的字符转成普通字符。

对象

能够了解对象的概念以及对象的分类

对象是属性（变量）和方法（函数）的组合。

调用对象的属性： 对象.属性

调用对象的方法: 对象.方法()

JavaScript三类对象

1. HTML对象：就是HTML标签
2. 脚本对象
3. 浏览器对象

作业题

计算器

<script type=”text/javascript”>

function cal(op){

var num1=frm.num1.value;

var num2=frm.num2.value;

if(num1==” || isNaN(num1) || num2==” || isNaN(num2))

return; //不是数字就终止执行

num1=parseFloat(num1); //转换层数字类型

num2=parseFloat(num2);

switch(op){

case ‘+’:

frm.result.value=num1+num2;

break;

case ‘-‘:

frm.result.value=num1-num2;

break;

case ‘*’:

frm.result.value=num1*num2;

break;

case ‘/’:

frm.result.value=num1/num2;

break;

}

}

</script>

<form action=”” name=’frm’>

第一个数: <input type=”text” name=”num1″ id=””> <br>

第二个数：<input type=”text” name=”num2″ id=””> <br>

<input type=”button” value=” + ” onclick=”cal(‘+’)”>

<input type=”button” value=” – ” onclick=”cal(‘-‘)”>

<input type=”button” value=” * ” onclick=”cal(‘*’)”>

<input type=”button” value=” / ” onclick=”cal(‘/’)”> <br>

结果：<input type=”text” name=”result” id=””>

</form>

去字符串的空格

思路：声明一个变量用来保存结果字符串，遍历循环字符串，如果不是空格就保存到变量中。最后这个变量就是去掉空格的字符串。