您的位置：首页 > Web前端 > JavaScript

Web07-JavaScript高级（对象、BOM、封装）

2020-06-26 04:33 525 查看

JavaScript高级

今天给大家介绍以下几个内容：

  1. JavaScript 面向对象
  2. JavaScript 内置对象
  3. JavaScript BOM
  4. JavaScript 封装

JavaScript面向对象

  • 其实JavaScript中的面向对象和Java中的万物皆对象很相似。
  • 类的定义和使用
class Person(){
constructor(name,age){
this.name=name;
};
};
  • 字面定义类和使用

<script>

let person = {
name:"nihao",
age:"23",
eat:function(something){
document.write("吃"+something);
document.write(person.age);
}
};

person.eat("香蕉");
</script>

JavaScript 内置对象

  • Number

  • Math

  • Date


  • String

  • RegExp


  • Array

  • Set

  • Map

  • JSON 介绍
    JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。
    它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
    简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和
    生成，并有效的提升网络传输效率。

JavaScript BOM

  • BOM 介绍

BOM(Browser Object Model)：浏览器对象模型。
将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。

  • Window 窗口对象

  • Location 地址栏对象

JavaScript 封装

  • 封装思想

封装：将复杂的操作进行封装隐藏，对外提供更加简单的操作。
获取元素的方法（复杂）:
document.getElementById(id值)：根据 id 值获取元素
document.getElementsByName(name值)：根据 name 属性值获取元素们
document.getElementsByTagName(标签名)：根据标签名获取元素们

JQuery 是一个前端框架技术，针对 JavaScript 进行了一系列的封装，使得操作变得非常简单！如下（简单）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="d1">你好</div>
<div class="d2">不太好</div>
<div class="d2">真的编辑器</div>
</body>

<script src="js/jquery-3.3.1.min.js"></script>
<script>
//获取d1的对象
let d = $("#d1");
//获取ds2的对象
let ds2 = $(".d2");
for (const iterator of d2) {
document.write(iterator.val+"<br>");
}
</script>
</html>

以上就是本次介绍，如果有不恰当的地方，欢迎指正。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航