JavaScript 系列博客（五） 前言 本篇博客學習 js 選擇器來控制 css 和 html、使用事件（鉤子函數）來處理事件完成後完成指定功能以及js 事件控制頁面內容。 js 選擇器 在學習 js 選擇器前需要瞭解幾個概念。 節點（一）：在文檔（document）中出現的所有內容都是 doc ...
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;
}
