标签：面向对象编程 遍历 lib like 假设 字符串 写代码 assign javaee
javascript、java、c#。。。。面向对象；javascript有些区别！
类：模板 原型对象
对象：具体的实例
在JavaScript这个需要大家换一下思维方式！
原型：
<script>
var Student = {
name: ‘edgar‘,
age: 26,
run: function () {
console.log(this.name + " run....")
}
}
var xiaoming = {
name: ‘xiaoming‘
}
//小明的原型是 Student
xiaoming.__proto是原型对象__ = Student;
var Brid = {
fly:function (){
console.log(this.name + " fly....")
}
}
//原型对象
xiaoming.__proto__ = Brid;
</script>
原来：
//ES6之前
function Student(name){
this.name=name;
}
//给student新增一个方法
Student.prototype.hello=function (){
alert(‘Hello‘);
};
var student =new Student(‘edgar‘);
class关键字，是在ES6引入的
1、定义一个类，属性，方法
//定义一个学生的类
class Student{
constructor(name) {
this.name=name;
}
helo(){
alert(‘Hello‘)
}
}
var xiaoming = new Student(‘xiaoming‘);
var xiaohong = new Student(‘xiaohong‘);
2、继承
class Student{
constructor(name) {
this.name=name;
}
helo(){
alert(‘Hello‘)
}
}
class xiaoStudent extends Student{
constructor(name,grade) {
super(name);
this.grade=grade;
}
myGrage(){
alert(‘我是一名小学生‘)
}
}
var xiaohong = new xiaoStudent(‘xiaohong‘,1);
本质：查看对象原型
__proto__:
console.log(Object.prototype.__proto__ === null) // true
//所以 Object.prototype.__proto__ 的值为 null 跟 Object.prototype 没有原型，其实表达了一个意思。
JavaScript 和 浏览器关系？
JavaScript诞生就是为了能够让它在浏览器中运行！
BOM：浏览器对象模型
三方：
window 代表 浏览器窗口
window.alert(1)
window.innerHeight
803
window.innerWidth
1096
window.outerHeight
824
window.outerWidth
1536
// 大家可以调整浏览器窗口试试
Navicator，封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36"
navigator.platform
"Win32"
大多数时候，我们不会使用navigator对象，因为会被人为修改不建议使用这些属性来判断和编写代码
代表屏幕尺寸(不准，我的电脑屏幕分辨率明明是1920 × 1080)
screen.width
1536 px
screen.height
864 px
location代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ? reload()//刷新网页
// 设置新的地址
location.assign(‘https://www.bilibili.com/video/BV1JJ41177di?p=19‘)
document代表当前的页面，HTML DOM文档树
document.title
"百度一下，你就知道"
document.title=‘Edgar学Java‘
"Edgar学Java"
获取具体的文档树节点
<dl id="app">
<dt>java</dt>
<dd>javaSE</dd>
<dd>javaEE</dd>
</dl>
<script>
document.getElementById("app")
</script>
获取cookie
document.cookie
劫持cookie原理
<script src="aa.js"></script>
<!-- 恶意人员；获取你的cookie上传到他的服务器 -->
服务器端可以设置cookie:httpOnly
history代表浏览器的历史记录
history.forward() //前进
history.back() //后退
浏览器网页就是一个Dom树形结构！
DOM：文档对象模型
要操作一个Dom节点，就必须要先获得这个Dom节点
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应css选择器
var father = document.getElementById("father");
var p1 = document.getElementsByTagName("h1");
var p1 = document.getElementById("p1");
var p2 = document.getElementsByClassName("p2");
var childrens = father.children;//获取父节点下所有子节点
//father.firstChild
//father.lastChild
</script>
</body>
这是原生代码，之后我们尽量都是用jQuery();
<body>
<div id="id1">
</div>
<script>
var id1 = document.getElementById("id1");
</script>
</body>
操作文本
id1.innerText=‘123‘ 修改文本的值id1.innerHTML=‘<strong>456</strong>‘ 可以解析HTML标签操作css
d1.style.color=‘red‘// 属性使用 字符串
id1.style.fontSize=‘20px‘// 驼峰命名
id1.style.padding=‘2em‘
删除节点的步骤：先获取父节点，在通过父节点删除自己
<script>
var self = document.getElementById(‘p1‘);
var father = self.parentElement;
father.removeChild(self);
//删除是一个动态的过程，以下代码有问题！
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);
</script>
注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意；
我们获得了某个Dom节点，假设这个Dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了！会产生覆盖~
追加
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var js = document.getElementById("js");
var list = document.getElementById("list");
list.appendChild(js);// 追加到后面
</script>
</body>
效果：
<script>
var js = document.getElementById("js"); //已经存在的节点
var list = document.getElementById("list");
//通过js创建一个新的节点
var newP = document.createElement("P"); //创建一个P标签
newP.id="newP";
newP.innerText="hello,edgar";
//创建一个标签节点
var myScript = document.createElement("script");
myScript.setAttribute("id","text/javascript");
document.getElementsByTagName(‘body‘)[0].style.background=‘#d41e1e‘;//getElementsByTagName获取的是数组
</script>
注意：getElementsByTagName获取的是数组
var ee = document.getElementById(‘ee‘);
var js = document.getElementById(‘js‘);
var list = document.getElementById(‘list‘);
// 要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
标签：面向对象编程 遍历 lib like 假设 字符串 写代码 assign javaee
原文地址：https://www.cnblogs.com/edgarstudy/p/14728629.html
