JavaScript學習筆記【DAY5(2020.8.21)週五】
事件:所謂的事件，是瀏覽器監聽使用者行為的一種機制。
比如，當用戶使用滑鼠 點選 一個按鈕，會觸發該按鈕的 點選 事件 如果此時我們想要執行程式碼 就可以通過JS指令碼設定 點選 事件的處理函式
同樣的，如果使用者滑鼠雙擊一個按鈕，會觸發該按鈕的雙擊事件 類似的事件還有很多
事件三要素
1、事件源（誰）： 觸發事件的元素
2、事件型別（什麼事件）： 例如 click 點選事件
3、事件處理程式（做啥）：事件觸發後要執行的程式碼(函式形式)，事件處理函式
事件的分類
滑鼠事件
onclick 點選事件
ondblclick 雙擊事件
onmousedown 滑鼠按下事件
onmouseup 滑鼠抬起
onmouseover 滑鼠進入事件
onmouseenter 滑鼠進入事件
onmouseout 滑鼠離開事件
onmouseleave 滑鼠離開事件
onmousemove 滑鼠移動事件
鍵盤事件
keydown 鍵盤鍵被按下
keyup 鍵盤鍵被鬆開
keypress 輸入
瀏覽器的事件
load 頁面中所有資源都被載入完畢的時候
scroll 頁面的捲動
scrollTop 獲取頁面的捲動值(滾動值)
document.
焦點事件
focus 當一個元素獲取到焦點時
blur 當一個元素失去焦點時
移動端事件
touchstart 觸控開始事件 會在手指按下的時候觸發
touchmove 觸控並移動 會在手指按下並移動的時候觸發
touchend 觸控結束事件 會在手指離開的時候觸發
其它事件
animationstart 動畫開始時觸發
animationend 動畫結束時觸發
transitionend 過渡結束時觸發
執行事件的步驟
1.獲取事件源
2.註冊事件(繫結事件)
3.新增事件處理程式(採取函式賦值形式)
繫結事件
繫結事件的第一步 獲取元素
// HTML程式碼
<button id="btn">點我試試看</button>
// JS程式碼
var btn = document.getElementById("btn");
function click() {
console.log("你好");
}
btn.onclick = click;
字串
儲存:計算機只能夠儲存二進位制 、儲存字串轉為二進位制
需要有 對照表 方便將 字元 和 二進位制 進行轉換
這樣的 對照表 叫做 編碼方式 常見的有 ascii、unicode 等
定義字串的新的方式
var str = new String("a");
console.log(typeof str); // object
// 轉換為字串的方式就是str.toString();
包裝型別: 在面向物件的思想中，一切都得是物件。而JS中有一些基本型別，此時就需要 包裝 一下，將這些基本型別 包裝 成物件型別。
屬性
length屬性表示字串的長度
// 字串也可以通過下標獲取對應的字元
var a = "abcdefg";
console.log(a[2]); // c
console.log(a.length); // 7
方法
charAt 引數是數字 返回值是該數字所指向的下標字元
var str = "abcdefg";
// 獲取指定位置的字元
var code = str.charAt(5);
console.log(code); // f
charCodeAt 引數是數字 返回值是該數字所指向的下標字元的編碼
var str = "abcdefg";
var code = str.charCodeAt(5);
console.log(code); // 102
split 引數是分隔符 返回值是以該引數作為切割之後的陣列
var str = "a1b1c1d1e1f"; // 想要以1作為分隔符 將字串切割成陣列 => ["a", "b", "c", "d", "e", "f"];
var arr = str.split("1");
console.log(arr); // ["a", "b", "c", "d", "e", "f"];
// 陣列轉為字串
// ["a", "b", "c", "d", "e", "f"].join("1"); => a1b1c1d1e1f
substring 該方法用於擷取字串中的一段
var str = "abcdefg";
var str1 = str.substring(1, 2);
var str2 = str.substring(1);
var str3 = str.substring();
var str4 = str.substring(-5, -2);
var str5 = str.substring(5, 1);
console.log(str1); // b
console.log(str2); // bcdefg
console.log(str3); // abcdefg
console.log(str4); // 空字串 擷取不到
console.log(str5); // bcde
// 特點: 兩個引數時，總是從小的擷取到大的
// 特點: 當數值為負數時 不會從後往前數
substr 該方法也用於擷取字串中的一段 第一個引數依舊錶示擷取的開始位置 第二個引數表示要擷取的字串的長度
var str = "abcdefghijkl";
var str1 = str.substr(3, 5);
console.log(str1);
slice 該方法用於擷取字串的一段 第一個引數表示擷取的開始位置(包含) 第二個引數表示擷取的結束位置(不包含)
var str = "abcdefghijkl";
var str1 = str.slice(1, 5);
var str2 = str.slice(5, 1);
var str3 = str.slice(-5);
console.log(str1); // bcde
console.log(str2); // 空字串 因為擷取不到
console.log(str3); // hijkl 從後往前擷取
indexOf 該方法用於獲取陣列中第一個從某個位置開始出現的字串的第一個字元的下標 如果找不到 就返回-1 第一個引數是被查詢的字串 第二個引數是查詢的開始位置
var str = "abcdefgdfdfdf";
var index = str.indexOf("df");
console.log(index); //
toLowerCase 該方法用於將所有的字串中的英文小寫
var str = "ABCDEFG,你好,abcde";
var str1 = str.toLowerCase();
console.log(str1); // abcdefg,你好,abcde
字串的比較 一位一位的比較 比較對應位數的字元的ascii碼 如果相同 比較下一位 如果不同 出結果
var str = "aA"; // ascii A 65
var str1 = "aa"; // ascii a 97
console.log(str > str1); // false
toUpperCase 該方法用於將所有的字串中的英文大寫
var str = "abc";
var str1 = str.toUpperCase();
console.log(str1); // ABC
// replace 該方法用於將字串中的指定字元(串)替換位指定字元(串)
// var str = "今天天氣不錯，沒下雨";
// var str1 = str.replace("沒", "");
// console.log(str1);
replace() 用於在字串中用一些字元替換另一些字元
字串.replace(被替換的字串， 要替換為的字串)；
split()用於切分字串，它可以將字串切分為陣列。在切分完畢之後，返回的是一個新陣列。
字串.split("分割字元")
鄭重宣告: 所有的字串方法都不會改變原字串
值型別就是值型別 不應該擁有任何方法的
其實...... 字串這個資料型別，在JS中執行時 JS引擎中解析的時候會先把 a 這個"str"值替換為 var s = new String("str");
var a = "str";
var b = a.replace("s", "a");
// 當a.replace方法呼叫的時候 等價於
var s = new String("str");
var b = s.repalce("s", "a");
s = null;
因為真正操作的時候是新生成的物件內部在操作 a所儲存的"str"只是作為引數傳遞了進去 在裡面複製了一份 操作的是這個"副本" 最終會銷燬這個生成的物件 原字串並沒有發生變化
簡單資料型別和複雜資料型別
簡單型別（基本資料型別、值型別）：在儲存時變數中儲存的是值本身，包括string ，number，boolean，undefined，null
複雜資料型別(引用型別)：在儲存時變數中儲存的僅僅是地址（引用），通過 new 關鍵字建立的物件（系統物件、自定義物件），如 Object、Array、Date等；
堆疊空間分配區別：
1、棧（作業系統）：由作業系統自動分配釋放存放函式的引數值、區域性變數的值等。其操作方式類似於資料結構中的棧；(簡單資料型別存放到棧裡面)
2、堆（作業系統）：儲存複雜型別(物件)，一般由程式設計師分配釋放，若程式設計師不釋放，由垃圾回收機制回收。
簡單資料型別的儲存方式：值型別變數的資料直接存放在變數（棧空間）中
複雜資料型別的儲存方式：引用型別變數（棧空間）裡存放的是地址，真正的物件例項存放在堆空間中
函式的傳參規則
JS中的資料型別分兩種: 基本資料型別，引用資料型別
基本資料型別的資料在傳遞時，複製傳遞 也就是複製了一份並傳遞進去 所以在函式內部，如何操作都只是在操作副本。與外部的資料無關。
引用資料型別的資料在傳遞時，傳遞引用 也就是把地址複製了一份並傳遞進去 所以函式內部是可以得到函式外部的資料儲存的地址的，如果在函式內部打點或者方括號修改地址內容，則會影響到函式外部，如果在函式內部使用=修改變數儲存的內容，則不會影響函式外部。
// 在函式內部修改值型別引數
var a = 123;
function demo(b) {
b = 12;
}
demo(a);
console.log(a); // 123
// 在函式內部使用等號修改引用型別引數
var obj = {};
function demo(b) {
b = 123;
}
demo(obj);
console.log(obj); // {}
// 在函式內部使用方括號或者點語法修改引用型別引數
var obj = {};
function demo(b) {
b.a = 10;
b["b"] = 11;
}
demo(obj);
console.log(obj); // {a: 10, b: 11}
// 在函式內部先使用方括號或者點語法修改 再使用等號
var obj = {};
function demo(b) {
b.a = 10;
b["b"] = 11;
b = {};
b.c = 12;
}
demo(obj);
console.log(obj); // {a: 10, b: 11}
排他思想
1. 所有元素全部清除樣式（幹掉其他人）
2. 給當前元素設定樣式 （留下我自己）
3. 注意順序不能顛倒，首先幹掉其他人，再設定自己
mouseenter 和mouseover的區別
當滑鼠移動到元素上時就會觸發mouseenter 事件;
類似 mouseover，它們兩者之間的差別是:
mouseover 滑鼠經過自身盒子會觸發，經過子盒子還會觸發。mouseenter 只會經過自身盒子觸發；之所以這樣，就是因為mouseenter不會冒泡；
跟mouseenter搭配滑鼠離開 mouseleave 同樣不會冒泡。