JavaScript四:面向对象

面向对象

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数…
此外,JavaScript 允许自定义对象。
所有事物都是对象
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。
布尔型可以是一个对象。
数字型可以是一个对象。
字符串也可以是一个对象
日期是一个对象
数学和正则表达式也是对象
数组是一个对象
甚至函数也可以是对象

以前的写法

var person = {
        name:"zheng",
        age:23,
        run:function () {
            console.log(this.name + "run...");
        }
};
var li = {
    name: "li"
};
li.__proto__ = person;

ES6之后(以后就这么写)

定义一个类、属性、方法

class Student{
        constructor(name) {
            this.name = name;
        }
        say(){
            alert(this.name + 'hello world')
        }
    }
    var s1 = new Student("嘵奇");
    var s2 = new Student("小红");

继承一个类

class Student{
        constructor(name) {
            this.name = name;
        }
        say(){
            alert(this.name + '我是学生');
        }
    }
    var s1 = new Student("嘵奇");
    var s2 = new Student("小红");

    class Pupil extends Student{
        constructor(name,grade) {
            super();
            this.grade = grade;
        }
        speak(){
            alert("我是小学生,我上" + this.grade + "年级");
        }
    }
    var s3 = new Pupil("小刚",2);

原型链

参考连接

操作BOM对象(重点)

JavaScript和浏览器的关系

window(重要)

window 代表浏览器窗口

在这里插入图片描述

screen

代表屏幕尺寸

在这里插入图片描述

location(重要)

location代表当前页面的URL信息
在这里插入图片描述
5.设置新的地址
location.assign(‘地址’)

document

代表当前的页面

获取具体的文档树节点
在这里插入图片描述
获取cookie

document.cookie

history

代表浏览器的历史记录

history.back()//后退
history.forward()//前进

操作DOM对象(重点)

浏览器网页就是一个DOM树形结构

  1. 更新:更新Dom节点
  2. 遍历Dom节点
  3. 删除:删除Domj节点
  4. 添加:添加一个新的节点
    要操作一个Dom节点,就必须先获取这个Dom节点
<div id="father">
   <!--标签选择器-->
   <h1>这是标题</h1>
   <!--id选择器-->
   <p id="id">段落一</p>
   <!--类选择器-->
   <p class="class">段落二</p>
</div>
<script>
   //获取标签节点
   var s1 = document.getElementsByTagName('h1');
   //获取id节点
   var s2 = document.getElementById('id');
   //获取类节点
   var s3 = document.getElementsByClassName('class');
   //获取父节点
   var father = document.getElementById('father');
   //获取父节点下所有的子节点
   var childrens = father.children;
</script>

在这里插入图片描述

以上是原生代码。以后尽量都用jQuery

更新节点

获取节点之后进行操作

id1.innerText = "123"//编辑字体
id1.innerHTML = '<strong>456</strong>'//加粗字体
id1.style.color = 'red'//设置颜色
id1.style.fontSize = '100px'//设置字体

删除节点

先获取父节点,再通过父节点删除

div id="id">
    <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>

删除多个节点的时候,children是时刻变化的,删除的时候要注意

插入节点

假设Dom节点是空的,可以通过innerHTML添加,如果不为空就追加,否则会覆盖掉原来的

<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");
    var newP = document.createElement('p');//创建一个新标签
    newP.id = 'newP';//设置id
    newP.innerText = "hello world";//设置文本
    list.appendChild(newP);//添加标签
</script>

操作表单

表单的目的:提交信息

  • 文本框
  • 下拉框
  • 单选框
  • 多选框
  • 隐藏域
  • 密码框
<from action = "post">
    <p>
        <span>账号:</span><input type="text" id="username">
    </p>
    <p>
        <span>性别:</span><input type="radio" name="sex" value="man" id="boy"><span></span><input type="radio" name="sex" value="woman" id="girl"></p>
</from>
<script>
    var input_text = document.getElementById('username');
    input_text.value;//获取输入框的值
    input_text.value = '545545645546465';//为输入框赋值
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');
    boy_radio.checked;//查看返回的结果,true就是选中
</script>

提交表单

MD5加密

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post">
    <p>
        <span>账号:</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码:</span><input type="password" id="password" name="password">
    </p>

    <button type="submit" onclick="test()">点击提交</button>
</form>

<script>
    function test() {
        var username = document.getElementById('username');
        var password = document.getElementById('password');
        console.log(username.value);
        console.log(password.value);
        password.value = md5(password.value);
        console.log(password.value)
    }
</script>
</body>
</html>

避免密码提交时变长

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="https://www.baidu.com" method="post" onsubmit="return test()">
    <p>
        <span>账号:</span><input type="text" id="username" name="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>
    function test() {
        var username = document.getElementById('username');
        var password = document.getElementById('input_password');
        var mdpwd = document.getElementById('md5_password');
        mdpwd.value = md5(password);
        return true;

    }
</script>
</body>
</html>
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页