一、Web APIs:

1. Web API介紹:

1.1 API的概念:

API（Application Programming Interface，應用程序編程接口）是一些預先定義的函數，目的是提供應用程序與開發人員基於某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，無需理解其內部工作機制細節，只需直接調用使用即可.

1.2 Web API的概念

Web API 是瀏覽器提供的一套操作瀏覽器功能和頁面元素的 API (BOM 和 DOM)
現階段主要針對於瀏覽器講解常用的 API , 主要針對瀏覽器做交互效果
MDN 詳細 API : https://developer.mozilla.org/zh-CN/docs/Web/API
此處的 Web API 特指瀏覽器提供的一系列API(很多函數或對象方法)，即操作網頁的一系列工具。例如：操作html標籤、操作頁面地址的方法

1.3 API 和 Web API 總結

API 是爲程序員提供的一個接口，幫助實現某種功能，會使用就可以了，不必糾結內部如何實現
Web API 主要是針對於瀏覽器提供的接口，主要針對於瀏覽器做交互效果。
Web API 一般都有輸入和輸出（函數的傳參和返回值），Web API 很多都是方法（函數）
學習 Web API 可以結合前面學習內置對象方法的思路學習

2. DOM 介紹:

2.1 什麼是DOM

文檔對象模型（Document Object Model，簡稱DOM），是 W3C 組織推薦的處理可擴展標記語言（html或者xhtml）的標準編程接口
W3C 已經定義了一系列的 DOM 接口，通過這些 DOM 接口可以改變網頁的內容、結構和樣式

DOM是W3C組織制定的一套處理 html和xml文檔的規範，所有的瀏覽器都遵循了這套標準

2.2. DOM樹:

DOM樹又稱爲文檔樹模型，把文檔映射成樹形結構，通過節點對象對其處理，處理的結果可以加入到當前的頁面。

文檔：一個頁面就是一個文檔，DOM中使用document表示
節點：網頁中的所有內容，在文檔樹中都是節點(標籤、屬性、文本、註釋等)，使用node表示
標籤節點：網頁中的所有標籤，通常稱爲元素節點，又簡稱爲“元素”，使用element表示

3. 獲取元素:

3.1. 根據ID獲取

語法：document.getElementById(id)
作用：根據ID獲取元素對象
參數：id值，區分大小寫的字符串
返回值：元素對象 或 null

** 案例代碼**

<body>
    <div id="time">2020-3-23</div>
    <script>
        // 因爲文檔頁面從上往下加載，所以先得有標籤 所以script寫到標籤的下面
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir 打印返回的元素對象 更好的查看裏面的屬性和方法
        console.dir(timer);
    </script>
</body>

3.2. 根據標籤名獲取元素

語法：document.getElementsByTagName('標籤名') 或者 element.getElementsByTagName('標籤名') 
作用：根據標籤名獲取元素對象
參數：標籤名
返回值：元素對象集合（僞數組，數組元素是元素對象）

案例代碼

<body>
    <ul>
        <li>知否知否，應是等你好久11</li>
        <li>知否知否，應是等你好久22</li>
        <li>知否知否，應是等你好久33</li>
        <li>知否知否，應是等你好久44</li>
        <li>知否知否，應是等你好久55</li>
    </ul>
    <ul id="nav">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ul>
    <script>
        // 1.返回的是 獲取過來元素對象的集合 以僞數組的形式存儲的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 想要依次打印裏面的元素對象可以採取遍歷的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3. element.getElementsByTagName()  可以得到這個元素裏面的某些標籤
        var nav = document.getElementById('nav'); // 這個獲得nav 元素
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>
</body>

注意：

因爲得到的是一個對象集合, 所以要想操作裏邊的元素就需要遍歷;
得到的元素是動態的;
getElementsByTagName()獲取到是動態集合，即：當頁面增加了標籤，這個集合中也就增加了元素。

3.3. H5新增獲取元素方式:

document.getElementByClassName("類名");	  //根據類名返回元素對象集合
document.querySelector("選擇器");	// 根據指定選擇器返回第一個元素對象
document.querySelectorAll("選擇器");	// 根據指定選擇器的所有對象

注意:

querySelector和querySelectorAll裏面的選擇器需要符號, 比如:document.querySelector("#nav");
案例代碼

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首頁</li>
            <li>產品</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根據類名獲得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2. querySelector 返回指定選擇器的第一個元素對象  切記 裏面的選擇器需要加符號 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll()返回指定選擇器的所有元素對象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>

3.4 獲取特殊元素(body, html):

獲取body:

document.body;	// 獲取body元素對象

獲取html元素:

document.documentElement;	// 獲取html元素對象

4. 事件基礎:

4.1. 事件概述

JavaScript 有能力創建動態頁面，而事件是可以被 JavaScript 偵測到的行爲。
簡單理解: 觸發— 響應機制
網頁中的每個元素都可以產生某些可以觸發 JavaScript 的事件，例如，可以在用戶點擊某按鈕時產生一個事件，然後去執行某些操作

4.2. 事件三要素

事件源(誰): 觸發事件的元素
事件類型(什麼事件): 例如 click 點擊事件
事件處理程序(做啥): 事件觸發後要執行的代碼(函數形式)，事件處理函數

案例代碼

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 點擊一個按鈕，彈出對話框
        // 1. 事件是有三部分組成  事件源  事件類型  事件處理程序   我們也稱爲事件三要素
        //(1) 事件源 事件被觸發的對象   誰  按鈕
        var btn = document.getElementById('btn');
        //(2) 事件類型  如何觸發 什麼事件 比如鼠標點擊(onclick) 還是鼠標經過 還是鍵盤按下
        //(3) 事件處理程序  通過一個函數賦值的方式 完成
        btn.onclick = function() {
            alert('點秋香');
        }
    </script>
</body>

4.3 執行事件的步驟:

獲取事件源
註冊事件(綁定事件)
添加事件處理程序(採取函數賦值形式)

4.4. 常見的鼠標事件:

鼠標事件	觸發條件
onclick	鼠標點擊左鍵觸發
onmouseover	鼠標經過觸發
onmouseout	鼠標離開觸發
onfocus	獲取鼠標焦點觸發
onblur	失去鼠標焦點觸發
onmousemove	鼠標移動觸發
onmouseup	鼠標彈起觸發
onmousedown	鼠標按下觸發

5. 操作元素:

JavaScript的 DOM 操作可以改變網頁內容、結構和樣式, 我們可以利用 DOM 操作元素來改變元素裏面的內容、屬性等. (注意: 這些操作都是通過元素對象的屬性實現的)

5.1 改變元素內容(獲取或設置):

element.innerText

從起始位置到終止位置的內容, 但它去除html標籤, 同時空格和換行也會去掉;

element.innerHTML

起始位置到終止位置的全部內容, 包括html標籤, 同時保留空格和換行;

<head>
    <title>innerHTML</title>
    <script>
        window.onload = function () {
            // 點擊按鈕,div中的文字會變化
            // 1. 獲取元素
            var btn = document.querySelector('button');
            var div = document.querySelector('div');

            // 2. 註冊事件
            btn.onclick = function(){
                // 3. 添加處理程序
                // div.innerHTML = getDate();
                div.innerText = getDate();
            }
            function getDate() {
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var dates = date.getDate();
                var arr = ['星期日', '星期一', '星期二', '星期三', '星期日四','星期五','星期六' ]
                var day = date.getDay()
                return '今天是:' + year + '年' + month + '月' + dates + '日' + arr[day]
            }
        }
    </script>
</head>
<body>
    <button>顯示當前系統時間</button>
    <div>某個時間</div>
    <p>123</p>
</body>

innerText和innerHTML的區別

獲取內容時的區別：
- innerText會去除空格和換行，而innerHTML會保留空格和換行
設置內容時的區別：
- innerText不會識別html，而innerHTML會識別

案例:

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 innerHTML的區別 
        // 1. innerText 不識別html標籤 非標準  去除空格和換行
        var div = document.querySelector('div');
        // div.innerText = '<strong>今天是：</strong> 2020';
        // 2. innerHTML 識別html標籤 W3C標準 保留空格和換行的
        div.innerHTML = '<strong>今天是：</strong> 2020';
        // 這兩個屬性是可讀寫的  可以獲取元素裏面的內容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

5.2. 常用元素的屬性操作:

1. innerText、innerHTML 改變元素內容
2. src、href
3. id、alt、title

獲取屬性值:

元素對象.屬性名

設置屬性的值

元素對象.屬性名 = 值

<head>
    <title>切換圖片t</title>
    <script>
        window.onload = function(){
            // 1. 獲取元素
            var ldh = document.getElementById('ldh');
            var zxy = document.getElementById('zxy');
            var img = document.querySelector('img');
            
            // 2. 註冊事件
            zxy.onclick = function(){
                img.src = './images/zxy.jpg';
                img.title = '張學友';
            }
            ldh.onclick = function(){
                img.src = './images/ldh.jpg';
                img.title = '劉德華';
            }
        }
    </script>
</head>
<body>
    <button id="zxy">張學友</button>
    <button id="ldh">劉德華</button>
    <img src="./images/zxy.jpg" alt="">
</body>

5.3 分時問候：

需求：分時顯示不同圖片，顯示不同的問候語

根據不同時間，頁面顯示不同土坯那，同時顯示不同的問候語
如果上午時間打開頁面，顯示上午好，顯示上午的圖片；
如果下午時間打開頁面，顯示下午好，顯示下午的圖片；
如果晚上時間打開頁面, 顯示晚上好, 顯示晚上的圖片;

案例分析:

根據系統不同時間判斷, 所以需要用到時間內置對象;
利用多分支語句來設置圖片;
需要一個圖片, 根據時間修改圖片,就需要用到操作元素的src屬性;
徐亞一個div元素,顯示不同問候語, 修改元素內容即可;

實現:

<head>
    <title>Document</title>
    <style>
        img{
            width: 300px;
        }
    </style>
    <script>
        window.onload = function() {
            var img = document.querySelector('img');
            var div = document.getElementsByClassName('wenhou');

            var date = new Date();
            var h = date.getHours();
            console.log(h)
            if(h < 9) {
                img.src = "./images/z.gif";
                div.innerHTML = "早上好呀!!"
            } else if (h < 12 ){
                img.src = "./images/s.gif";
                div.innerHTML = "上午好呀!!"
            } else if (h < 18 ){
                img.src = "./images/x.gif";
                div.innerHTML = "下午好呀!!"
            } else {
                img.src = "./images/w.gif";
                div.innerHTML = "晚上好呀!!"
            }
        }
    </script>
</head>
<body>
    <div>
        <img src="./images/z.gif" alt="">
        <div class="wenhou">早上好呀!!</div>
    </div> 
</body>

5.4. 表單元素的屬性操作:

利用Dom可以操作如下表單元素的屬性:

type、value、checked、selected、disable

獲取屬性的值

元素對象.屬性名

設置屬性的值

元素對象.屬性名 = 值
表單元素中有一些屬性如：disabled、checked、selected，元素對象的這些屬性的值是布爾型

例代碼

<body>
    <button>按鈕</button>
    <input type="text" value="輸入內容">
    <script>
        // 1. 獲取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 註冊事件 處理程序
        btn.onclick = function() {
            // 表單裏面的值 文字內容是通過 value 來修改的
            input.value = '被點擊了';g
            // 如果想要某個表單被禁用 不能再點擊 disabled  我們想要這個按鈕 button禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函數的調用者 btn
        }
    </script>
</body>

5.5 案例: 仿京東顯示密碼:

點擊按鈕將密碼框切換爲文本框, 並可以查看密碼明文

案例分析:

核心思路: 點擊眼睛按鈕, 把密碼框類型改爲文本框就可以看見裏面的密碼;
一個按鈕兩種狀態, 點擊一次, 切換爲文本框,繼續點擊一次切換爲密碼;
算法: 利用flag變量, 來判斷flag的值, 如果是1就切換爲文本框, flag設置爲0, 如果是0,就切換爲密碼框, flash設置爲1;

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京東輸入框</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        .box #passwd {
            padding: 0 10px;
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box img {
            position:absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }

    </style>
    <script>
        window.onload = function() {
            var img = document.getElementById('eye');
            var pwd = document.getElementById('passwd');
            var flag = 0;
            img.onclick = function() {
                if(flag == 0){
                    pwd.type = 'text';
                    this.src = "./images/open.png";
                    flag = 1;
                } else {
                    pwd.type = 'password';
                    this.src = "./images/close.png";
                    flag = 0;
                }   
            }
        }
    </script>
</head>
<body>
    <div class="box">
        <label for="">
            <img src="./images/close.png" alt="" id="eye">
        </label>
        <input type="password" name="password" id="passwd">
    </div>
</body>

5.6 樣式屬性操作

可以通過 JS 修改元素的大小、顏色、位置等樣式。

常用方式:

element.style		行內樣式操作
element.className	類名樣式操作

方式一: 通過操作style屬性

元素對象的style屬性也是一個對象
元素對象.style 樣式屬性 = 值;

注意:

js裏面的樣式採用駝峯命名法; 例如:fontSize、backgroundColor
js修改style樣式操作, 產生的事行內樣式, css權重比較高

案例代碼

<body>
    <div></div>
    <script>
        // 1. 獲取元素
        var div = document.querySelector('div');
        // 2. 註冊事件 處理程序
        div.onclick = function() {
            // div.style裏面的屬性 採取駝峯命名法 
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>
</body>

6. 案例:

6.1 案例一: 淘寶點擊關閉二維碼:

當鼠標點擊二維碼關閉按鈕的時候, 則關閉整個二維碼

案例分析:

核心思路: 利用樣式的顯示和隱藏完成, display:none隱藏元素; display:block顯示元素;
點擊按鈕, 就讓二維碼隱藏即可
實現:

<style>
    .box {
        position: relative;
        width: 74px;
        height: 88px;
        border: 1px solid #ccc;
        font-size: 12px;
        text-align: center;
        color: #f40;
        margin: 100px auto;
    }
    .box img {
        width: 60px;
        margin: 5px;
    }
    .close-btn {
        position: absolute;
        top: -1px;
        left: -16px;
        width: 14px;
        height: 14px;
        border: 1px solid #ccc;
        line-height: 14px;
        font-family: Arial, Helvetica, sans-serif;
        cursor: pointer;
    }
</style>

<script>
    window.onload = function(){
        var btn = document.querySelector('.close-btn');;
        var box = document.querySelector('.box');
        btn.onclick = function() {
            box.style.display = 'none';
        }
    }
</script>
<body>
    <div class="box">
        淘寶二維碼
        <img src="./images/tao.png" alt="">
        <i class="close-btn">x</i>
    </div>    
</body>

6.2 案例二：循環精靈圖背景:

可以利用for循環設置一組元素的精靈圖背景:

案例分析:

首先精靈圖圖片排列有規律的;
核心思路: 利用for循環, 修改精靈圖片的背景位置, background-position;
讓循環裏面的i索引號*44 就是每個圖片的y座標;

示例:

<head>
    <title>淘寶精靈圖</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .box {
            width: 250px;
            margin: 100px auto;
        }
        
        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(images/sprite.png) no-repeat;
        }
    </style>
    <script>
        window.onload = function() {
            // 1. 獲取元素 所有的小li 
            var lis = document.querySelectorAll('li');
            for (var i = 0; i < lis.length; i++) {
                // 讓索引號 乘以 44 就是每個li 的背景y座標  index就是我們的y座標
                var index = i * 44;
                lis[i].style.backgroundPosition = '0 -' + index + 'px';
            }
        }
    </script>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

6.3 案例三：顯示隱藏文本框內容:

當鼠標點擊文本框時, 裏面的默認文字隱藏, 當鼠標離開文本時, 裏面文字顯示:

案例分析:

首先表單需要2個新事件, 獲得焦點onfocus, 失去焦點 onblur;
如果獲得焦點, 判斷表單裏的內容是否爲默認文字,如果是,就清空
如果失去焦點, 判斷表單內容是否爲空, 如果爲空, 則將表單內容改爲默認文字;

    <title>文本框隱藏顯示</title>
    <style>
        input {
            color: #ccc;
        }
    </style>
    <script>
        window.onload = function() {
            var text = document.querySelector('input');
            text.onfocus = function() {
                if(this.value === "筆記本") {
                    this.value = "";
                }
            }
            text.onblur = function() {
                if(this.value === "") {
                    this.value = "筆記本";
                }
            }
        }
    </script>
</head>

<body>
    <input type="text" value="筆記本" class="input">
</body>

方式2：通過操作className屬性

元素對象.className = 值;
因爲class是關鍵字, 所有使用className

注意:

如果樣式修改比較多, 可以採取操作類名方式更改元素樣式;
class因爲是保留字, 因此採用className來操作元素類名屬性;
className會直接更改元素的類名, 會覆蓋原先的類名

實現:

<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 獲得修改元素樣式  如果樣式比較少 或者 功能簡單的情況下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';

            // 2. 我們可以通過 修改元素的className更改元素的樣式 適合於樣式較多或者功能複雜的情況
            // 3. 如果想要保留原先的類名，我們可以這麼做 多類名選擇器
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>

6.4 案例：密碼框格式提示錯誤信息

用戶如果離開密碼數據框, 裏面輸入個數不是6~16, 則提示錯誤信息, 否則提示輸入正確信息

案例分析:

首先判斷的事件是失去焦點 onblur;
如果輸入正確, 則提示正確的信息,顏色爲綠色的小圖標;
如果輸入不是6~16位, 則提示錯誤信息, 顏色爲紅色的小圖標;

實現:

<head>
    <title>密碼框</title>
    <style>
         div {
            width: 600px;
            margin: 100px auto;
        }
        
        .message { 
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        
        .wrong {
            color: red;
            background-image: url(images/wrong.png);
        }
        
        .right {
            color: green;
            background-image: url(images/right.png);
        }
    </style>
    <script>
        window.onload = function() {
            var ipt = document.querySelector('.ipt');
            var message = document.querySelector('.message');
            ipt.onblur = function(){
                if (this.value.length < 6 || this.value.length > 16) {
                    message.className = 'message wrong';
                    message.innerHTML = '您輸入的位數不對要求6~16位';
                } else {
                    message.className = 'message right';
                    message.innerHTML = '您輸入的正確';
                }
            }
        }
    </script>
   
</head>
<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">請輸入6~16位密碼</p>
    </div>
</body>

11前端學習之WebAPI(一):Web API介紹、DOM 介紹、獲取元素、 事件基礎、操作元素:

文章目錄

一、Web APIs:

1. Web API介紹:

1.1 API的概念:

1.2 Web API的概念

1.3 API 和 Web API 總結

2. DOM 介紹:

2.1 什麼是DOM

2.2. DOM樹:

3. 獲取元素:

3.1. 根據ID獲取

3.2. 根據標籤名獲取元素

3.3. H5新增獲取元素方式:

3.4 獲取特殊元素(body, html):

4. 事件基礎:

4.1. 事件概述

4.2. 事件三要素

4.3 執行事件的步驟:

4.4. 常見的鼠標事件:

5. 操作元素:

5.1 改變元素內容(獲取或設置):

5.2. 常用元素的屬性操作:

5.3 分時問候：

5.4. 表單元素的屬性操作:

5.5 案例: 仿京東顯示密碼:

5.6 樣式屬性操作

6. 案例:

6.1 案例一: 淘寶點擊關閉二維碼:

6.2 案例二：循環精靈圖背景:

6.3 案例三：顯示隱藏文本框內容:

6.4 案例：密碼框格式提示錯誤信息

11前端學習之WebAPI(一):Web API介紹、DOM 介紹、獲取元素、事件基礎、操作元素: