JavaScript 系列部落格（五）
阿新 • • 發佈：2018-12-23
JavaScript 系列部落格（五）
前言
本篇部落格學習 js 選擇器來控制 css 和 html、使用事件（鉤子函式）來處理事件完成後完成指定功能以及js 事件控制頁面內容。
js 選擇器
在學習 js 選擇器前需要了解幾個概念。
- 節點（一）：在文件（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;
}