根据上一篇博客思路，js从对象、函数、DOM和BOM再到jQuery入手。今天总结前三者，最后的DOM还没学完，再更。
一、js对象
(一)js对象创建方法：
1、使用对象文字–属性：值(最常用)
2、使用关键词new
3、对象构造器，创建构造类型的对象
4、ECMAScript5中函数Object.create()
（二）访问对象属性
person.name
person[“name”]
x=name;person[x]
person.nationality = “English”;添加属性
delete person.age;删除属性和值
（三）方法
构造器函数，即在对象中，使用函数来创建属性
language: function(){ return this.age}
（四）对象访问器get和set
get lang() {
return this.language;
}
set先在对象中创建属性，值为空
在对象外赋值
language : “”,
set lang(lang) {
this.language = lang;
};
// 使用 setter 来设置对象属性：
person.lang = “en”;
（五）对象构造器
先定义function函数作为对象构造器函数（一般函数名首字母大写），再创建对象的时候，调用function方法 function Person{}
使用new来创建对象， bob=new Person{}; alice=new person{}
注意：不能为已有的对象构造器添加新属性（报错undefined）；
如需向构造器添加一个新属性，则必须把它添加到构造器函数，或者使用prototype，即Person.prototype.nationality = “English”;
了解：ECMAScript添加或更改对象属性值Object.defineProperty(person, “year”, {value:”2008”});
1 | <!DOCTYPE html> |
2 | <html lang="en"> |
3 | <head> |
4 | <meta charset="UTF-8"> |
5 | <title>Title</title> |
6 | </head> |
7 | <body> |
8 | <p id="demo"></p> |
9 | <script> |
10 | var person=new Object(); |
11 | person.name = "bob"; |
12 | var person2 = { |
13 | name:"Alice", |
14 | language:"en", |
15 | get lang () { |
16 | return this.language; |
17 | } |
18 | } |
19 | |
20 | document.getElementById("demo").innerHTML= "His name is "+person.name; |
21 | //document.write("His name is "+person.name); |
22 | |
23 | var obj = { |
24 | counter : 0, |
25 | get reset() { |
26 | this.counter = 3; |
27 | }, |
28 | get increment() { |
29 | this.counter++; |
30 | }, |
31 | get decrement() { |
32 | this.counter--; |
33 | }, |
34 | set add(value) { |
35 | this.counter += value; |
36 | }, |
37 | set subtract(value) { |
38 | this.counter -= value; |
39 | } |
40 | }; |
41 | |
42 | // 操作计数器： |
43 | obj.reset; |
44 | obj.add = 5; |
45 | obj.subtract = 1; |
46 | obj.increment; |
47 | obj.decrement; |
48 | document.getElementById("demo").innerHTML=obj.counter; |
49 | |
50 | </script> |
51 | |
52 | </body> |
53 | </html> |
二、函数
(一)声明函数的几种方式：
1、函数声明function myf{return ab；} 最常见，常用，结尾一般不加分号
2、函数表达式，匿名函数 var myf= function(a,b){return ab}； 在结尾加分号
3、Function() 构造器 通过new var myF = new Function(“a”, “b”, “return a * b”); 一般不用new
4、箭头函数（ES6） const x=(x,y) =>x*y;
（二）函数参数
函数不对参数进行检查
如果调用参数时省略了参数（少于被声明的数量），则丢失的值被设置为：undefined。
如果参数太多，使用argument来调用
（三）函数call()方法，使一个对象能调用另一个对象的方法
var person = {
fullName: function() {
return this.firstName + “ “ + this.lastName;
}
};
var person1 = {
firstName:”Bill”,
lastName: “Gates”,
};
person.fullName.call(person1); // 将返回 “Bill Gates” person的方法用于person1
person.fullName.call(person1, “Seattle”, “USA”); call带的参数根据方法来
（四）apply（）方法同call，区别：apply带参数时以数组形式带
person.fullName.apply(person1, [“Oslo”, “Norway”]);
注：js中对数组没有max(),采用Math.max()
闭包：嵌套函数中的子函数可以访问父函数的变量 ，子函数的变量相当于是私有的
三、DOM（文档对象模型）&BOM
（一）简介
DOM文档对象模型，通过DOM，js能创建动态html。简单说，HTML DOM能增删改查HTML元素。
DOM方法：在HTML上执行的动作，各种函数；DOM属性，改变元素的值。
如getElementById方法，innerHTML属性。
（二）document
DOM文档对象，通过document的方法对元素增删改查。
增：
document.createElement(“demo2”)创建 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.write(text) HTML 输出显示
document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件处理程序
删：
document.removeChild(element) 删除 HTML 元素
改：
element.attribute = new value 改变 HTML 元素的属性值
document.replaceChild(element) 替换 HTML 元素
查：
document.getElementById(id) 通过元素 id 来查找元素，（最常用）
document.getElementsByTagName(name) 通过标签名来查找元素（a，p，h这些）
document.getElementsByClassName(name) 通过类名来查找元素
document.querySelectorAll(“p.class1”); 通过 CSS 选择器查找元素，
（三）修改HTML元素
document.write()，千万不要在文档加载后使用 document.write()，这么做会覆盖文档；
document.getElementById(id).innerHTML = 新内容
document.getElementById(id).attribute = 新值，
如document.getElementById(“myImage”).src = “landscape.jpg”;
document.getElementById(“p2”).style.color = “blue”;
（四）事件
onclick点击按钮，可以字体颜色变化等
onmouseover和onmouseout：鼠标移到、移开该位置
1 | <!DOCTYPE html> |
2 | <html lang="en"> |
3 | <head> |
4 | <meta charset="UTF-8"> |
5 | <title>DOM</title> |
6 | <style type="text/css"> |
7 | #container{ |
8 | width:400px; |
9 | height: 400px; |
10 | position: relative; |
11 | background-color: darkcyan; |
12 | } |
13 | #small{ |
14 | width: 50px; |
15 | height: 50px; |
16 | position: absolute; |
17 | background-color: coral; |
18 | } |
19 | </style> |
20 | </head> |
21 | <body> |
22 | <h1 id="id1">我是标题</h1> |
23 | <button type="button" onclick=document.getElementById("id1").style.color="red">点我变色</button> |
24 | <button type="button" onclick="move()">点我移动</button> |
25 | |
26 | <div id="container"> |
27 | <div id="small"> |
28 | </div> |
29 | </div> |
30 | <p id="time1"></p> |
31 | <button type="button" onclick="displayDate()">点我显示时间</button> |
32 | <script> |
33 | function move() { |
34 | var elem=document.getElementById("small"); |
35 | var pos=0; |
36 | var id=setInterval(frame, 5); |
37 | function frame() { |
38 | if (pos == 150){ |
39 | clearInterval(id); |
40 | }else{ |
41 | pos++; |
42 | elem.style.top = pos+ "px"; |
43 | elem.style.left = pos+ "px"; |
44 | } |
45 | } |
46 | } |
47 | function displayDate() { |
48 | document.getElementById("time1").innerHTML = Date(); |
49 | } |
50 | |
51 | </script> |
52 | |
53 | </body> |
54 | </html> |
（五）节点
DOM中元素节点不包含文本
var x= document.getElementById(“demo”).innerHTML;innerHTML=firstChild.nodeValue,
childNodes[0].nodeValue第一个子节点
对节点的操作：增删改查
增：var element = document.getElementById(“div1”);
element.appendChild(para);在div1中增加一个p节点
element.insertBefore(para, child);在div中，前面插入一个p
删：parent.removeChild(child);parent是div1，child是一个p
child.parentNode.removeChild(child);利用parentNode属性找到父，再删子
改：parent.replaceChild(para, child);
查：document.getElementById()
节点列表 var myNodeList = document.querySelectorAll(“p”);
通过querySelectorAll() chileNodes得到节点列表情况
for (i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.backgroundColor = “red”;
}改变所有p节点颜色
（六）BOM
Browser Object Model浏览器对象模型：允许js与浏览器对话
获取浏览器宽和高，适用所有浏览器
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;