面向对象编程
面向对象:js,Java,c++
类 class :模板
对象:实例
js存在区别,可以使用原型套前边一样的模板,也可以使用class继承
①原型
格式:对象._proto_
如下,小明的原型是person,继承了person的方法和属性
var person = {
name:"mimo",
age:5,
run:function(){
console.log('run'+this.name);
}
}
var xiaoming = {
name:'xiaoming',
}
xiaoming.__proto__ = person;
② class继承
class关键字在es6引入
- 定义一个学生的类
//定义一个学生的类
class student{
constructor(name){
this.name=name;
}
hello(){
alert('hello');
}
}
var xiaoming = new student('xiaoming');
- 继承class B extends A
super访问父类的属性和方法
super(name)
super.hello()
class student{
constructor(name){
this.name=name;
}
hello(){
alert('hello');
}
}
class xiaoxuesheng extends student{
constructor(name,grade){
super(name);
this.grade=grade;
}
mygrade(){
alert('me');
}
}
var xiaoming = new student('xiaoming');
var xiaoqing = new xiaoxuesheng('xiaoming',1);
原型链:每个个构造函数都有一个对象原型,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例,结果会怎样?显然,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立。如此层层递进,就构成了实例与原型的链条。
2.操作BOM对象
B:浏览器
BOM:浏览器对象模型
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
- window
window代表 浏览器窗口
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一。
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
-
Navigator 对象包含有关浏览器的信息。
https://www.runoob.com/jsref/obj-navigator.html -
screen
Screen 对象包含有关客户端显示屏幕的信息screen.width screen.height
-
location
代表当前页面的URL信息 -
document
代表当前页面,HTML DOM文档树
可以获取具体的文档树节点
获取网页的cookie,从而获取本地信息
document.cookie
服务器端可以设置cookie:httpOnly保证信息安全
-
history
代表浏览器的历史记录history.back(); //后退 history.forward(); //前进
3.操作DOM对象
DOM:文档对象模型
核心:浏览器网页是一个DOM树形结构
四个操作:
- 更新:更新DOM节点
- 遍历:遍历DOM节点,得到DOM节点
- 删除:删除一个节点
- 添加:添加一个新的节点
①要操作一个DOM节点需要先获得DOM节点
获得节点如下
<script>
var a = document.getElementsByTagName('h1');
var b = document.getElementById('p1');
var c = document.getElementsByClassName('p2');
var father=document.getElementsByClassName('father');
var children = father.children;
</script>
<body>
<div class="father">
<h1>biaoti</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
</body>
②更新节点
js代码写在后边防止意外
<body>
<div id="id1">
</div>
</body>
<script>
var id1 = document.getElementById('id1');
</script>
给id1设置内容
id1.innerText='123'
解析html文本,插入标签内容
id1.innerHTML='<strong>123</strong>'
。
样式操作
属性使用字符串包裹
③ 删除节点
删除节点的步骤:先获取父节点,然后再通过父节点删除自己
<body>
<div id="father">
<h1>标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
</body>
<script>
var self = document.getElementById("p1");
var father = document.getElementById("father");
</script>
father.removeChild(p1)
删除子节点p1 ^
p1.parentElement
找到p1的父节点^
father.children[0]
找到第一个孩子^
father.children
找到所有孩子^
如果想要删除所有子节点,想当然觉得可以如下步骤删除
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);
但删除的js操作删除是一个动态的删除,完成第一条后就只剩两条,此时就没有father.children[2]了,所以会报错
④插入节点
我们获得了某个DOM节点后,
假设节点为空,就可以通过innerHTML增加一个元素
假设节点已经存在元素可,再用innerHTML就会覆盖原来的元素,出问题了
追加操作
- 操作一:将已经存在的元素追加到需要的地方
代码如下,我们通过对list运用
list.appendChild(js)
将div外的p元素追加到div内做子元素
<body>
<p id="js">js</p>
<div id="list">
<p id="se">javase</p>
<p id="ee">javaee</p>
<p id="me">javame</p>
</div>
</body>
<script>
var js = document.getElementById("jd");
var list = document.getElementById("list");
</script>
由
到
操作二:将新节点追加到需要的地方
var js = document.getElementById("js");
var list = document.getElementById("list");
//创建一个新的p元素
var newp = document.createElement("p");
newp.id = "newp";
newp.innerText="hello";
list.appendChild(newp)
效果:
方法三:通过setAttribute(" qualifiedname “,” value");可以给增添的元素设置任何属性
如下:给list父元素下增添type="./js/qj.js"的元素
myscript.setAttribute("type","./js/qj.js");
var myscript = document.createElement("script");
myscript.setAttribute("type","./js/qj.js");
完成元素的创造后通过appendchild增添在list下
所得如图:
方法四:把一个元素查到另一个元素的某一个子节点的前面
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
list.insertBefore(js,ee);
将js元素插入到ee的前面