JavaScript自学(4)

2021/9/11 20:05:06

本文主要是介绍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>


这篇关于JavaScript自学(4)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程