前端學習第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.解決迴圈繫結
二.面向物件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>