编程语言
首页 > 编程语言> > JavaScript自学(4)

JavaScript自学(4)

作者:互联网

JavaScript自学(4)

1、JSON对象

image-20210907214519389

image-20210907215449748

image-20210907215701632

image-20210907215806821

2、面向对象原型继承

<script>
    // var user={
    //     "name":"蔡伟",
    //     "age":3,
    //     "sex":"男"
    // };
    // //对象转化为json字符串 {"name":"蔡伟","age":3,"sex":"男"}
    // var jsonUser=JSON.stringify(user);

    //json字符串转化为对象 参数为json字符串
    // var obj=JSON.parse('{"name":"蔡伟","age":3,"sex":"男"}')

    var Student={
        name:"cj",
        age:3,
        run:function (){
            console.log(this.name+"run...");
        }
    };

    var xiaoming={
        name:"小明"
    };
    //小明的原型是Student
    //原型对象。
    xiaoming.__proto__=Student;

    var Bird={
        fly:function (){
            console.log(this.name+"fly...");
        }
    }
    xiaoming.__proto__=Bird;
</script>

3、面向对象class继承

image-20210910201829443

image-20210910201229515

本质:查看对象原型

image-20210910201754661

image-20210910202145651

原型链

proto

<script>
    //ES6之后
    //定义一个学生类
    class Student{

        constructor(name) {
            this.name=name;
        }

        hello(){
            alert("Hello");
        }
    }

    class pupil extends Student{
        constructor(name,grade) {
            super(name);
            this.grade=grade;
        }

        myGrade(){
            alert("我是一名小学生!");
        }
    }
    var xiaoming=new Student("xiaoming");
    var caiwei=new pupil("蔡伟",1)
</script>

4、操作BOM对象

image-20210910202850001

image-20210910203140501

image-20210910203633128

image-20210910203822977

image-20210910204447694

image-20210910205018732

image-20210910205440175

image-20210910205657468

5、获得DOM节点

image-20210910212429833

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    //对应css选择器
    let h1 = document.getElementsByTagName("h1");
    let p1 = document.getElementById("p1");
    let p2 = document.getElementsByClassName("p2");

    let father = document.getElementById("father");
    let childrens = father.children;
    // father.firstChild;
    // father.lastChild;

</script>

标签:xiaoming,name,JavaScript,father,let,Student,var,自学
来源: https://www.cnblogs.com/gujiakai-top/p/15256593.html