<script>

    var user = {

        name: "qinjiang",
        age: 3,
        sex: '男'

    }

    //对象转化为json字符串
    var jsonUser = JSON.stringify(user);

    //json字符串转换为对象
    var obj = JSON.parse('{"name": "qinjiang","age": 3,"sex": "男"}');
</script>

JSON和JS对象的区别

<script>
var obj = {a:'hello',b:'hellob'};  
var json = '{"a": "hello", "b":"hellob"}';  //JSON字符串的键值都是双引号
 </script>

面向对象编程

1,面向对象原型继承

<script>

    var user = {

        name: "qinjiang",
        age: 3,
        sex: '男',

        run:function () {
            console.log(this.name+"run....");

        }
    };

    var xiaoming = {

        name: "xiaoming"

    };
    xiaoming.__proto__=user;//将xiaoming的原型指向user，就可以调用user中的run方法片，相当于Java中user是xiaoming的父类

但后面发现这个原型继承的方式太过麻烦，于是借鉴了Java，采用了下面的class继承

2.面向对象class继承

class关键字，是在ES6引入的

1.定义一个类，属性，方法

 <script>
 class Student{//根据class关键字定义一个类，模仿Java

        constructor(name) { //构造器

        this.name=name;
        }

        hello(){

            alert('hello'+this.name);

        }
    }
    var student1 = new Student("xiaoming");
    var student2 = new Student("zhantao");

</script>

继承

<script>
class PrimaryStudent extends Student{
    
}

var primaryStudent = new PrimaryStudent("qinjiang");
</script>

操作BOM对象（重点）

BOM：Browser Object Model，浏览器对象模型

操作对象

1.window（顶层对象）

window代表浏览器窗口

2.Navigator

Navigator，封装了浏览器信息

navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform

大多数时候不会使用navigator对象，因为该对象会被人为修改！不建议使用这些属性来判断和编写代码

3.screen

代表屏幕尺寸

screen.width
screen.height

4.location（重要）

location代表当前页面的url信息

5.document（DOM）

document代表当前的页面，HTML DOM文档树

6.history

history代表浏览器的历史记录（不建议使用）

history.back()//后退
history.forward()//前进

操作DOM对象（重点）

DOM：文档对象模型，浏览器网页就是一个DOM树形结构！

核心

获得dom节点

<body>

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



<script>
    //对应css选择器
    var p1 = document.getElementById("p1");
    var h1 = document.getElementsByTagName("h1")
    var p2 = document.getElementsByClassName("p2");
    var father = document.getElementById("father");
    var children = father.children;//获取父节点下的所有子节点
    //father.firstChild
    //father.lastChild
</script>
</body>

注意：这是原生代码，之后我们尽量都是用jquery（）；

更新：更新DOM节点

（1）操作文本

id1.innerText='123';//修改文本值
id1.innerHTML='<strong>123</strong>'//可以解析HTML文本标签

（2）操作css

id1.style.color='green'
id1.style.fontSize='200px'

本文含有隐藏内容，请开通VIP 后查看

JavaScript心得笔记-1（后端了解必备）

Json