一、 什么是javaScript对象？
对象是javaScript中最重要的API。
javaScript包含多种对象有：内置对象、外部对象（window对象、dom对象）、自定义对象。
二、 如何使用对象？
对象包含属性和方法。
访问对象属性：对象.属性
访问对象方法：对象.方法（）
三、 常用内置对象
JS中常用内置对象有：String对象、Number对象、Boolean对象、Array对象、Math对象、Date对象、RegExp对象、Function对象。
1. String对象
（1）创建String对象有两种方式：
var str1=”hello word”;
var str2=new String(“hello word”);
（2）String对象的属性：
str.length;
（3）String对象的常用方法
##大小写转换方法
str1.toLowerCase()、str1.toUpperCase()
##获取指定字符
srt1.charAt(index):返回指定位置的字符
str1.charCodeAt(index)：返回指定位置字符的Unicode编码。（index表示字符位置）
##查询指定字符串
str1.indexOf(findstr,[index])、str1.lastIndexOf(findstr,[index])
PS:findstr表示要查询的字符串，lastIndexOf表示从最后开始找起，如果没有找到则返回-1.
##获取子字符串(含头不含尾，下标均是从0开始)
str1.substring(start,[end])
##替换子字符串
str1.replace(findstr,tostr)
PS:findstr为要找的子字符换，tostr替换为的字符串，返回替换后的字符串。
##拆分子字符串
Str1.split(bystr,[howmany])
PS:bystr分割用的字符串，howmany指定返回的数组的最大长度，可以省略，返回分割后的字符串。
注意：字符串是不可变的，一些可以修改的字符串的API，实际上是返回一个新的字符串，并不改变原始字符串.
2.Number对象
（1）Number是数值对象，创建Number对象如下：var a=1.1;
（2）Number对象的常用方法
##toFixed(num):转换为字符串，并保留小数点后一定位数。如果必要该数字可以被舍弃，也可以用0补足。
3.Array对象
##JS中的数组均是Object，如var a1=[1,25,"男朋友",true];
数组的长度是可变的。
##JS中的数组可以像集合一样操作
var a2=new Array();
a2.push(8);
a2.push(false);
console.log(a2[2]);
##访问数组元素console.log（a1[0]）
##数组中元素倒转：a1.reverse();
##数组排序*重点*：a1.sort();默认按照字符串的Unicode编码排序,可以通过替换比较方法影响排序结果。(一般比较方法无需复用，采用匿名方法)
举例如下：
a1.sort(Function(a,b){
return a-b;
});
Console.log(a1);
4.Math对象
Math对象用于执行数学任务，无需创建，直接使用即可。如下所示：
console.log(Math.PI);console.log(Math.E);
console.log(Math.round(Math.PI));
PS：Math.round（）表示为取整。
5.Date对象
Date对象用于处理日期和时间，封装了系统时间毫秒数。
##创建Date对象(Date对象会自动把当前的日期和时间保存为初始值)
Datedate1=new Date();
Datedate2=new Date(“2015/1/1 1:12:11”);
##Date对象常用方法
读写时间毫秒数：date1.getTime()、date1.setTime(毫秒)
读写时间分量：
date1.getDate()、date1.getDay()、date1.getFullYear()等。
date1.setDate()、date1.setDay()、date1.setFullYear()等。
转化为字符串：
toString()、toLocaleTimeString()、toLocaleDateString()
6.RegExp对象
RegExp对象表示正则表达式,作用也就是用来检查字符串。
##创建RegExp对象
VarrgExp=new RegExp(“pattern”,[“flags”]);
VarrgExp=/pattern/flags;
PS:flags的标识有两种
（1） g:设定当前匹配为全局模式。
（2） i:忽略匹配中的大小写检测。
注意：全局模式（第N次调用则找出第N个匹配的部分），非全局模式（找出首次匹配的部分）。
##RegExp对象的常用方法
RegExpObject.test(string)*重点*
如果字符串string中含有与RegExpObject匹配的文本，则返回true,否则返回false.
reg.exec(str):检测字符串中指定的值，返回指定的值。
reg.test(str):检测字符串中指定的值，返回false或true.
##String对象与正则表达式（regexp代表正则表达式或字符串）
--x.replace(regexp,tostr),返回替换后的结果。
--x.match(regexp)，返回匹配字符串的数组。
--x.search(regexp)，返回匹配字符串的首字符位置索引。
7.Function对象
JS中的函数就是Function对象。
函数名就是指向Function对象的引用，使用函数名可以访问函数对象，函数名（）是调用函数。
##定义函数对象
函数的返回值默认为undefined,也可以使用return返回具体的值。
##函数的参数
JS的函数没有重载。
调用时只要函数名一样，无论传入多少个参数，调用的都是同一个函数。
没有接收到实参的参数值是undefined.
所有的参数传递给arguments数组对象。
##arguments对象*重点*..
Arguments是一种特殊的对象，在函数代码中，表示函数的参数数组。
在函数代码中，可以使用arguments访问所有参数。
arguments.length:函数的参数个数
arguments[i]:第i个参数
可以利用arguments实现可变参数的函数。
##eval函数*重点*
eval函数用于计算表达式字符串，或者用于执行字符串中的javascript代码。
只接受原始字符串作为参数。
如果函数中没有合法的表达式或语句，则抛出异常。
小案例
1.登录页面的代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录页面</title> <style> .ok { color:green; border:1px solid green; } .error { color:red; border:1px solid red; } </style> <script> //校验账号的格式 function check_code() { console.log(1); //获取账号 var code=document.getElementById("code").value; //校验其格式（\w 字母或数字或下划线） var span=document.getElementById("code_msg"); var reg=/^\w{6,10}$/; if(reg.test(code)){ //通过，增加OK样式 span.className="ok"; return true; }else{ //不通过，增加error样式 span.className="error"; return false; } } </script> <script> //校验密码 function check_pass() { //获取密码 var pass=document.getElementById("pass").value; //校验 var span=document.getElementById("pass_msg"); var reg=/^\w{8,20}$/; if(reg.test(pass)){ //通过，增加OK样式 span.className="ok"; return true; }else{ //没通过，增加error样式 span.className="error"; return false; } } </script> </head> <body> <!--check_code() && check_pass()，中的与&&会发生短路，为防止短路，可以利用一个boolean值中的true值为1，false值为0进行改进--> <form action="http://www.tmooc.cn" οnsubmit="return check_code()+check_pass()==2;"> <p> 账号： <input type="text" id="code" οnblur="check_code();"/> <span id="code_msg">6-10位字母、数字、下划线</span> </p> <p> 密码： <input type="password" id="pass" οnblur="check_pass();"/> <span id="pass_msg">8-20位字母、数字、下划线</span> </p> <p><input type="submit" value="登录"/></p> </form> </body> </html>
补充：onsubmit，表单提交事件，是form的事件，当点击表单内的submit按钮时触发，在该事件内返回true,则提交成功，默认就是返回true,若返回false,则不提交。
网页效果显示：
2.计算器代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title> <script> function cal() { //获取文本框 var input=document.getElementById("num"); //获取span var span=document.getElementById("jg"); //获取框内的算式 var ss=input.value; try { var result=eval(ss); //计算成功，将结果写入文本框input span.innerHTML=result; }catch(e) { //出错时给予提示 span.innerHTML="Error"; } } </script> </head> <body> <input type="text" id="num"/> <input type="button" value="=" οnclick="cal();"/> <span id="jg"></span> </body> </html>
网页效果显示：
四、 外部对象
浏览器提供的对象，浏览器的API，用来操作浏览器。
1.BOM(Browser Object Model)：
#浏览器对象模型，用来访问和操纵浏览器窗口，使JAVAScript有能力与浏览器“对话”。（浏览器与JS是两个不相关的内容，JS依附于浏览器上）
#通过使用BOM，可移动窗口、更改状态栏文本，执行其他不与页面内容发生直接联系的操作。
2.DOM（Document Object Model）:
#文档对象模型，用来操作文档。定义了访问和操作HTML文档的标准方法。
#应用程序通过对DOM树的操作，来实现对HTML文档数据的操作。
BOM与DOM关系如下图示：
PS:window代表浏览器，它的子对象（属性）代表浏览器的不同部位。
外部对象分为两个部分BOM与DOM，其中BOM包含DOM.
3.window对象（BOM）
window表示浏览器窗口，所有JAVAScript全局对象、函数以及变量均自动成为window对象的成员。
##常用属性：
#history:浏览过窗口的历史记录对象。
history对象包含用户（在浏览器窗口中）访问过的URL，常用方法：
--back()
--forward()
--go(num):num可以取正数或者负数，正数表示前进，负数表示后退。
#location:窗口文件地址对象。
location对象常用于获取和改变当前浏览器的网址。
href:当前窗口正在浏览器的网页地址,也可以用于修改网址。
--reload():重新载入当前网址，就像按下刷新按钮。
PS：location与超链接都可以改变当前窗口，两者的区别是---location改变当前窗口时可以添加条件，比如可以在页面上显示“您确定要离开此页面吗？”，而超链接不能添加条件，不灵活，一般建议采用location。
显示小代码：
functiontarena() {
var b=confirm("您确定要离开此页面吗？");
if(b){
//确认为true时，跳转。
//location=地址栏
//修改href就是修改网址。
location.href="http://www.tmooc.cn";
}
}
#screen:当前屏幕对象。
screen对象包含有关客户端显示屏幕（比如说ipad、笔记本电脑、手机）的信息，常用于获取屏幕的分辨率和色彩，常用属性：
--width/height
--availWidth/availHeight
#navigator：浏览器相关信息。
常用于获取客户端浏览器和操作系统信息。
Navigator.userAgent;
##常用方法：
(1)alter(str),提示对话框，显示str字符串的内容。
(2)confirm()，确认对话框，显示str字符串的内容，按确定按钮返回true，其他操作返回false.
(3)定时器*重点*
多用于网页动态时钟、制作倒计时、跑马灯效果等。分为两种：
#周期性定时器：以一定的间隔执行代码，循环往复。
setInterval(exp,time)：周期性触发代码exp.返回已经启动的定时器对象。
exp为执行语句，time为时间周期，单位为毫秒。
clearInterval(tID)：停止启动的定时器。
tID：启动的定时器对象。
小案例：动态时钟代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态时钟</title> <style> #clock { width:150px; border:1px solid red; line-height:30px; height:30px; font-size:20px; text-align:center; } </style> <script> //id为空时表示未启动。 var id=null; function ks(){ //若id非空，表示已启动，不要再次启动了 if(id){ return; } id=setInterval(function(){ var date=new Date(); var now=date.toLocaleTimeString(); var p=document.getElementById("clock"); p.innerHTML=now; },1000); } function zt(){ clearInterval(id); //将id重置为null,便于下次启动时做判断 id=null; } </script> </head> <body> <p> <input type="button" value="开始" οnclick="ks();"> <input type="button" value="暂停" οnclick="zt();"> </p> <p id="clock"></p> </body> </html>
网页显示如下图：
#一次性定时器：在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
setTimeout(exp,time):一次性触发代码exp.返回已经启动的定时器。
exp为执行语句，time为时间间隔，单位为毫秒。
clearTimeout(tID)：停止启动的定时器。
小案例：发送消息代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>发送消息</title> <style> #msg { width:150px; height:30px; line-height:30px; border:1px solid red; font-size:20px; text-align:center; } </style> <script> //默认id为null var id=null; function fs() { var p=document.getElementById("msg"); p.innerHTML="正在发送..."; //启动定时器后id非空 id=setTimeout(function(){ p.innerHTML="发送成功"; //发送成功是id为null id=null; },3000); } function cx(){ //id非空时表示已启动定时器但未完成，只有此时才能停止定时器。 if(id){ var p=document.getElementById("msg"); p.innerHTML="已撤销"; clearTimeout(id); } } </script> </head> <body> <p> <input type="button" value="发送" οnclick="fs();"/> <input type="button" value="撤销" οnclick="cx();"/> </p> <p id="msg"></p> </body> </html>
网页显示如下图：
4.document对象
4.1 DOM(文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型。
DOM节点树（DOM模型被构造为对象的树，这棵树的根就是document对象）
#DOM操作：查找节点、读取节点信息、修改节点信息、创建新节点、删除节点。
4.2 读取、修改
##读取节点的名称和类型
#nodeName:节点名称
--元素节点和属性节点：标签或属性名称。
--文本节点：永远是#text.
--文档节点：永远是#document
#nodeType:节点类型（返回数值）
元素节点返回1，属性节点返回2，文本节点返回3，注释节点返回8，文档节点返回9.
##读写节点的内容（<x>这就是内容</x>),双标签中间的文本。
#innerHTML：设置或获取位于对象起始和结束标签内的HTML（带标签）。
#innerText:设置或获取位于对象起始和结束标签内的文本（不带标签）。
##读写节点的属性
#通用API,任何版本浏览器都支持
getAttribute()方法：根据属性名称获取属性的值。
setAttribute(),removeAttribute().
#新的API，低版本的浏览器不支持（只要增和改）
节点.属性名（class例外，需要写className）
小案例：图片轮播代码演示如下
PS：凡是在funciton外的方法，读取时均是按照顺序读取。
4.3查询
##通过id查询（标准）
document.getElementById()，通过制定的ID来返回元素节点，忽略文档的结构，如果ID错误，则返回null。
##根据标签名查询（标准）
#在整个页面上根据标签名查询节点。
document.getElementsByTagName(“li”),
#在某节点下根据标签名查询其子节点。
ul. getElementsByTagName(“li”),
PS:”li”为要查询的子节点。
##根据name查询（标准）
document.getElementsByName().
##根据class查询某节点（非标准）
getElementsByClassName(),
##根据层次（关系）查询
#查询父亲（标准）
parentNode
#查询孩子（标准）
childNodes.
getElementsByTagName(“li”)，建议使用此根据标签名查询孩子的方法。
#查询孩子（非标准）
children.
#查询兄弟（标准）
//某节点.父亲.孩子[n]
jd.parentNode. getElementsByTagName(“li”)[1];
#查询兄弟（非标准）
jd.previousElementSibling;
jd.nextElementSibling;
4.4增删节点
##创建节点
document.createElement(“li”);
li为要创建的元素标签名称，返回新创建的节点。
##增加节点
#追加到所有子节点之后
parentNode.appendChild(newNode);新节点作为父节点的最后一个子节点添加。
#插入到某子节点之前
parentNode.insertBefore(newNode,refNode);refNode为参考节点，新节点位于此节点之前添加。
##删除节点
#父亲删孩子
node.removeChild(childNode);node为childNode的父节点。
#自己删自己（非标准）
（1）sz.parentNode.removeChild("sz");
（2）var tj=document.getElementById("tj");
tj.remove();
小案例：联动菜单代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>联动菜单</title> </head> <body> 省： <select id="province" οnchange="chg();"> <option value="-1">请选择</option> <option value="0">河北省</option> <option value="1">山东省</option> <option value="2">山西省</option> </select> 市： <select id="city"> <option>请选择</option> </select> <script> //模拟加载城市 function loadCities() { return [ ["石家庄","廊坊","保定"], ["济南","青岛","德州"], ["太原","大同","阳泉"] ]; } var cities=loadCities(); function chg() { //获取省份的下拉选 var sel1=document.getElementById("province"); //获取省份的序号 var pindex=sel1.value; //获取该省份对应的城市 var pcities=cities[pindex]; //先删除城市下拉选内所有的城市 var sel2=document.getElementById("city"); // //sel2.innerHTML="<option>请选择</option>"; var options=sel2.getElementsByTagName("option"); for(var i=options.length-1;i;i--){ sel2.removeChild(options[i]); } //再增加该省份的城市。 if(pcities){ for(var i=0;i<pcities.length;i++){ var opn=document.createElement("option"); opn.innerHTML=pcities[i]; sel2.appendChild(opn); } } } </script> </body> </html>
网页显示效果如下：
五、自定义对象
自定义对象是一种特殊的数据类型，由属性和方法封装而成。
---属性指与对象有关的值:对象名.属性名。
---方法指对象可以执行的行为或者可以完成的功能：对象名.方法名（）
1.创建自定义对象
（1）采用直接量（JSON"JavaScript Object Notation"是一种轻量级的数据交换格式）的方式创建自定义对象
名称需要使用“”引起来，多对定义之间使用，隔开，名称可以是属性。
function f1() { var stu= {"name":"zs","age":25,"work":function(){alert("我学Java")}}; alert(stu.name); alert(stu.age); //work的function方法无返回值，则不需要加alert。 stu.work(); }
（2）采用构造器创建对象
##采用自定义构造器创建对象（自定义了一个构造器Coder，然后每次写时都可以调用Coder构造器）
function f3() { var c=new Coder("lisi",26,function(){alert("我写Java")}); alert(c.name); alert(c.age); c.work(); } function Coder(name,age,work) { //this=创建出来的对象 //this.name给该对象声明一个属性 this.name=name; this.age=age; this.work=work; }
六、事件
1.事件概述
事件：指页面元素状态改变，用户在操作鼠标或者键盘时触发的动作。分为鼠标事件、键盘事件、状态改变事件。
event对象：事件触发后将会产生一个event对象。
事件属性：通过一个事件属性，可以在某个事件发生时对某个元素进行某种操作。
2.事件定义
（1）直接定义事件：在html属性定义中直接处理事件。
<input type="button" value="小苹果" οnclick="alert('小苹果 ');"/>
（2）后绑定事件//：在页面加载后执行，写在<body>的整个页面后。（过度的，仅需要了解）
（3）后绑定事件（onload）:onload是网页加载事件，在网页加载后自动触发。
为了便于格式的完美性，该段代码,放在<head>中的<script>标签中。
window.οnlοad=function() { //在这里写的代码相当于在body后一样 var c=document.getElementById("c"); c.οnclick=function() { alert("小姑娘"); } }
（4）取消事件
e.stopPropagation() e.cancelBubbule=true; e={"stopPropagation":function(){}} e.stopPropagation()/e.stopPropagation 对象的方法可以看做方法的属性 if(e.stopPropagation){ //如果写成e.stopPropagation(),则没有的话会报错，不带括号的属性没有的话不会报错。 e.stopPropagation(); }else{ e.cancelBubble=true; } } 3.event对象
##任何事件出发后都将产生一个event对象，event对象记录事件发生时的鼠标位置、键盘按键状态、触发对象等信息。
##获得event对象，使用event对象获得相关信息，如单击位置、触发对象等。
##常用属性：clientX,clientY,cancleBubble
##获取event对象，
在事件定义时，使用event关键字将事件对象作为参数传入方法。
<input type="button" value="DDD" οnclick="d(event);"/>
<input type="button" value="EEE" id="e"/>
window.οnlοad=function() { var ee=document.getElementById("e"); ee.οnclick=function(e) { //后绑定事件时，浏览器会自动传入event， //且该对象存在arguments第0个位置。 console.log(arguments[0]); console.log(e); } } function d(e) { console.log(e); alert(e.clientX+","+e.clientY); }
4.事件处理机制
（1）JS事件处理机制是：冒泡机制（JS的事件是由内向外触发的，触发到最外层为止）
（2）作用：不需要再子元素上定义N次事件，只需要在父元素上定义一次事件。
PS：在采用冒泡机制简化事件时，必须知道事件源（事件发生的源头“具体位置”），事件源可以通过事件对象获取。
案例：计算器代码如下
<!DOCTYPE html> <html> <head> <title>计算器</title> <meta charset="utf-8" /> <style type="text/css"> .panel { border: 4px solid #ddd; width: 192px; margin: 100px auto; /*border-radius: 6px;*/ } .panel p, .panel input { font-family: "微软雅黑"; font-size: 20px; margin: 4px; float: left; /*border-radius: 4px;*/ } .panel p { width: 122px; height: 26px; border: 1px solid #ddd; padding: 6px; overflow: hidden; } .panel input { width: 40px; height: 40px; border:1px solid #ddd; } </style> <script> window.οnlοad=function() { var div=document.getElementById("panel"); div.οnclick=function(e) { //console.log(e.srcElement||e.target); cal(e); } } function cal(e) { //获取事件源 var obj=e.srcElement||e.target; //只处理按钮（INPUT） if(obj.nodeName!="INPUT"){ return; } //判断按钮类型 var p=document.getElementById("screen"); if(obj.value=="C") { //清空 p.innerHTML=""; }else if(obj.value=="="){ //计算 try { var result=eval(p.innerHTML); p.innerHTML=result; }catch(ex){ p.innerHTML="Error"; } }else { //累加 旧的值 新的值 p.innerHTML=p.innerHTML+obj.value; } } </script> </head> <body> <div class="panel" id="panel"> <div> <p id="screen"></p> <input type="button" value="C"> <div style="clear:both"></div> </div> <div > <input type="button" value="7"> <input type="button" value="8"> <input type="button" value="9"> <input type="button" value="/"> <input type="button" value="4"> <input type="button" value="5"> <input type="button" value="6"> <input type="button" value="*"> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <input type="button" value="-"> <input type="button" value="0"> <input type="button" value="."> <input type="button" value="="> <input type="button" value="+"> <div style="clear:both"></div> </div> </div> </body> </html>
页面显示效果：
