渚漪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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。