JavaScript的核心JSON对象

最新推荐文章于 2021-11-25 18:35:54 发布

zhiruochujian1

最新推荐文章于 2021-11-25 18:35:54 发布

阅读量321

点赞数

分类专栏： HTML 文章标签： JSON对象 DOM对象(文档对象模型) BOM对象(浏览器对象模型) JS事件 (Event)

本文链接：https://blog.csdn.net/zhiruochujian1/article/details/103169653

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JSON对象

对象（object）是 JavaScript 的核心概念，也是最重要的数据类型。JavaScript 的所有数据都可以被视为对象。JavaScript提供多个内建对象，比如 String、Date、Array 等等。对象是带有属性和方法的特殊数据类型。

对象就是一种无序的数据集合，由若干个“键值对”(key-value)({键:值,键2:值2,…})构成。通过JavaScript我们可以创建自己的对象。JavaScript对象满足的这种”键值对”的格式我们称为JSON格式，即为JSON对象。

一.对象(object)

1.创建对象

JS创建自定义对象，主要通过三种方式：字面量形式创建对象、通过new Object对象创建、通过Object对象的create方法创建对象。

1)字面量创建对象

var 对象名 = {}; // 空对象
var 对象名 = {
键:值,
键2:值2,
…
};

2)通过new Object()创建对象

var 对象名 = new Object(); // 创建一个空的对象

对象名.键 = 值;

3)通过Object对象的create()方法创建

var 对象名 = Object.create(null); // 空对象
var 对象名 = Object.create(对象名2); // 以对象2为模板，创建新的对象

<script type="text/javascript">
		// 1、字面量创建对象
		var obj = {};
		var obj2 = {
			uname:"zhangsan",
			uage:18
		}
		console.log(obj);
		console.log(obj2);
		// 添加属性
		obj.usex = "男";
		// 修改属性
		obj2.uname = "lisi";
		console.log(obj);
		console.log(obj2);		
		console.log("===================");		
		// 2、通过new Object()创建对象
		var obj3 = new Object();
		console.log(obj3);
		obj3.aa = "哈哈哈";
		console.log(obj3);
		console.log("===================");
		// 3、通过Object对象的create()方法创建
		var obj4 = Object.create(null);
		console.log(obj4);
		// 获取属性
		console.log(obj4.uname);
		var obj5 = Object.create(obj2);
		console.log(obj5.uname);	
</script>

2.对象的序列化和反序列化

序列化即将JS对象序列化为字符串，反序列化即将字符串反序列化为JS对象。JS中通过调用JSON方法，可以将对象序列化成字符串，也可以将字符串反序列化成对象。

1)将JSON对象转换成JSON格式的字符串

JSON.stingify(对象);

2)将JSON格式的字符串转换成JSON对象

JSON.parse(字符串);

3. eval()动态函数

可借助eval()动态函数，将参数字符串解析成js代码来执行，只接受原始字符串作为参数。

eval(“console.log(‘你好’)”); // 控制台输出你好

将json字符串转为json对象

4.this关键字

this是JavaScript语言的一个关键字。
它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

(1)在函数中使用this

在函数中使用this属于全局性调用，代表全局对象，通过window对象来访问。

function add(x, y) {
	this.x = x;
	this.y = y;
	return this.x + this.y;
}
var result = add(1, 2);
console.log(result);
function test() {
	this.x = 1;
	console.log(this.x);
}
test();
console.log(x); // 相当于定义在全局对象上的属性
//结果为  1   1

(2)在对象的方法中使用this

在对象中的函数使用this，代表当前的上级对象。

var obj = {
	name: '张三',
	age: 20,
	sayHello: function() {
		console.log(this.name);
		console.log(this);
	}
}
obj.sayHello();

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UTusjQqb-1574249580361)(C:\Users\cc\Desktop\学习总结\前端\img\对象的方法中使用this.png)]

二.JS事件 (Event)

事件(Event)是 JavaScript 应用跳动的心脏，进行交互，使网页动起来。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击(click)、鼠标经过某个特定元素(mouseover|mouseout)或按下键盘上的某些按键(keyup|keydown)。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成(load)，或者是用户滚动窗口或改变窗口大小。

1.了解事件

1)作用

（1）验证用户输入的数据
（2）增加页面的动感效果
（3）增强用户的体验度

2)事件名词

事件源,事件名,事件监听,事件处理

2.事件类型

1)分类

JavaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件

Form 事件：由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）
Keyboard 事件 : 键盘事件
Mouse 事件：由鼠标或类似用户动作触发的事件
Media 事件：由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 < audio>、< embed>、< img>、< object> 以及 < video>）

2)常用的事件

onclick 、onblur 、onfocus 、onload 、onchange、
onmouseover、onmouseout、onkeyup、onkeydown

事件	说明
onclick	鼠标点击某个对象
onblur	元素失去焦点
onfocus	元素获得焦点
onload	当页面或图像加载完后立即触发
onchange	用户改变域的内容
onmouseover	鼠标移动到某个元素上
onmouseout	鼠标从某个元素上离开
onkeyup	某个键盘的键被松开
onkeydown	某个键盘的键被按下

3.事件流和事件模型

我们的事件最后都有一个特定的事件源，暂且将事件源看做是HTML的某个元素，那么当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会受到该事件，这个传播过程称为DOM事件流。

事件顺序有两种类型：事件捕获和事件冒泡

冒泡和捕获其实都是事件流的不同表现，这两者的产生是因为IE和Netscape两个大公司完全不同的事件流概念产生的。（事件流：是指页面接受事件的顺序）IE的事件流是事件冒泡，Netscape的事件流是事件捕获流。

1)事件捕获

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）

2)事件冒泡

Netscape提出的另一种事件流叫做事件捕获，事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它

3)DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获阶段，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IwqGiHHY-1574249580363)(C:\Users\cc\Desktop\学习总结\前端\img\DOM事件流.png)]

4.事件处理程序

HTML事件处理程序,在html标签上直接绑定事件

事件就是用户或浏览器自身执行的某种动作。例如click、load和mouseover都是事件的名字，而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头，因此click事件的事件处理程序就是onclick。

1)DOM0级事件

(1)获取事件源

document.getElementById(“元素的id属性值”);

(2)给事件源绑定事件

事件源.on事件名 = function(){
}
不能给一个元素绑定某一个事件多次

2)DOM2级事件

addEventListener(“事件名”,处理函数);
removeEventListener(“事件名”,函数名); // 不能移除匿名函数

(1)获取事件源

document.getElementById(“元素的id属性值”);

(2)给事件源添加监听事件名称

事件源.addEventListener(“事件名”,匿名函数);
事件源.addEventListener(“事件名”,函数名);
可以给一个元素绑定某一个事件多次

三.BOM对象(浏览器对象模型)

BOM的核心对象是window，它表示浏览器的一个实例。

1.window对象

1)系统对话框

浏览器通过(实际是window对象的方法) alert()、confirm()、prompt()方法可以调用系统对话框向用户显示消息

(1)消息框 alter()

alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框

(2)输入框 prompt()

prompt() 方法用于显示可提示用户进行输入的对话框

(3)确认框 confirm()

confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框

2)打开窗口 open()

window.open()方法既可以导航到一个特定的URL也可以用来打开一个新的窗口

3)关闭窗口 close()

window.close()：关闭窗口

4)时间函数

setTimeout() : 在指定的毫秒数后调用函数或计算表达式。通过返回的标识也可以

cliearTimeout(id)：来清除指定函数的执行,在times毫秒后执行function指定的方法，执行之前也可以取消

setInterval(): 可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭

setTimeout()
延时指定毫秒后执行函数（单位：毫秒）
var id = setTimeout(function,times);
clearTimeout(id)
清除指定时间函数
setInterval()
每隔指定秒数执行函数一次

2.history对象

history 对象是历史对象。包含用户（在浏览器窗口中）访问过的 URL。history 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问

1)history对象的属性

length，返回浏览器历史列表中的 URL 数量。

2)history对象的方法

(1)back()

加载 history 列表中的前一个 URL。

(2)forward()

加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个url。

(3)go(number|URL)

URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。

go(-1)，返回到上一个页面

3.location对象

location 对象是window对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过 window.location 属性来访问

1)location对象的属性

href：设置或返回完整的 URL

2)location对象的方法

(1)reload()

重新加载当前文档。

(2)replace()

用新的文档替换当前文档

4.document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，也可通过 window.document 属性对其进行访问

1)document对象方法

(1)write()

document.write(“数据”);

四.DOM对象(文档对象模型)

DOM: Document Object Model 文档对象模型

要实现页面的动态交互效果，bom 操作远远不够，需要操作 html 才是核心。如何操作 htm，就是 DOM。简单的说，dom 提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。dom 处于javascript 的核心地位上

1.节点

加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成，组成一个节点树

节点类型	HTML内容	例如
文档节点	文档本身	整个文档 document
元素节点	所有的HTML元素	< a>、< div>、< p>
属性节点	HTML元素内的属性	id、href、name、class
文本节点	元素内的文本	hello
注释节点	HTML中的注释	< !-- – >

节点类型	说明
文档节点	整个document对象
元素节点	所有html标签
文本节点	html标签中文本
属性节点	html标签的属性
注释节点	注释内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mf3ZL8j4-1574249580364)(C:\Users\cc\Desktop\学习总结\前端\img\节点树类型.png)]

2.操作元素的节点

1)获取节点

在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可以通过Document对象提供的方法，查找、定位某个对象（也就是我们说的节点）

注意：操作 dom 必须等节点初始化完毕后，才能执行。
处理方式两种:
（1）把 script 调用标签移到html末尾即可；
（2）使用onload事件来处理JS，等待html 加载完毕再加载 onload 事件里的 JS。

注意：href=“javascript:void(0)”：伪协议，表示不执行跳转，而执行指定的点击事件。

方法	描述
getElementById()	根据id获取dom对象，如果id重复，那么以第一个为准
getElementsByTagName()	根据标签名获取dom对象数组
getElementsByClassName()	根据样式名获取dom对象数组
getElementsByName()	根据name属性值获取dom对象数组，常用于多选获取值

2)操作元素的值

(1)表单元素

input属性	说明
text	文本框
password	密码框
radio	单选框
checkbox	复选框
select	下拉列表
textarea	文本域
hidden	隐藏域

获取值：
dom对象.value;
设置值：
dom对象.value = “xxx”;

(2)非表单元素

标签	说明
div	div块标签
span	span标签
p	段落标签
h1~h6	标题标签
a	超链接标签
td	单元格标签
li	列表标签

获取值：
dom对象.innerHTML;
设置值：
dom对象.innerHTML = “xxx”;

3.创建与插入

1)创建节点

方法	描述
createElement()	创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode()	创建一个文本节点，可以传入文本内容
innerHTML	也能达到创建节点的效果，直接添加到指定位置了

创建元素节点
document.createElement(“标签名”);
创建文本节点
document.createTextNode(“文本内容”);
设置属性
dom对象.属性名 = “xxx”;
获取属性
dom对象.属性名;

2)插入节点

方法	描述
write()	将任意的字符串插入到文档中
appendChild()	向元素中添加新的子节点，作为最后一个子节点
insertBefore()	向指定的已有的节点之前插入新的节点 newItem：要插入的节点 exsitingItem：参考节点需要参考父节点

(1)appendChild()

在指定元素的最后追加子节点
语法：
dom元素.appendChild(子元素);

(2)write()

向文档中插入任意字符串

(3)insertBefore()

向指定元素的前面插入元素（同级元素）
参数一：要插入的节点
参数二：参考节点
注：需要通过参考节点的父节点

参考节点的父节点.insertBefore(要插入的节点,参考节点);

4.间接查找节点

方法\|属性	描述
childNodes	返回元素的一个子节点的数组
firstChild	返回元素的第一个子节点
lastChild	返回元素的最后一个子节点
nextSibling	返回元素的下一个兄弟节点
parentNode	返回元素的父节点
previousSibling	返回元素的上一个兄弟节点

5.替换节点

方法\|属性	描述
replaceChild(newNode,oldNode)	用新的节点替换旧的节点
oldNode.parentNode.replaceChild(newNode,oldNode)	首先通过旧节点定位到父节点，然后用新的节点替换旧节点

6.克隆节点

方法\|属性	描述
cloneNode()	复制节点

var 复制好的节点 = 被复制的节点.cloneNode([true/false]);

true：深度克隆，可以克隆结构和内容

false(默认值)：只克隆结构

7.删除节点

方法\|属性	描述
removeChild()	从元素中移除子节点

注：javascript:void(0)表示伪协议，即不做跳转操作，去执行点击操作

8.操作元素的属性

在操作DOM对象时，除了可以操作对象整体之外，还可以更加灵活地操作对象中的各个属性

方法\|属性	描述
getAttribute()	返回指定元素的属性值
getAttributeNode()	返回指定属性节点
element.id	设置或者返回元素的 id
setAttribute()	设置或者改变指定属性并指定值
setAttributeNode()	设置或者改变指定属性节点
element.style	设置或返回元素的样式属性
element.className	设置或返回元素的class属性
element.classList	返回元素的类名