JavaScript高级使用(对象、BOM、封装)

JavaScript高级

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

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

JavaScript面向对象

  • 其实JavaScript中的面向对象和Java中的万物皆对象很相似。
  • 类的定义和使用
    JavaScript高级使用(对象、BOM、封装)_第1张图片
 class Person(){
      constructor(name,age){
         this.name=name;
    };
 };
  • 字面定义类和使用

JavaScript高级使用(对象、BOM、封装)_第2张图片

<script>


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

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

JavaScript 内置对象

  • Number

JavaScript高级使用(对象、BOM、封装)_第3张图片

  • Math
    JavaScript高级使用(对象、BOM、封装)_第4张图片

  • Date

  • JavaScript高级使用(对象、BOM、封装)_第5张图片
    JavaScript高级使用(对象、BOM、封装)_第6张图片

  • String
    JavaScript高级使用(对象、BOM、封装)_第7张图片
    JavaScript高级使用(对象、BOM、封装)_第8张图片

  • RegExp

JavaScript高级使用(对象、BOM、封装)_第9张图片
JavaScript高级使用(对象、BOM、封装)_第10张图片

  • Array
    JavaScript高级使用(对象、BOM、封装)_第11张图片

  • Set
    JavaScript高级使用(对象、BOM、封装)_第12张图片

  • Map

JavaScript高级使用(对象、BOM、封装)_第13张图片

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

JavaScript高级使用(对象、BOM、封装)_第14张图片

JavaScript BOM

  • BOM 介绍

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

JavaScript高级使用(对象、BOM、封装)_第15张图片

  • Window 窗口对象
    JavaScript高级使用(对象、BOM、封装)_第16张图片

  • 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+"
"
); } </script> </html>

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

你可能感兴趣的:(JavaScript高级使用(对象、BOM、封装))