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树形结构

1. 更新DOM节点
2. 遍历DOM节点
3. 删除一个DOM节点
4. 添加一个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节点

步骤：

1. 先获取父节点
2. 在通过父节点删除自己

<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主：狂神说