1 JS内置对象

Arguments：只在函数内部定义，保存了函数的实参

Array：数组对象

Date：日期对象，用来创建和获取日期

Math：数学对象

String：字符串对象，提供对字符串的一系列操作

1.1 String

• charAt()　　　　　 　　　　返回指定索引的位置的字符 
• indexOf() 　　　　  　　　　从前向后检索字符串，看是否含有指定字符串
• lastIndexOf()　　　 　　　　从后向前检索字符串，看是否含有指定字符串
• concat()　　 　　　　　　　连接两个或多个字符串
• match()　　     　　　　　　使用正则表达式模式对字符串执行查找，并将包含查找结果最后结果返回
• replace()　　　　　　　　　替换一个与正则表达式匹配的子串
• search()　　　　　　　　　 检索字符串中与正则表达式匹配的子串。如果没有找到匹配，则返回 -1。 
• slice（start，end） 　　　　根据下表截取子串 
• substring（start，end）　　 根据下表截取子串 
• split()　　　　　　　　　　  根据指定分隔符将字符串分割成多个子串，并返回素组
• substr(start，length)　　　　根据长度截取字符串 
• toUpperCase()　　　　　　 返回一个字符串，该字符串中的所有字母都被转化为大写字母。 
• toLowerCase()　　　　　　 返回一个字符串，该字符串中的所有字母都被转化为小写字母。

1.2 Math 

• ceil()　　　　向上取整。
• floor()　　　  向下取整。
• round()　　　四舍五入。
• random()　　取随机数。

1.3 Date 

• getDate函数：　　　　　　返回日期的“日”部分，值为1～31。
• getDay函数：　　　　　　 返回星期，值为0～6，0表示星期日。
• getHours函数：　　　　　 返回日期的“小时”部分，值为0～23。
• getMinutes函数：　　　　  返回日期的“分钟”部分，值为0～59。
• getMonth函数：　　　　　 返回日期的“月”部分，值为0～11。
• getSeconds函数：　　　　 返回日期的“秒”部分，值为0～59。
• getTime函数：　　　　　　返回系统时间。
• getTimezoneOffset函数：　返回此地区的时差(当地时间与GMT格林威治标准时间的地区时差)，单位为分钟。
• getYear函数：　　　　　　返回日期的“年”部分。返回值以1900年为基数，如1999年为99。
• parse函数：　　　　　　　返回从1970年1月1日零时整算起的毫秒数(当地时间)
• setDate函数：　　　　　　设定日期的“日”部分，值为0～31。 
• setHours函数：　　　　　  设定日期的“小时”部分，值为0～23。
• setMinutes函数：　　　　  设定日期的“分钟”部分，值为0～59。
• setMonth函数：　　　　　  设定日期的“月”部分，值为0～11。其中0表示1月，...，11表示12月。
• setSeconds函数：　　　　 设定日期的“秒”部分，值为0～59。
• setTime函数：　　　　　　设定时间。时间数值为1970年1月1日零时整算起的毫秒数。 
• setYear函数：　　　　　　设定日期的“年”部分。
• toGMTString函数：　　　　转换日期成为字符串，为GMT格林威治标准时间。
• setLocaleString函数：　　   转换日期成为字符串，为当地时间。 
• UTC函数：　　　　　　　   返回从1970年1月1日零时整算起的毫秒数(GMT)。

2 对象 

在 JavaScript中，几乎所有的事物都是对象。

可以说 "JavaScript 对象是变量的容器"。

但是，我们通常认为 "JavaScript 对象是键值对的容器"。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为 对象属性。

var person = {firstName:"John",lastName:"Doe",age:50,eyeColor:"blue"
};

对象键值对的写法类似于：

• PHP 中的关联数组
• Python 中的字典
• C 语言中的哈希表
• Java 中的哈希映射
• Ruby 和 Perl 中的哈希表

2.1 对象的创建 

2.1.1 字面量形式创建

var Person = {name:'Nike';age:29;  
}

2.1.2 通过new Object对象创建

var Person = new Object();
Person.name = 'Nike';
Person.age = 29;

2.1.3 通过Object对象的create方法创建

var obj2 = {name: "zhangsan",age: 18
};
var obj5 = Object.create(obj2);

2.2 对象的操作

获取对象的属性

        对象名.属性名;

设置对象的属性（如果属性存在，则修改属性值；如果属性不存在，则添加新的属性值）

        对象名.属性名 = 值;

2.3 对象的序列化和反序列化 

（1）序列化

即js中的Object转化为字符串

1.使用toJSONString

var last=obj.toJSONString(); 

2.使用stringify

var last=JSON.stringify(obj); 

（2）反序列化

即js中JSON字符串转化为Object

1.使用parse

var obj = JSON.parse(data); 

2.使用parseJSON

var obj = data.parseJSON(); 

2.4 this

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

• 在方法中，this 表示该方法所属的对象。
• 如果单独使用，this 表示全局对象。
• 在函数中，this 表示全局对象。
• 在函数中，在严格模式下，this 是未定义的(undefined)。
• 在事件中，this 表示接收事件的元素。
• 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

3 JS事件 

JS可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。

3.1 事件中的几个名词 

事件源：谁触发事件

事件名：触发了什么事件

事件监听：谁管了这个事情，谁监视？

事件处理：发生了怎么办

3.2 HTML事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

• 页面加载时触发事件
• 页面关闭时触发事件
• 用户点击按钮执行动作
• 验证用户输入内容的合法性
• 等等 ...

可以使用多种方法来执行 JavaScript 事件代码：

• HTML 事件属性可以直接执行 JavaScript 代码
• HTML 事件属性可以调用 JavaScript 函数
• 你可以为 HTML 元素指定自己的事件处理程序
• 你可以阻止事件的发生。
• 等等 ...

3.3 常见的几个HTML事件 

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

3.4 常用事件类型 

onload：当页面或图像加载完成后立即触发

onblur：元素失去焦点

onfocus：元素获得焦点

onclick：鼠标点击某个对象

onchange：用户改变域的内容

onmouseover：鼠标移动到某个元素上

onmouseout：鼠标从某个元素上离开

onkeyup：某个键盘的键被松开

onkeydown：某个鼠标的键被按下 

3.5 事件流 

定义：
1.事件流描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。
2.事件就是用户或浏览器自身执行的某种动作。诸如click(点击)、load(加载)、mouseover(鼠标悬停)。
3.事件处理程序响应某个事件的函数就叫事件处理程序(或事件侦听器)。

事件冒泡

IE的事件流叫事件冒泡，即事件开始时由最具体的元素(文档中嵌套层次最深的节点)接收，然后逐级向上传播到较为不具体的节点。

事件捕获

Netscape团队提出的另一种事件流叫事件捕获，事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。

DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段==>处于目标阶段==>事件冒泡阶段。首先发生的是事件捕获阶段，为截获事件提供了机会。然后是实际的目标接收事件。最后一个阶段是冒泡阶段。

3.6 事件处理程序

说起事件处理程序，需要首先理解什么是事件，事件就是用户或浏览器自身执行的某种动作。例如click，load等事件。

响应某个事件的函数就叫做事件处理程序（别名：事件侦听器）。 事件处理程序的名字是以"on"开头，所以像click的事件处理程序就是"onclick"。

load的事件处理程序就是onload。

每个事件处理程序都有一个event变量，也就是事件对象。

JS有HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序。

3.7 示例代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>案例3</title></head><!-- onload事件 --><body onload="loadWindow()"><!-- onclick事件：点击事件onmouseout：鼠标移开事件--><button onclick="test()" onmouseout="outButton()">按钮</button><!-- 常用事件类型 --><!--onblur事件：失焦事件onfocus事件：聚焦事件-->姓名：<input type="text" onblur="aa()" onfocus="bb()" /><!--onchange事件：元素的值发生改变时触发的事件-->城市：<select onchange="changeCity()"><option>北京</option><option>上海</option><option>深圳</option></select><hr><!-- HTML事件处理程序 --><button type="button" onclick="alert('hello')">按钮1</button><!-- DOM0级事件 --><button type="button" id="btn2">按钮2</button><!-- DOM2级事件 --><button type="button" id="btn3">按钮3</button></body><script type="text/javascript">function loadWindow() {console.log("文档加载完毕");}function test() {console.log("按钮被点击了");}function aa() {console.log("失去焦点了");}function bb() {console.log("聚焦了");}function changeCity() {console.log("值改变了");}function outButton() {console.log("鼠标离开按钮了")}/* DOM0级事件 *///1.事件源：获取事件源var btn2 = document.getElementById("btn2");console.log(btn2);//2.事件类型：给事件源绑定事件 3.执行函数：事件触发后要执行的代码btn2.onclick = function() {console.log("按钮2被点击了");}btn2.onmouseout = function() {console.log("鼠标离开按钮2了")}/* DOM2级事件 *///获取事件源：获取事件源（按钮）var btn3 = document.getElementById("btn3");//添加事件监听btn3.addEventListener("click", function() {console.log("按钮3被点击了");}, false);btn3.addEventListener("click", function() {console.log("按钮3被点击了2");}, false);btn3.addEventListener("mouseout", btnFunction, false);function btnFunction() {console.log("鼠标离开按钮3了");}</script>
</html>