web前端--JavaScript(三)对象、函数、DOM&BOM

根据上一篇博客思路,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 a
b}; 在结尾加分号
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中元素节点不包含文本教程 节点为title,教程要通过innerHTML访问
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;