渚漪Day08——web前端入门【JavaScript03】

时间 2020-06-15

标签 day08 day web 前端入门 JavaScript03 栏目 HTML 繁體版

原文原文链接

五、内部对象

Date 日期的对象

Json 对象

对象都用{}
数组都用[]
全部键值对都是用 key:value

JSON.stringify()讲对象转化为字符串javascript

JSON.parse()解析字符串变为对象css

六、面向对象编程

6.1 什么是面向对象

JavaScript，Java，c# 面向对象html

JavaScript有些区别java

类：模板编程
对象：具体实例json

在JavaScript这个须要换一下思惟方式c#

原型：__ proto __数组

ES6有class，和java同样本质是原型浏览器

七、操做BOM对象（重点）

浏览器的介绍app

JavaScript和浏览器的关系？

JavaScript诞生就是为了让他在浏览器中运行

BOM：浏览器对象模型

IE6~11
Chrome
Safari
Firefox
Opera

三方

QQ浏览器
360浏览器

能够安装内核

window

window表明浏览器窗口

Navigator

Navigator 封装了浏览器的信息

screen

表明屏幕尺寸

location

location表明当前页面的URL信息

history

history.back()//后退

history.forward()//前进

八、操做DOM（重点）

DOM：文档对象模型

核心

更新：更新Dom节点
变量Dom节点：获得Dom节点
删除：删除一个Dom节点
添加：添加一个Dom节点

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>

</div>

<script>
    //对应选择器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');

    var childs = father.children;//获取父节点的全部子节点
</script>

更新节点

var p1 = document.getElementById('p1');
p1.innerText="123";
p1.innerHTML='<strong>123</strong>';
p1.style.color='yellow';

删除节点

先获取父节点，再删除本身

var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self)

插入节点

var list = document.getElementById('p1');

list.appendChild(js)

insertBefore(newNode,TargetNode)

新建节点

var NP = document.CreateElement('p');
NP.id = 'NP1';//或者   NP.setAttribute('id','NP1');
NP.innerText="123";
list.appendChild(NP)

九、操做表单（验证）

<!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" id="user" onsubmit="return aaa()">
        <p>
            <span>用户名：</span><input type="text" id="username" name="username">
        </p>
        <p>
            <span>密码：</span><input type="password" id="password">
        </p>
        <input type="hidden" id="md5-password" name="password">

        <button type="submit">提交</button>
    </form>

    <script>
        function aaa() {
            alert(1);
            var username = document.getElementById('username');
            var pwd = document.getElementById('password');
            var mpwd = document.getElementById('md5-password');
            mpwd.value=md5(pwd.value);
            return true;
        }
    </script>
</body>
</html>