javascript入门 (二)
javascript入门(二)
面向对象原型继承
以前的东西，用的少
<script>
var student = {
name : "zs",
age : "3",
run:function(){
console.log(this.name+"在跑")
}
};
var xiaoming = {
name : 'xiaoming'
}
//小明的原型指向student
xiaoming.__proto__=student;
</script>
面向对象class继承
classES6以后引用
定义一个类，类里面有属性和方法
<script>
class Student{
configurable(name){
this.name=name;
}
hello(){
alert("hello");
}
}
class xiaoxuesheng extends Student{
configurable(name,grade){
super(name);
this.grade = grade;
}
mygrade(){
alert("xiaoxuesheng")
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new xiaoxuesheng("1111");
</script>
操作BOM对象（重点）
浏览器介绍：
B：浏览器
O：对象
M：模型
IE6——最新版 Window自带
Chrome 好用，基本上都下他
Safari 苹果自带
FireFox Linux自带
以上是内核,内核可以切换
window
window代表浏览器窗口
Navigator(不建议用)
Navigator封装了浏览器的信息
大多数时候不使用navigator对象,因为会被人为修改
screen
代表屏幕尺寸
location（重要）
location代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新的地址
document
document代表当前页面,HTML DOM文档树
获取具体的文档树节点
<dl id="app">
<dt>java</dt>
<dd>javaSE</dd>
<dd>javaEE</dd>
</dl>
<script>
var ss = document.getElementById('app');
</script>
能动态的获得节点，就可以动态的添加和删除节点
document可以获取网页的cookie
cookie是不安全的，可以被劫持！
恶意人员：获取你的cookie上传到他的服务器，侵犯你的隐私
**服务器端可以设置cookie：httpOnly
history
history.back//返回
history.forward//前进
不建议前端写,一般是服务器来写
获得DOM节点(重要)
DOM:文档对象模型
核心
浏览器网页就是一个DOM树形结构
- 更新DOM节点
- 遍历DOM节点
- 删除一个DOM节点
- 添加一个DOM节点
要操作一个DOM节点，就必须先获得这个DOM节点
<div id="father">
<h1 id="h1">H1</h1>
<p id="p1">P1</p>
<p class="p2">P2</p>
</div>
<script>
var father = document.getElementById('father');
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
</script>
更新DOM节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
</script>
操作文本：
id1.innerText='123'//修改文本的值
id1.innerHTML='<strong></strong>'//可以解析HTML标签
操作JS：
id1.style.color= 'red'
删除DOM节点
步骤：
- 先获取父节点
- 在通过父节点删除自己
<div id="father">
<h1 id="h1">H1</h1>
<p id="p1">P1</p>
<p class="p2">P2</p>
</div>
<script>
var self = document.getElementById('p1')
var father = p1.parentElement;
father.removeChild(self);
</script>
father.removeChild(p1)
注意:删除多个节点的时候，child是在动态变化的
创建插入DOM节点
如果我们获得了一个为空的DOM节点，可以用innerHtml来增加一个元素，如果已经存在元素了，就不能使用innerHtml
追加 append
<p id="js">JS</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');
</script>
创建一个新的标签
<p id="js">JS</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');
//通过JS创建一个新的节点
var newP = document.createElement('P');//创建一个P标签
newP.id = 'newP';
newP.innerText = 'Hello,JS';
//创建一个标签节点(通过这个属性，可以设置任意的值)
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
</script>
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
//通过JS创建一个新的节点
var newP = document.createElement('P');//创建一个P标签
newP.id = 'newP';
newP.innerText = 'Hello,JS';
//创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
var body = document.getElementsByTagName('body');
// body[0].style.backgroundColor = '#a9475b';
// body.setAttribute('style','background-color:wheat');
</script>
操作表单（重要）
表单是什么 form
- 文本框 text
- 下拉框 select
- 单选框 radio
- 复选框 checkbok
- 隐藏域 hidden
- 密码框 password
- ...
表单目的：提交信息
获得要提交的信息
<form action="post">
<p>
<span>用户名：</span><input type="text" id="username">
</p>
<!--单选框的值为定义好value的值-->
<p>
<span>性别：</span>
<input type="radio" name="sex" value="boy" id="boy">男
<input type="radio" name="sex" value="girl" id="girl">女
</p>
</form>
<script>
var username = document.getElementById('username');
var boy = document.getElementById('boy');
var girl = document.getElementById('girl');
//username.value; 得到输入框的值
//username.value = '123'; 修改输入框的值
//对于单选框/多选框等固定的值，boy.value;只能获得当前的值
boy.checked;//结果为true，则被选中
</script>
提交表单
md5加密密码，表单优化
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
<p>
<span>用户名：</span><input type="text" id="username">
</p>
<p>
<span>密码： </span><input type="password" id="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<!--绑定事件-->
<button type="submit" >提交</button>
</form>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script>
function aaa(){
alert(1);
var uname = document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
//可以校验判断表单内容，true通过提交,false阻止提交
return true;
}
</script>
复习笔记参考B站UP主：狂神说
