JavaScript中的对象是拥有属性和方法的数据,今天小编将为大家带来大数据编程入门:JavaScript对象。
真实生活中的对象,属性和方法
真实生活中,手机是一个对象,并且有它的属性,如品牌和颜色等,方法有开机关机等。
比如对象为手机(phone),属性有:
phone.name=Redmi
phone.color=black
phone.size=6.67inch
phone.processor=phegda1200
方法有:
phone.start()
phone.working()
phone.call()
phone.stop()
所有的手机都有这些属性,但是每款手机的属性都不一样;以及所有手机都拥有这些方法,但是它们被执行的时间可能会不一样。
JavaScript对象
在JavaScript中,几乎所有的事物都是对象。
注意:在JavaScript中,对象非常重要。理解对象后,就可以理解JavaScript。
在下面的代码中变量为phone,所设置的值为”Redmi”:
var phone = “Redmi”;
一个对象也是一个变量,但是一个对象可以包含多个值(多个变量),并且每个值都以name:value的形式呈现。
var phone = {name:”Redmi”,color:”black”};
在上面的示例中,两个值(“Redmi”,”black”)赋予变量phone。
注意:在JavaScript中的对象是变量的容器。
对象定义
可以在JavaScript中使用字符定义和创建对象:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var person = {firstName:"路飞", lastName:"梦奇", age:20, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
person.firstName + " 现在 " + person.age + " 岁.";
</script>
</body>
</html>
运行结果:
在JavaScript中定义对象可以跨越多行,不强制要求空格和换行:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var person = {
firstName : "路飞",
lastName : "梦奇",
age : 20,
eyeColor : "black"
};
document.getElementById("demo").innerHTML =
person.firstName + " 现在 " + person.age + " 岁。";
</script>
</body>
</html>
运行结果:
对象属性
可以说“JavaScript对象是变量的容器”。
然而,我们通常认为“JavaScript对象是键值对的容器”。
键值对通常写为name:value(键和值用冒号分隔)。
键值对在JavaScript对象中通常称为对象属性。
注意:在JavaScript中的对象是属性变量的容器。
对象键值对的写法类似于:
PHP 中的关联数组
Python 中的字典
C 语言中的哈希表
Java 中的哈希映射
Ruby 和 Perl 中的哈希表
访问对象属性
在JavaScript中可以通过两种方式来访问对象属性:
示例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<p>
有两种方式可以访问对象属性:
</p>
<p>
你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
var person = {
firstName : "索隆",
lastName : "罗罗诺亚",
id : 1
};
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>
</body>
</html>
运行结果:
示例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<p>
有两种方式可以访问对象属性:
</p>
<p>
你可以使用 .property 或 ["property"]。
</p>
<p id="demo"></p>
<script>
var person = {
firstName: "索隆",
lastName : "罗罗诺亚",
id : 5566
};
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>
</body>
</html>
运行结果:
对象方法
对象的方法定义函数并作为对象的属性存储。
通过添加()调用对象方法(作为函数)。
此实例访问person对象的fullname()方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
firstName: "索隆",
lastName : "罗罗诺亚",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
运行结果:
如果要访问person对象的fullname属性,它将作为定义函数的字符串返回:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
firstName: "路飞",
lastName : "梦奇",
id : 9,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式:" + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果:" + person.fullName();
</script>
</body>
</html>
运行结果:
访问对象方法
可以使用以下语法创建对象方法:
methodName : function() {
// 代码
}
可以使用下面的语法访问对象:
objectName.methodName()
通常,fullname()是作为person对象的方法,而fullname是一个属性。
如果使用fullname属性,而不添加(),它将返回函数的定义:
objectName.methodName
有许多方法可以创建、使用和修改JavaScript对象。
同样的,还有许多方法可以创建、使用和修改属性和方法。
以上就是关于大数据编程入门:JavaScript对象的全部内容了,希望这篇文章可以帮助到大家~
HTML DOM 节点
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
文档是一个文档。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。are text nodes。
注释是注释节点。
Document 对象
当浏览器载入 HTML 文档, 它就会成为 document 对象。
document 对象是HTML文档的根节点与所有其他节点(元素节点,文本节点,属性节点, 注释节点)。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
浏览器支持
所有主要浏览器都支持 Document 对象。
Document 对象属性和方法
HTML文档中可以使用以上属性和方法:
属性 / 方法 | 描述 |
---|---|
document.activeElement | 返回当前获取焦点元素 |
document.addEventListener() | 向文档添加句柄 |
document.adoptNode(node) | 从另外一个文档返回 adapded 节点到当前文档。 |
document.anchors | 返回对文档中所有 Anchor 对象的引用。 |
document.applets | 返回对文档中所有 Applet 对象的引用。 |
document.baseURI | 返回文档的绝对基础 URI |
document.body | 返回文档的body元素 |
document.close() | 关闭用 document.open() 方法打开的输出流,并显示选定的数据。 |
document.cookie | 设置或返回与当前文档有关的所有 cookie。 |
document.createAttribute() | 创建一个属性节点 |
document.createComment() | createComment() 方法可创建注释节点。 |
document.createDocumentFragment() | 创建空的 DocumentFragment 对象,并返回此对象。 |
document.createElement() | 创建元素节点。 |
document.createTextNode() | 创建文本节点。 |
document.doctype | 返回与文档相关的文档类型声明 (DTD)。 |
document.documentElement | 返回文档的根节点 |
document.documentMode | 返回用于通过浏览器渲染文档的模式 |
document.documentURI | 设置或返回文档的位置 |
document.domain | 返回当前文档的域名。 |
document.domConfig | 返回normalizeDocument()被调用时所使用的配置 |
document.embeds | 返回文档中所有嵌入的内容(embed)集合 |
document.forms | 返回对文档中所有 Form 对象引用。 |
document. getElementsByClassName() | 返回文档中所有指定类名的元素集合,作为 NodeList 对象。 |
document.getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
document.getElementsByName() | 返回带有指定名称的对象集合。 |
document.getElementsByTagName() | 返回带有指定标签名的对象集合。 |
document.images | 返回对文档中所有 Image 对象引用。 |
document.implementation | 返回处理该文档的 DOMImplementation 对象。 |
document.importNode() | 把一个节点从另一个文档复制到该文档以便应用。 |
document.inputEncoding | 返回用于文档的编码方式(在解析时)。 |
document.lastModified | 返回文档被最后修改的日期和时间。 |
document.links | 返回对文档中所有 Area 和 Link 对象引用。 |
document.normalize() | 删除空文本节点,并连接相邻节点 |
document.normalizeDocument() | 删除空文本节点,并连接相邻节点的 |
document.open() | 打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
document.querySelector() | 返回文档中匹配指定的CSS选择器的第一元素 |
document.querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法,返回文档中匹配的CSS选择器的所有元素节点列表 |
document.readyState | 返回文档状态 (载入中……) |
document.referrer | 返回载入当前文档的文档的 URL。 |
document.removeEventListener() | 移除文档中的事件句柄(由 addEventListener() 方法添加) |
document.renameNode() | 重命名元素或者属性节点。 |
document.scripts | 返回页面中所有脚本的集合。 |
document.strictErrorChecking | 设置或返回是否强制进行错误检查。 |
document.title | 返回当前文档的标题。 |
document.URL | 返回文档完整的URL |
document.write() | 向文档写 HTML 表达式 或 JavaScript 代码。 |
document.writeln() | 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。 |
警告 !!!
在 W3C DOM核心,文档对象 继承节点对象的所有属性和方法。
很多属性和方法在文档中是没有意义的。
HTML 文档对象可以避免使用这些节点对象和属性:
属性 / 方法 | 避免的原因 |
---|---|
document.attributes | 文档没有该属性 |
document.hasAttributes() | 文档没有该属性 |
document.nextSibling | 文档没有下一节点 |
document.nodeName | 这个通常是 #document |
document.nodeType | 这个通常是 9(DOCUMENT_NODE) |
document.nodeValue | 文档没有一个节点值 |
document.ownerDocument | 文档没有主文档 |
document.ownerElement | 文档没有自己的节点 |
document.parentNode | 文档没有父节点 |
document.previousSibling | 文档没有兄弟节点 |
document.textContent | 文档没有文本节点 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
们知道生活中客观存在的一切事物皆为对象,那在程序中的对象是什么样子呢?我们可以将程序中的对象理解为客户端世界中的对象在一种计算机中的一种表示方式.所有的编程语言中提到的对象其性质都是类似的,它往往对应内存中的一块区域,在这个区域中存储对象的属性或方法信息。
一、类
在面向对象编程中,对象是一个类的实例,类定义了一组公开的属性和方法。类简化了同一类型的多个对象的创建。
1 var star = {}; //组装一个star对象 2 star[“Polaris”] = new Object; 3 star[“Mizar”] = new Object; 4 star[“Polaris”].constellation = “Ursa Minor”; 5 star[“Mizar”].constellation = “Ursa Major”;
以下为使用伪类组装一个star对象:【主要目的是:简化代码重复率,提高阅读效率】
1 var star = {};
2 function Star(constell,type,specclass,magnitude) {
3 this.constellation = constell;
4 this.type = type;
5 this.spectralClass = specclass;
6 this.mag = magnitude;
7 }
8
9 star["Polaris"] = new Star("Ursa Minor","Double/Cepheid","F7",2.0);
10 star["Mizar"] = new Star("Ursa Major","Spectroscopic Binary","A1 V",2.3);
二、创建对象
2.1 两种方法创建对象:
1 var star=new Object; //new关键字
2 var star={} //花括号
2.2 为对象添加属性
1 star.name="Polaris";
2 star.constellation="Ursa Minor";
2.3 遍历对象属性 用for…in..函数
1 function Star(constell,type,specclass,magnitude) {
2 this.constellation = constell;
3 this.type = type;
4 this.spectralClass = specclass;
5 this.mag = magnitude;
6 }
7 star["Polaris"] = new Star("Ursa Minor","Double/Cepheid","F7",2.0);
8 star["Mizar"] = new Star("Ursa Major","Spectroscopic Binary","A1 V",2.3);
9 star["Aldebaran"] = new Star("Taurus","Irregular Variable","K5 III",0.85);
10 star["Rigel"] = new Star("Orion","Supergiant with Companion","B8 Ia",0.12);
11
12 for (var element in star) { //元素名
13 for (var propt in star[element]) { //属性值
14 alert(element + ": " + propt + " = " + star[element][propt]);
15 }
16 }
*请认真填写需求信息,我们会在24小时内与您取得联系。