前端學習第65天js閉包函式,選擇器,事件初識,js處理頁面內容,事件控制標題欄,js控制類名
阿新 • • 發佈:2018-12-19
一.函式閉包
```js // 函式的巢狀定義, 定義在內部的函式就稱之為 閉包 // 1.一個函式要使用另一個函式的區域性變數 // 2.閉包會持久化包裹自身的函式的區域性變數 // 3.解決迴圈繫結 function outer() { var num = 10; function inner() { // 閉包 // 1.在inner函式中,使用了outer的區域性變數num return num; } return inner; } var innerFn = outer(); // 2.藉助閉包,將區域性變數num的生命週期提升了 var num = innerFn(); console.log(num);
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>閉包</title> </head> <body> 閉包 </body> <script> // 瞭解知識點 // 閉包: 區域性的函式(被一個函式包裹的函式) // 為什麼使用閉包: // 1.一個函式要使用另一個函式的區域性變數 // 2.閉包會持久化包裹自身的函式的區域性變數 // 3.解決迴圈繫結// 函式的巢狀定義 function outer() { var num = 10; function inner() { // 1.在inner函式中,使用了outer的區域性變數num return num; } return inner; } var innerFn = outer(); // 2.藉助閉包,將區域性變數num的生命週期提升了 var num = innerFn(); console.log(num); </script> </html>
二.面向物件js
```js // 1.單一物件 var obj = { // 屬性 name: 'Zero', // 方法 teach: function () { console.log("教學"); } }; obj.name | obj.teach() // 2.建構函式 function Person(name) { // 類似於python中的類一樣來使用 // this代表Person建構函式例項化出的所有具體物件中的某一個 this.name = name; this.teach = function () { console.log(this.name + "正在教學"); } } // ①通過建構函式例項化出具體物件 // ②通過物件.語法呼叫屬性與方法 var p1 = new Person("張三"); p1.name // 張三, this指向p1物件 var p2 = new Person("李四"); p2.teach // 李四正在教學, this指向p2物件 // 3.ES6類語法 class Student { // 需要構造器(建構函式)來完成物件的宣告與初始化 constructor (name) { // 屬性在構造器中宣告並完成初始化 this.name = name; } // 類中規定普通方法 study () { console.log(this.name + "正在學習"); } // 類方法 static fn() { console.log("我是類方法") } } // 類中的普通方法由類的具體例項化物件來呼叫 // 類中的類方法由類直接來呼叫(這型別的方法大多是功能性方法,不需要物件的存在)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>面向物件js</title> </head> <body> 面向物件js </body> <script> // 物件: 特徵與行為的結合體, 是一個具象的實體 // js物件語法 var obj = { // 屬性 name: 'Zero', // 方法 teach: function () { console.log("教學"); } }; // 物件使用屬性與方法, 採用.語法 console.log(obj.name); obj.teach(); // 建構函式: 宣告與普通函式一樣, 只是函式名採用大駝峰命名規則 function Person(name) { // 類似於python中的類一樣來使用 // 建構函式內部屬性方式不同於普通函式 this.name = name; // this代表Person建構函式例項化出的所有具體物件中的某一個 this.teach = function () { console.log(this.name + "正在教學"); } } // 如何使用建構函式中的屬性與方法 // 1. 通過建構函式例項化出具體物件 // 2. 通過物件.語法呼叫屬性與方法 var p1 = new Person("楊虎虎"); // name: 楊虎虎 var p2 = new Person("劉xx"); // name: 劉xx console.log(p1.name); console.log(p2.name); p1.teach(); p2.teach(); // ES6 // 引入了類 class Student { // 類, 可以例項化物件, 但例項化出的物件需要加以區分 // 需要構造器(建構函式)來完成物件的宣告與初始化 // ES6規定方法的語法 constructor (name) { // 屬性在構造器中宣告並完成初始化 this.name = name; } // 類中規定普通方法 study () { console.log(this.name + "正在學習"); } // 類方法 static fn() { console.log("我是類方法") } } // 1.例項化類的物件 let stu1 = new Student("嘿嘿"); // 2.使用屬性與方法 console.log(stu1.name); stu1.study(); let stu2 = new Student("嘻嘻"); console.log(stu2.name); stu2.study(); Student.fn() </script> <script> // 類方法 class Tool { // 功能類(工具類)中的方法都定義為類方法 static max (num1, num2) { return num1 > num2 ? num1 : num2; } } // 通過Tool類來求兩個數中的大值, 需要Tool類的物件出現嗎? 不需要 => 功能有類直接使用 console.log(Tool.max(666, 888)); // throw "自定義異常"; // console.log("上面如果出現了異常, 邏輯將會被強制停止"); // var num = 10 / 0; // console.log(num) </script> </html>
三.js選擇器
- 直接通過id名(不嚴謹, 也不推薦使用) - getElement系列(最嚴謹) ```js // id獲取: // getElementById('id名') // 只能由document來呼叫 // class獲取 // getElementsByClassName('class名') // 可以由document以及所屬父級呼叫 // tag獲取 // getElementsByTagName('標籤名') // 可以由document以及所屬父級呼叫 ``` - querySelector ```js // 獲取第一個滿足要求的目標 // querySelector() // 獲取所有滿足要求的目標 // querySelectorAll() // 1.引數: 就採用的是css選擇器語法 // 2.可以由document及父級來呼叫 // 3.對id檢索不嚴謹 ```
<!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> <script> // 節點(瞭解): 在文件(document)中出現的所有內容都是document中的節點 // 節點(node): 標籤節點(元素element) | 註釋節點 | 文字節點 | <!doctype>節點 console.log([bd]) // 文字 註釋 文字 標籤 文字 標籤 文字 標籤 文字 標籤 文字 </script> <script> // js選擇器: 將js與html建立起連線 // js中一般稱標籤為頁面元素 // 1.直接通過id名進行匹配 console.log(d); // 兩個都可以找到 // 2.getElement系列(最嚴謹) // 所有顯示在頁面中的內容(展現給使用者看的), 都是屬於文件(document)物件的內容, 存放在文件中 // console.log(document) // 獲取文件中的標籤 => document物件通過.語法去獲取具體的目標標籤元素 // ① id var div = document.getElementById('d'); // 檢索得到頁面中出現的第一個滿足條件的目標 console.log(">>>", div); var body = document.getElementById("bd"); console.log(body); // 注: getElementById該方法只能由document來呼叫 // 原因: 我們需要保證一個文件中一個id只能出現一次, document檢索的就是文件, // 而某父級標籤只能檢索自身標籤內部區域, document可以保證文件中只能一個id // 只出現一次,某父級標籤只能保證自身內部區域id不重複,能不能保證與外界不重複? // 不能, 所以從安全形度出發, 獲取唯一物件的getElementById方法只能由能確定唯一id的 // 物件來呼叫, 能被document呼叫, 不能被sup來呼叫 // ② 類名 var divs = document.getElementsByClassName('dd'); console.log(divs); // 兩個div在body之中, 上方已經獲取了body, 那能否通過body來獲取body中的div var divs1 = body.getElementsByClassName('dd'); console.log(divs1); // ③ 標籤名 var divs = document.getElementsByTagName('div'); console.log(divs) console.log('--------------------------------------------------'); // 3.querySelector系列(最方便) // 引數: 就是css選擇器語法 // querySelector檢索第一個 var div = document.querySelector('body > .dd'); console.log(div); // querySelectorAll檢索所有滿足結果 var divs = document.querySelectorAll('body > .dd'); console.log(divs); var divs = body.querySelectorAll('.dd'); console.log(divs) var divs = body.querySelectorAll('#d'); // 不嚴謹 console.log(divs) </script> </html>
四.事件初識
```js // js事件: 頁面標籤在滿足某種條件下可以完成指定功能的這種過程, 成之為事件 // 某種條件: 如滑鼠點選標籤: 點選事件 | 滑鼠雙擊標籤: 雙擊事件 | 鍵盤按下: 鍵盤按下事件 // 指定功能: 就是開發者根據實際需求完整相應的功能實現 // 鉤子函式: 就是滿足某種條件被系統回撥的函式(完成指定功能) // 點選事件: 明確啟用鉤子的條件 = 啟用鉤子後改處理什麼邏輯, 完成指定功能(函式) // 獲取頁面標籤是前提 var div = document.querySelector('.div'); // 鉤子條件: 雙擊 = 指定功能(自身背景顏色變紅) div.ondblclick = function () { this.style.backgroundColor = 'red'; } ```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件初識</title> <style> .div { width: 200px; height: 200px; background-color: coral; } </style> </head> <body> <div class="div"></div> <div class="div"></div> </body> <script> // js事件: 頁面標籤在滿足某種條件下可以完成指定功能的這種過程, 成之為事件 // 某種條件: 如滑鼠點選標籤: 點選事件 | 滑鼠雙擊標籤: 雙擊事件 | 鍵盤按下: 鍵盤按下事件 // 指定功能: 就是開發者根據實際需求完整相應的功能實現 // 鉤子函式: 就是滿足某種條件被系統回撥的函式(完成指定功能) // 點選事件: 明確啟用鉤子的條件 = 啟用鉤子後改處理什麼邏輯, 完成指定功能(函式) var div = document.querySelector(".div"); // 找到的是第一個.div div.onclick = function () { // alert(123) this.style.backgroundColor = "pink"; } // 明確第一個及第二個 var divs = document.querySelectorAll('.div'); divs[1].ondblclick = function () { divs[0].style.backgroundColor = "yellow"; } </script> </html>
五.js操作頁面內容
- 文字內容 ```js // box.innerText // 可以設值, 也可以獲取值 ``` - 標籤內容 ```js // box.innerHTML // 可以設值, 也可以獲取值, 能解析html語法程式碼 // box.outerHTML // 獲取包含自身標籤資訊的所有子內容資訊 ``` - 樣式 ```js // box.style.樣式名 ==> 可以設值,也可以獲取,但操作的只能是行間式 // getComputedStyle(box, null).樣式名 ==> 只能獲取值,不能設值, 能獲取所有方式設定的值(行間式 與 計算後樣式) // 注: 獲取計算後樣式,需要關注值的格式 ```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS處理頁面內容</title> <style> div { width: 100px; height: 100px; background-color: cyan; margin-top: 15px; } </style> </head> <body> <div class="d1">001</div> <div class="d2">002</div> <div class="d3">003</div> <div class="box"></div> </body> <script> // 先獲取頁面元素 var d1 = document.querySelector('.d1'); var d2 = document.querySelector('.d2'); var d3 = document.querySelector('.d3'); // ① 操作文字內容 var text = d1.innerText; // 獲取內容 console.log(text); // 修改(刪除)內容 d1.innerText = ""; d1.innerText = "修改後的文字內容"; // ② 操作子標籤 // 獲取 var html = d2.innerHTML; console.log(html) // 修改 d2.innerHTML = "<b>加粗的文字</b>"; // 可以解析html語法的程式碼 // d2.innerText = "<b>加粗的文字</b>"; // 瞭解 console.log(d2.innerHTML); // 只是標籤內部的子標籤與子內容 console.log(d2.outerHTML); // 不僅包含標籤內部的子標籤與子內容,還包含自身標籤資訊 // ③ 操作頁面樣式 // 獲取 ?? var bgColor = d3.style.backgroundColor; // 只能獲取行間式 console.log(bgColor); // 修改 d3.style.backgroundColor = "yellow"; // 只能修改行間式 // 問題: 那用內聯外聯設定的樣式如何獲取 // 內聯與外聯設定的樣式叫: 計算後樣式 // getComputedStyle(目標標籤, 偽類(null填充)).具體的樣式 bgColor = window.getComputedStyle(d3, null).backgroundColor; // 相容性較差 console.log(bgColor); // 可以獲取計算後樣式, 也可以獲取行間式, 但它為只讀 bgColor = getComputedStyle(d3, null).getPropertyValue('background-color'); // 相容性較好 console.log(bgColor); // 一些不常用的屬性會出現瀏覽器之間的相容問題, 通過新增字首來處理 console.log(d3.style); // chrome: -webkit- // ie: -ms- // opera: -o- </script> <script> // 需求: box的顏色通過點選在cyan與red之間切換 var box = document.querySelector('.box'); box.onclick = function () { var bgColor = getComputedStyle(this, null).backgroundColor; console.log(bgColor); // 要注意計算後樣式獲取的結果, 以及結果具體的字串格式 if (bgColor == 'rgb(0, 255, 255)') { this.style.backgroundColor = 'red'; } else { this.style.backgroundColor = 'cyan'; } } </script> </html>
六.js事件控制標題欄
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js事件控制標題欄</title> <style> .part1 div { width: 100px; height: 30px; text-align: center; line-height: 30px; float: left; cursor: pointer; } .part1 { overflow: hidden; } h2 { height: 30px; background-color: cyan; } </style> </head> <body> <div class="part1"> <div class="b1">標題欄</div> <div class="b2">標題欄</div> <div class="b3">標題欄</div> <div class="b4">標題欄</div> </div> <h2></h2> </body> <script> /* var b1 = document.querySelector('.b1'); // 滑鼠懸浮事件 b1.onmouseenter = function () { console.log("滑鼠懸浮上了"); // 懸浮上後,該標籤的字型顏色變化橘色 this.style.color = "#FF6700"; } // 需求並非為滑鼠移走,去除顏色 b1.onmouseleave = function () { this.style.color = "#000"; } */ </script> <script> // 製作資料 var data = ["標題1", "標題2", "標題3", "標題4"]; var divs = document.querySelectorAll('.part1 div'); console.log(divs); // 迴圈繫結 => 會出現變數(i)汙染 for (let i = 0; i < divs.length; i++) { divs[i].onmouseenter = function () { // 列印自身索引值 console.log(i); // 將自身顏色變為橘色,其他兄弟顏色變為黑色 // 就是i為橘色, 非i為黑色 changeColor(i); // 懸浮內容 changeContent(i) } } // console.log(i); // 自定義的修改顏色的方法 function changeColor(index) { for (let i = 0; i < divs.length; i++) { // 先不管三七二十一,全改成黑色 divs[i].style.color = "black"; // 如果是目標選中標籤,它的顏色再重新設定為橘色 if (i == index) { divs[i].style.color = "#FF6700"; } } } var h2 = document.querySelector('h2'); // 修改內容 function changeContent(index) { h2.innerText = data[index]; } </script> </html>
七.js控制類名
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js控制類名</title> <style> .y { width: 100px; height: 100px; background-color: red; border-radius: 50%; } .f { width: 100px; height: 100px; background-color: orange; } .g { display: none; } .ttt { } </style> </head> <body> <ul> <li class="l1">圓</li> <li class="l2">方</li> <li class="l3">滾</li> </ul> <div></div> </body> <script> var box = document.querySelector('div'); var l1 = document.querySelector('.l1'); l1.onclick = function () { box.className = 'y' } var l2 = document.querySelector('.l2'); l2.onclick = function () { box.className = 'f' } var l3 = document.querySelector('.l3'); l3.onclick = function () { box.className = 'g'; // box.className = ""; // 清除類名 // box.className = 'y f'; // box.className += " ttt"; } </script> </html>