软件设计之JavaScript(2)

软件设计之JavaScript(2)

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

学习内容:

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

  1. JSON
  2. JS面向对象
  3. BOM对象
  4. DOM对象

1、JSON

JavaScript Object Notation :JS对象表示法

JSON是一个轻量级的数据交换格式,简介的层次结构使其成为理想的数据交换语言

在JS中一些皆为对象,任何js支持的类型都可以用JSON表示

格式:

(1)对象都用{}

(2)数组都用[]

(3)所有键值对 都用 key:value

JSON是一个特殊格式字符串,这个字符串可以被任意语言识别,并转换为任意语言中的对象

JSON和JS对象的格式一样,只不过JSON字符串的属性名必须加双引号

JSON分类

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

html 复制代码
<script>
    //JSON对象
    let obj1 = '{"name":"China","age":5000}';
    //JSON数组
    let arr = '[1,"hello",true]';
</script>

JSON与对象格式转化

html 复制代码
  <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>

2、JS面向对象

类: 模版、原型对象

对象:具体对的实例

原型对象

每一个对象都有它的原型对象,它可以使用自己原型对象上的所有属性和方法

获取原型的方法1:通过对象的__proto__获取

获取原型的方法2:通过构造函数的prototype属性获取

获取原型的方法3:通过类的prototype属性

面向对象原型获取1

Jerry的原型是user

html 复制代码
  <script >
    let user = {
        name:"Tom",
        age :2,
        sex :'男'
    }
    let Jerry = {
        name: "Jerry"
    }
    Jerry.__proto__ = user;
  </script>

面向对象原型获取2

html 复制代码
  <script >
      function Cat(name){
          this.name = name;
      }
      let cat = new Cat('Tom');
      Cat.prototype.eat = function (){
          console.log('吃鱼')
      }
      cat.eat();
  </script>

面向对象原型获取3

html 复制代码
  <script >
      class Cat{
          constructor(name) {
              this.name = name;
          }
          }
      Cat.prototype.eat = function (){
          console.log('吃鱼')
      }
      let cat = new Cat("Tom")
      cat.eat();
  </script>

prototype实现继承(ES5)

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

html 复制代码
    <script>
        function Student(id){
            this.id = id;
        }
        function Schoolboy(grade){
            this.grade = grade;
        }
        Schoolboy.prototype = new Student();
        let boy = new Schoolboy('90')
    </script>

class继承

html 复制代码
<script>
    class Schoolboy extends Student{
        constructor(name,grade) {
            super(name);
            this.grade = grade;
        }
        myGrade(){
            alert("我是小学生")
        }
    }
</script>

3、BOM对象

JS是为了能够在浏览器中运行才创造

BOM:浏览器对象模型

window 代表 浏览器窗口

Navigator 封装了浏览器的信息

screen 代表屏幕尺寸

location代表当前页面的URL信息(host、href、protocol、reload)

document代表当前页面:获取具体文档树节点、cookie

history代表 页面前进、后退

4、DOM对象

操作DOM对象

浏览器网页作为一个Dom树形结构

更新:更新Dom节点

遍历Dom节点:得到Dom节点

删除:删除Dom节点

添加:添加一个节点

获取节点
html 复制代码
<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>
更新节点
html 复制代码
<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>
删除节点

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

html 复制代码
<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>
插入节点
html 复制代码
<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>
相关推荐
yuanbenshidiaos1 分钟前
c++------------------函数
开发语言·c++
程序员_三木13 分钟前
Three.js入门-Raycaster鼠标拾取详解与应用
开发语言·javascript·计算机外设·webgl·three.js
是小崔啊23 分钟前
开源轮子 - EasyExcel01(核心api)
java·开发语言·开源·excel·阿里巴巴
tianmu_sama29 分钟前
[Effective C++]条款38-39 复合和private继承
开发语言·c++
黄公子学安全32 分钟前
Java的基础概念(一)
java·开发语言·python
liwulin050633 分钟前
【JAVA】Tesseract-OCR截图屏幕指定区域识别0.4.2
java·开发语言·ocr
jackiendsc37 分钟前
Java的垃圾回收机制介绍、工作原理、算法及分析调优
java·开发语言·算法
Oneforlove_twoforjob42 分钟前
【Java基础面试题027】Java的StringBuilder是怎么实现的?
java·开发语言
羚羊角uou44 分钟前
【C++】优先级队列以及仿函数
开发语言·c++
FeboReigns1 小时前
C++简明教程(文章要求学过一点C语言)(1)
c语言·开发语言·c++