JavaScript自定义对象

JS对象
利用function关键字声明对象,用new关键字创建对象。

内置对象
String/Array/Number/Math/JSON…

Window对象–代表浏览器中一个打开的窗口,了解一下即可,很多被UI替代

window.onload() 在浏览器加载完整个html后立即执行!
window.alert(“text”) 提示信息会话框
window.confirm(“text”) 确认会话框
window.prompt(“text”) 键盘输入会话框
window.event 事件对象
window.document 文档对象

Document对象–代表整个HTML文档,可用来访问页面中的所有元素

document.write() 动态向页面写入内容
document.getElementById(id) 获得指定id值的元素
document.getElementsByName(name) 获得指定Name值的元素

学会简单使用,后期被jQuery封装,在后期被Vue框架封装

自定义对象
(1)方式一:

声明对象:function Person(){}
创建对象:var p1 = new Person();
设置属性:p1.name = “张飞”; p1.age = 18;
设置方法:p1.run = function(){ alert(this.name+” : “+this.age); }
访问p1对象:
/* 自定义对象*/
function Person(){ } /* 定义对象*/
var p1 = new Person(); /* 创建对象*/
p1.name=”张三”;
p1.age=20;
console.log(p1);
p1.say = function(){ /* 定义函数*/
console.log(“haha”);
}
p1.say(); /* 函数调用*/
上面展示了js的强大!js的牛掰之处就在于,它的属性可以边写边创建,非常灵活,而java不行,必须先定义。

上面展示了js的强大!js的牛掰之处就在于,它的属性可以边写边创建,非常灵活,而java不行,必须先定义。

(2)方式二:

var p2 = {
“pname”:”李四”,
“page”:100,
“psay”:function(){
/* this使用p2里定义的 */
console.log(this.pname+this.page);
}
}
console.log(p2);
p2.psay(); /* 函数调用*/

1
2
3
4
5
6
7
8
9
10
11
DOM树的作用
组成
ECMAScript描述了javascript语言的语法和基本对象
文档对象模型DOM(Document Object Model)与HTML网页API接口
浏览器对象模型BOM(Browser Object Model),与浏览器进行交互的API接口
核心对象有:window浏览器窗口,navigator浏览器信息,location浏览器当前地址信息,history浏览器历史信息,screen用户屏幕信息。

 

DOM非常重要,实际开发更多通过js操作DOM对象实现对html页面的操作,BOM也用,比较少用。所以学习重点放在DOM上。

DOM树结构
DOM 是一项 W3C (World Wide Web Consortium) 标准,DOM(Document Object Model)文档对象模型为JS操作html文档所提供的一套API,通过这套API可以很方便的对html元素进行访问及增删改查操作。

 

Document对象
–获取对象: window.document
–调用方法:
getElementById(“元素的id的属性的值”)–返回1个元素
getElementsByName(“元素的name属性的值”)–返回多个元素(用数组)
getElementsByClassName(“元素的class属性的值”)–返回多个元素(用数组)
getElementsByTagName(“元素的标签名的值”)–返回多个元素(用数组)
write()–向文档写 HTML 表达式 或 JavaScript 代码
title–返回网页的标题
id–设置或返回元素的id
innerHTML–设置或返回元素的内容

1
2
3
4
5
6
7
8
9
10
11
dom.html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>DOM解析</title>

<!– js –>
<script>
function a(){
/* 按id获取,返回1个 */
var x = document.getElementById(“div1″);
x.innerHTML=”<h1>你好div</h1>”;

/* 按name属性值获取,返回多个*/
var y = document.getElementsByName(“div2″);
console.log(y);//NodeList
y[0].innerHTML=”hello js…”;

/* 按class属性值获取,返回多个*/
var z = document.getElementsByClassName(“span1″);
console.log(z);//HTMLCollection
z[0].innerText=”<p>我变了</p>”

/* 按照标签名获取,返回多个 */
var m = document.getElementsByTagName(“div”);
console.log(m);//HTMLCollection
m[1].style.fontSize=30+”px”;
}
</script>
</head>
<body>
<div id=”div1″ onclick=”a();”>我是div1</div>
<div name=”div2″ onclick=”a();”>我是div2</div>
<span class=”span1″>我是span1</span>
<span class=”span1″>我是span2</span>
<a name=”div2″ id=”a1″>我是a</a>

<!– js事件: –>
<a href=”#” onclick=”method();”>单击触发js</a>
<a href=”#” ondblclick=”method2();”>双击触发js</a>
<a href=”#” onmouseenter=”method3();”>滑过触发js</a>
<a href=”#” onmouseleave=”method4();”>滑走触发js</a>
<button onkeydown=”alert(1);”>点我</button>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
总结
获取页面元素的4种方式:

getElementsByTagName 标签名称,得到数组
getElementsByName name属性,得到数组
getElementsByClassName class属性,得到数组
getElementById id属性,单个值
注:dom树在描述标签时除id方式,其它都是以数组形式体现,哪怕是一个元素。
————————————————
版权声明:本文为CSDN博主「cgblpx」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/u012932876/article/details/117441444

小青年资源网
小青年技术网 » JavaScript自定义对象