软件设计之JavaScript(2)

作者：你好赵伟 | 2024-08-10 23:32:49

踩

软件设计之JavaScript(2)

【狂神说Java】JavaScript最新教程通俗易懂

学习内容：

软件开发技能点参照：软件开发，小白变大佬，这套学习路线让你少走弯路是认真的，欢迎讨论
软件开发技能点顺序参照：Java学习完整路线，强烈建议收藏转发
建议JSON、jQuery等深入知识还是看其他人的：
尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版

JSON
JS面向对象
BOM对象
DOM对象

1、JSON

JavaScript Object Notation ：JS对象表示法
JSON是一个轻量级的数据交换格式，简介的层次结构使其成为理想的数据交换语言
在JS中一些皆为对象，任何js支持的类型都可以用JSON表示
格式：
(1)对象都用{}
(2)数组都用[]
(3)所有键值对都用 key:value
JSON是一个特殊格式字符串，这个字符串可以被任意语言识别，并转换为任意语言中的对象
JSON和JS对象的格式一样，只不过JSON字符串的属性名必须加双引号

JSON分类

JSON中允许的值：字符串、数组、布尔值、null、对象(不能是函数对象)、数值

<script>
    //JSON对象
    let obj1 = '{"name":"China",“age”：5000}';
    //JSON数组
    let arr = '[1,"hello",true]';
</script>
1
2
3
4
5
6

JSON与对象格式转化

  <script >
    let user = {
        name:"Tom",
        age :2,
        sex :'男'
    }
    //对象转换为json字符串
    let jsonUser = JSON.stringify(user);

    //json字符串转化为对象
    let obj = JSON.parse(jsonUser)
    //第二种方法:eval()
    //当JSON字符串含有{}时，eval会把其当成代码块解析，若不希望如此，则字	 符串前后添加一个()
    let obj1 = eval("(" + jsonUser + ")");
    let obj1 = eval(jsonUser)
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述

2、JS面向对象

类：模版、原型对象
对象：具体对的实例

原型对象

每一个对象都有它的原型对象，它可以使用自己原型对象上的所有属性和方法
获取原型的方法1：通过对象的__proto__获取
获取原型的方法2：通过构造函数的prototype属性获取
获取原型的方法3：通过类的prototype属性

面向对象原型获取1

Jerry的原型是user

  <script >
    let user = {
        name:"Tom",
        age :2,
        sex :'男'
    }
    let Jerry = {
        name: "Jerry"
    }
    Jerry.__proto__ = user;
  </script>
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

面向对象原型获取2

  <script >
      function Cat(name){
          this.name = name;
      }
      let cat = new Cat('Tom');
      Cat.prototype.eat = function (){
          console.log('吃鱼')
      }
      cat.eat();
  </script>
1
2
3
4
5
6
7
8
9
10

面向对象原型获取3

  <script >
      class Cat{
          constructor(name) {
              this.name = name;
          }
          }
      Cat.prototype.eat = function (){
          console.log('吃鱼')
      }
      let cat = new Cat("Tom")
      cat.eat();
  </script>
1
2
3
4
5
6
7
8
9
10
11
12

prototype实现继承(ES5)

将Schoolboy这个子类的prototype(原型)指向一个new出来的School类型的实例，则Schoolboy新建的子类就能使用School里的公共属性和方法

    <script>
        function Student(id){
            this.id = id;
        }
        function Schoolboy(grade){
            this.grade = grade;
        }
        Schoolboy.prototype = new Student();
        let boy = new Schoolboy('90')
    </script>
1
2
3
4
5
6
7
8
9
10

class继承

<script>
    class Schoolboy extends Student{
        constructor(name,grade) {
            super(name);
            this.grade = grade;
        }
        myGrade(){
            alert("我是小学生")
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11

3、BOM对象

JS是为了能够在浏览器中运行才创造
BOM：浏览器对象模型
window 代表浏览器窗口
Navigator 封装了浏览器的信息
screen 代表屏幕尺寸
location代表当前页面的URL信息(host、href、protocol、reload)
document代表当前页面：获取具体文档树节点、cookie
history代表页面前进、后退

4、DOM对象

操作DOM对象

浏览器网页作为一个Dom树形结构
更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除Dom节点
添加：添加一个节点

获取节点

<body>
<div class="super">
    <h1>标题1</h1>
    <p id="p1"> p1</p>
    <p class="p2"> p2</p>
</div>

<script>
    let h1 = document.getElementsByTagName('h1');
    let p1 = document.getElementById('p1')
    let p2 = document.getElementsByClassName('p2');
    let father = document.getElementsByClassName('super');
    let children = father.children;//获取父节点下的所有子节点
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

更新节点

<body>
<div id="super">
</div>
<script>
    let father = document.getElementById('super');
    //修改文本值
    father.innerText = '4';
    //innerHTML 是 JavaScript 中的一个属性，用于获取或设置 HTML 元素的内容
    father.innerHTML = '<p style="color: red;">红色</p>';//设置
    let content = father.innerHTML; //获取
    console.log(content)
    //操作元素样式
    father.style.color = 'yellow'
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

删除节点

获取父节点，利用父节点删除

<body>
<div id="super">
    <p id = 'p1'>你好</p>
    <p id = 'p2'>世界</p>
</div>
<script>
    //通过子节点找到父节点
    let self = document.getElementById('p1');
    let father = self.parentElement;
    //删除方式1:
    father.removeChild(self);
    //删除方式2：
    //children是时刻变化的，当p1被删除之后，p2成为了father.children[0]
    father.removeChild(father.children[0])
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

插入节点

<body>
<div id = 'd1'>Java</div>
<div id="d2">
    <p id = 'p1'>你好</p>
    <p id = 'p2'>世界</p>
</div>
<script>
    let element1= document.getElementById('d1');
    let element2 = document.getElementById('d2');
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/960981