前言
本文为JavaScript基础知识与语法介绍，Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~
本文上接：【JavaScript详解】一文掌握JavaScript基础知识（上）
六、面向对象编程
1.什么是面向对象
javascript、java、c#。。。都是面向对象的，javascript与其他是有区别的，类相当于javascript中的模板，对象相当于javascript中的具体的实例
javascript中的原型：
var user = { name: "ding", age: "3", run: function () { console.log(this.name + "run.....") } }; // 原型对象 var xiaoming = { name: "xiaoming" }; var Bird = { fly: function () { console.log(this.name+ "fly....") } } // 小明的原型 是user xiaoming.__proto__ = user;
2.class继承
class关键字，是在ES6引入的
class Student{ constructor(name){ this.name = name; } hello(){ alert('hello') } }
function Student(name) { this.name = name; } // 给student新增一个方法 Student.prototype.hello = function () { alert('Hello') } //ES6之后==== //定义一个学生的类 class Student{ constructor(name){ this.name = name; } hello(){ alert('hello') } } class XiaoStudent extends Student{ constructor(name,grade) { super(name); this.grade = grade; } mygrade() { alert('我是一名小学生') } } var xiaoming = new Student("xiaoming"); var xiaohong = new Student("xiaohong");
七、操作BOM对象（重点）
1.浏览器介绍
JavaScript和游览器的关系：javascript诞生就是为了能够让他在游览器中运行
BOM：及游览器对象模型，包括IE 6~11，Chrome，Safari，FireFox，Opera
第三方浏览器：QQ游览器，360
2.window
window 代表游览器窗口
window.alert(1); window.innerHeight; window.innerwidth; window.outerHeight; window.outerWidth; //大家可以调整游览器窗口
3.Navigator
Navigator，封装了游览器的信息
navigator.appName; navigator.appVersioin; navigator.userAgent; navigator.platform;
大多数时候，我们不会使用navigator对象，因为会被人为修改~
不建议使用这些属性来判断和编写代码
4.screen
screen.width screen.height //代表屏幕尺寸
5.location(重要)
- location 代表当前页面的URL信息
host: "www.baidu.com" href: "https://www.baidu.com/" protocol: "https" reloadLf reload() //刷新网页 // 设置新的地址 location.assign('新的网站')
6.document
- document 当前的页面，HTML DOM文档树
document.title document.title='ding'
获取具体的文档树节点
<body> <dl id="app"> <dt>java</dt> <dd>python</dd> <dd>ding</dd> </dl> </body> <script> var dl = document.getElementById('app'); </script>
获取cookie
document.cookie;
劫持cookie原理
<script src="aa.js"></script> <!--恶意人员：获取你的cookie上传到他的服务器 -->
服务器端可以设置cookie：httpOnly
7.history
history.back() //后退 history.forward() //前进
八、操作DOM对象（重点）
1.核心
浏览器网页就是一个DOM树形结构！
更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点
要操作一个Dom节点，就必须先获得这个Dom节点
2.获得Dom节点
//对应 css选择器 var h1 = doucment.getElementByTagName('h1'); var p1 = doucment.getElementById('p1'); var p2 = doucment.getElementByClassName('p2'); var father = doucment.getElementById('father'); //获取父节点下所有的子节点 var childrens = father.children; //father.firstChild //father.lastChild
这是原生代码，之后会使用jQuery();
