JavaScript心得笔记-1（后端了解必备）
目录
Json
面向对象编程
1,面向对象原型继承
2.面向对象class继承
继承
操作BOM对象（重点）
操作对象
1.window（顶层对象）
3.screen
4.location（重要）
5.document（DOM）
6.history
操作DOM对象（重点）
（1）操作文本
（2）操作css
Json
早期，所有数据传输习惯使用XML文件！
-
JSON（JavaScript Object Notation，JS对象简谱）是一种轻量级的数据交换格式
-
简洁和清晰的层次结构使得JSON成为理想的数据交换语言
-
易于人阅读和编写，同时也易于机器解析和生成，并有效提升网络传输效率
在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示
格式：
-
对象都用｛｝
-
数组都用[]
-
所有的键值对都是用key：value
JSON和JS对象的转换：
<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'
