JavaScript 系列博客（五）

前言

本篇博客學習 js 選擇器來控制 css 和 html、使用事件（鉤子函數）來處理事件完成後完成指定功能以及js 事件控制頁面內容。css

js 選擇器

在學習 js 選擇器前須要瞭解幾個概念。html

節點（一）：在文檔（document）中出現的全部內容都是 document 中的節點。
節點（二）：標籤節點（元素 element） | 註釋節點 | 文本節點 | <!doctype>節點。

js 選擇器是將 js 與 html 創建起鏈接的橋樑，就比如 css 選擇器是 css 與 html 的橋樑，不過js 中將 html 標籤稱爲元素。函數

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js選擇器</title>
    <style>
        #d {
            color: red;
        }
    </style>
</head>
<body id="bd">
    <!--註釋-->
    <div id="d" class="dd">我是ddd111</div>
    <div id="d" class="dd">我是ddd222</div>

    <div class="sup1">
        <div id="div"></div>
    </div>
    <div class="sup2">
        <div id="div"></div>
    </div>
</body>
</html>

經過 id 名進行匹配

<script>
    console.log(d); // 兩個均可以匹配到
    </script>

經過 getElement

全部顯示在頁面中的內容都是屬於文檔（document）對象的內容，存放在文檔中。學習

console.log(document)
// id 獲取
getElementById('id 名'); // 只能由 document 來調用

// class 獲取
getElementByClassName('class 名'); // 能夠由 document 以及全部父級調用

// tag 獲取
getElementByTagName('標籤名'); // 能夠由 document 以及所屬父級調用

querySelector

// 獲取第一個知足要求的目標
querySelector()

// 獲取全部知足要求的目標
querySelectorAll()

// 1. 參數：採用的爲 css 選擇器語法
// 2. 能夠由 document 以及父級來調用
// 3. 對 id 檢索不嚴謹，慎用 id 選擇器

js 操做頁面內容

文本內容

box.innerText
// 能夠設置，也能夠直接獲取值

標籤內容

box.innerHTML
// 能夠設置，也能夠獲取值，能解析 html 語法代碼

box.outerHTML
// 獲取包含自身標籤信息的全部子內容信息

樣式

/ box.style.樣式名  ==> 能夠設值,也能夠獲取,但操做的只能是行間式

// getComputedStyle(box, null).樣式名 ==> 只能獲取值,不能設值, 能獲取全部方式設置的值(行間式 與 計算後樣式)

// 注: 獲取計算後樣式,須要關注值的格式

頁面標籤全局屬性操做

ele.getAttribute("alert");
// 獲取頁面標籤ele的alert全局屬性的值, 若是沒有該全局屬性值爲null

ele.setAttribute("attr_key", "attr_value");
// 頁面標籤ele已有該全局屬性,就是修改值, 沒有就是添加該全局屬性並賦相應值
// 注: 通常應用場景, 結合css的屬性選擇器完成樣式修改

事件

// js事件: 頁面標籤在知足某種條件下能夠完成指定功能的這種過程, 成之爲事件
// 某種條件: 如鼠標點擊標籤: 點擊事件 | 鼠標雙擊標籤: 雙擊事件 | 鍵盤按下: 鍵盤按下事件
// 指定功能: 就是開發者根據實際需求完整相應的功能實現

// 鉤子函數: 就是知足某種條件被系統回調的函數(完成指定功能)
// 點擊事件: 明確激活鉤子的條件 = 激活鉤子後改處理什麼邏輯, 完成指定功能(函數)

// 獲取頁面標籤是前提
var div = document.querySelector('.div');
// 鉤子條件: 雙擊 = 指定功能(自身背景顏色變紅)
div.ondblclick = function () {
    this.style.backgroundColor = 'red';
}

事件的綁定

// 第一種
box.onclick = function(){}
// 只能綁定一個實現體, 若是有屢次綁定, 保留最後一次
// box.onclick = null來取消事件的綁定

// 第二種
var fn = function() {}
box.addEventListener('click', fn)
// 能綁定多個實現體, 若是有屢次綁定, 按順序依次執行
// box.removerEventListener('click', fn)來取消事件的綁定
// 瞭解: 第三個參數決定冒泡順序(子父級誰先相應事件)

事件對象

// 系統回調事件函數時, 傳遞了一個 事件(event) 實參
// 若是要使用傳遞來的實參 事件(event), 定義接收的 形參 便可
box.onclick = function(ev){
    // 使用事件對象
    // 特殊按鍵 eg: ev.altKey: true | false
    // 鼠標觸發點: ev.clientX | ev.clientY
    
    // 取消冒泡
    ev.cancelBubber = true;
    
    // 取消默認事件
    return false;
}

原文出處：https://www.cnblogs.com/zuanzuan/p/10163737.htmlthis