Day15-Js5：面向对象3

 

1.Json内置对象

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

• JSON 英文全称 JavaScript Object Notation

• JSON 是一种轻量级的数据交换格式。
• JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。
  文本可以被任何编程语言读取及作为数据格式传递。 本质是一个字符串

和xml的区别

xml是一种重量级的语言（标签占用的体积比较大），主要用于后台存储配置文件数据

<user>
  <username>张三</username>
	<password>123</password>
</user>

json是一种轻量级语言（占用体积较小），主要用于网络数据的传输

{"username":"张三","password":"123"}

JSON 语法规则

• 数据为 键/值 对。
• 数据由逗号分隔。
• 大括号保存对象
• 方括号保存数组

JSON 对象保存在大括号内。

JSON 数组保存在中括号内。

JSON 字符串转换为 JavaScript 对象

通常我们从服务器中读取 JSON 数据，并在网页中显示数据。

简单起见，我们网页中直接设置 JSON 字符串 (你还可以阅读我们的 JSON 教程):

首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：

vartext = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

最后，在你的页面中使用新的 JavaScript 对象：

实例

vartext = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}'; obj = JSON.parse(text); document.getElementById("demo").innerHTML = obj.sites[1].name + "" + obj.sites[1].url;

语法上的区别

JSON字符串，属性名必须要加双引号引起来

js对象：属性名可以不加双引号

作用上的区别

JSON字符串：本质是字符串，一般用于网络传输（从后台接收的数据大部分都是JSON格式）

js对象：本质是对象（类的实例），不能在网络传输（后台经常将对象转成JS字符串再网络传输给前台）

转换

目的：网络传输一般使用的是JSON格式，本质是一个字符串，如果想获取里面的内容，很麻烦，

可以通过JSON字符串转换为js对象，用对象的属性来获取里面的内容就非常方便

方法：

JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。

JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。

var str = '{"success":true,"data":{"title":"天蝎座","type":"今日运势","time":"7月28日","todo":{"yi":"多角度思考","ji":"不知变通"},"fortune":{"all":3,"love":4,"work":3,"money":3,"health":4},"index":{"all":"75%","love":"86%","work":"69%","money":"72%","health":"82%"},"shortcomment":"享受放松的时光","fortunetext":{"all":"处于一个平平淡淡的运势状态，没有太多波澜起伏，但也没有太多烦恼。或许这正是你需要的，可以适度地放松一下心情，享受一段短暂宁静的时光。生活方面，建议你找些喜欢的事情做做，或是培养自己的兴趣爱好，让自己更加充实起来。","love":"单身的有可能会遇到一个令你心动的人，不妨主动一些，展开一段美好的恋情。已有伴者会有更多互动的时间，能够享受甜蜜的二人世界。","work":"目前的进展可能不太顺利，但并不代表你要放弃，持续学习和进步，成功总会属于你的，暂时是积累经验储备知识能量的一天，建议提高行动积极性。","money":"不要过于放松警惕，合理安排和管理自己的财务，避免过度消费和冲动购物。注意理财规划，积少成多，财富会悄悄积累起来。","health":"保持良好的生活习惯，适量运动和饮食均衡，可以增强体质和提高免疫力。同时，也要注意放松心情，避免过度压力带来的身心负担。"},"luckynumber":"9","luckycolor":"深蓝","luckyconstellation":"摩羯座"}}'

// 转换
var object= JSON.parse(str)
console.log(object)

// 打印爱情运势
console.log(object.data.fortunetext.love)

韩小韩API接口站 - 免费API数据接口调用服务平台 一个API接口站（可以将内容转换位JSON字符串）

json在线解析工具

2.DOM概念

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树(本质就是将里面所有的标签都封装成一个个对象)

DOM树：根据Html结构，生成的一个树形结构，可以理解为由对象组成的树

DOM作用：通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

DOM操作页面元素的思想：

就是将HTML页面中所有组成部分（标签，属性，标签体，注释）都抽成对象，用面向对象的方式来操作。

因为对象中有属性和方法，比单纯操作字符串方便得多。

Document 对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象是 HTML 文档的根节点。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

console.log(document) // 打印的是具体内容

console.dir(document) // 打印的是document对象的详细信息（属性和方法）

Document 对象是js的一个内置对象，不需要创建，直接拿就能用

HTML DOM 节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:

• 文档是一个文档节点
• 所有的HTML元素都是元素节点
• 所有 HTML 属性都是属性节点
• 文本插入到 HTML 元素是文本节点。are text nodes
• 注释是注释节点

3.DOM获取元素

获取单个元素：

document.getElementById() 返回拥有指定id的第一个对象的引用

获取多个元素：

document.getElementByClassName() 返回文档中所有指定类名的元素集合，作为NodeList对象

document.getElementByTagName() 返回带有指定标签名的对象合集

H5方式获取：

document.querySelector() 返回文档中匹配指定的css选择器的第一元素

document.querySelectorAll() 返回文档中匹配的css选择器的所有元素节点列表

和传统的getElement方式的区别（以获取第一个li为例

// 传统方式获取第一个，需要加上索引
console.log(document.querySelector('li').innerHTML) 
// H5方式，如果有多个，document.querySelector自动获取第一个

// H5方式另一个好处，可以灵活使用选择器选择元素，包括扩展选择器。
console.log(document.querySelector('ul li'))  // 只获取ul下的li

4.事件入门

三要素：

1. 事件源(按钮)
2. 事件（动作：点击这个动作）
3. 事件处理程序（事件发生之后，需要做的事情，比如弹框）

三步骤：

1. 写一个事件源
2. 写一个监听器（事件处理函数）
3. 绑定监听器和事件源（通过一个属性，将二者绑定在一起）

5.DOM操作属性

原始方式

element.setAttribute() 设置或者改变指定属性并指定值

element.getAttribute() 返回指定元素的属性值

简化方法

元素对象.属性名 = 属性值 设置或者修改元素属性的值

元素对象.属性名 获取元素的属性值

应用场景

操作图片的src(灯泡切换,轮播图)

操作input标签的value属性(书架案例)

操作input标签的checked属性(复选框选中案例)

6.DOM操作标签体

innerHTML

设置

元素对象.innerHTML = 新值

获取

元素对象.innerHTML

innerText(操作的是纯文本)

设置

元素对象.innerText = 新值

获取

元素对象.innerText

7.DOM操作样式

单独设置样式

元素对象.style.样式属性名 = 属性值

批量设置样式

方式一:不推荐,有可能会覆盖原有样式

元素对象.className = class属性值

方式二:使用classList属性

元素对象.classList.add(class属性值)

方法

add(class1, class2, ...) 在元素中添加一个或多个类名。

remove(class1, class2, ...) 移除元素中一个或多个类名

toggle(class, true|false) 在元素中切换类名。