根据上一篇博客思路,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;