javascript
前端JavaScript学习小总结
目錄
一、JavaScript介紹
二、JavaScript與ECMAScript的關系
三、JavaScript引入到文件
四、JavaScript輸出方式
五、數據類型
六、運算符? ?
七、條件語句
八、字符串
? ? ? ? 1.簡介
? ? ? ? 2.屬性 ? ?
? ? ? ? 3.方法
? ? ? ? ? ? a. charAt()
? ? ? ? ? ? b.concat()
? ? ? ? ? ? c.substring()
? ? ? ? ? ? d.substr()
? ? ? ? ? ? e.indexOf()
? ? ? ? ? ? f.trim()
? ? ? ? ? ? g.split()
九、數組
? ? ?數組的遍歷
? ? ?數組方法
? ? ? ? ? ? 1.Array.isArray()
? ? ? ? ? ? 2.push()/pop()
? ? ? ? ? ? 3.shift()/unshift()
? ? ? ? ? ? 4.join()
? ? ? ? ? ? 5.concat()
? ? ? ? ? ? 6.reverse()
? ? ? ? ? ? 7.indexOf()
十、函數
十一、對象
? ? ? ? 1.簡介
? ? ? ? 2.Math對象
? ? ? ? ? ? 1.Math.abs()
? ? ? ? ? ? 2.Math.max()，Math.min()
? ? ? ? ? ? 3.Math.floor()，Math.ceil()
? ? ? ? ? ? 4.Math.random()
? ? ? ? 3.Date對象
? ? ? ? ? ? 1.Date.now()
? ? ? ? ? ? 2.時間戳
????????????3.實例方法get類
十二、DOM概述
? ? ? ? 1.介紹
? ? ? ? 2.節點
? ? ? ? 3.節點樹
? ? ? ? 4.document對象_方法/獲取元素
? ? ? ? ? ? ? ? a.getElementsByTagName()
? ? ? ? ? ? ? ? b.getElementsByClassName()
? ? ? ? ? ? ? ? c.getElementsByName()
? ? ? ? ? ? ? ? d.getElementById()
? ? ? ? ? ? ? ? e.querySelector()
? ? ? ? ? ? ? ? f.querySelectorAll()
? ? ? ? 5.document對象_方法/創建元素
? ? ? ? ? ? ? ? a.document.createElement()
? ? ? ? ? ? ? ? b.document.createTextNode()
? ? ? ? ? ? ? ? c.document.createAttribute()
? ? ? ? 6.Element對象_屬性
? ? ? ? ? ? a.Element.id
? ? ? ? ? ? b.Element.className
? ? ? ? ? ? c.Element.classList
? ? ? ? ? ? d.Element.innerHTML
? ? ? ? ? ? e.Element.innerText
?????????7.Element獲取元素位置
?????????8.CSS操作
? ? ? ? ? ? a.setAttribute
? ? ? ? ? ? b.元素節點的 style 屬性
? ? ? ? ? ? c.cssText 屬性
?????????9.事件處理程序
? ? ? ? ? ? a.HTML事件處理
? ? ? ? ? ? b.DOM0級事件處理
? ? ? ? ? ? c.DOM2級事件處理
????????10.事件類型之鼠標事件
????????11.Event事件對象
? ? ? ? ? ? ? ? 1 Event.Target
? ? ? ? ? ? ? ? 2 Event.type
? ? ? ? ? ? ? ? 3?Event.preventDefault()
? ? ? ? ? ? ? ?4 Event.stopPropagation()
????????12.事件類型之鍵盤事件
????????13.事件類型之表單事件
? ? ? ? ? ? 1 input事件
? ? ? ? ? ? 2 select事件
? ? ? ? ? ? 3 Change事件
? ? ? ? ? ? 4 reset事件
? ? ? ? ? ? 5 submit事件
????????14.事件代理(事件委托)
????????15.定時器
? ? ? ? ? ? 1 setTimeout ()
? ? ? ? ? ? 2 setInterval ()
????????16.防抖(debounce)
????????17.節流(throttle)
十三、總結
前言
? ? ?大二暑假在家，由于之前在學校做課設的時候，自己想做好看的界面，但總是在樣式上調試很久，參考網上代碼時也有些地方看不懂，想著系統復習和學習一下前端知識，希望能在以后的項目里熟練地寫出好看的界面。為了記錄我的學習過程也方便我以后查看，于是就有了在CSDN上寫博客的想法。這篇是關于JavaScript的總結 ！
一、JavaScript介紹
? ? JavaScript 是一種輕量級的腳本語言。所謂“腳本語言”，指的是它不具備開發操作系統的能力，
? ? 而是只用來編寫控制其他大型應用程序的“腳本”。JavaScript 是一種嵌入式語言。
? ? 它本身提供的核心語法不算很多。
二、JavaScript與ECMAScript的關系
? ? ECMAScript和JavaScript的關系是，前者是后者的規格，后者是前者的一種實現。在日常場合，?這兩個詞是可以互換的。
?三、JavaScript引入到文件
? ? ? ? 1.嵌入到HTML文件中,body或者head標簽里。
? ? ? ? ? ? <body>
? ? ? ? ? ? ? ? <script>
? ? ? ? ? ? ? ? ? ? var age = 20
? ? ? ? ? ? ? ? </script>
? ? ? ? ? ? </body>
? ? ? ? 2.引入本地獨立JS文件。
? ? ? ? ? ? <body>
? ? ? ? ? ? ? ? <script type="text/javascript"src="./itbaizhan.js"> ?
? ? ? ? ? ? ? ? </script>
? ? ? ? ? ? </body>
? ? ? ? 3.引入網絡來源文件
? ? ? ? ? ? <body>
? ? ? ? ? ? ? ? <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">
? ? ? ? ? ? ? ? </script>
? ? ? ? ? ? </body>
? ? 四、JavaScript輸出方式
? ? ? ? ? ? 1.彈出對話框
? ?????????????alert("要輸出的內容");
? ? ? ? ? ? ? ? ps：在瀏覽器中彈出一個對話框,然后把要輸出的內容展示出來,
? ? ? ? ? ? ? ? ? ? alert都是把要輸出的內容首先轉換為字符串然后在輸出的
? ? ? ? ? ? 2.在頁面中輸出 ?
? ? ? ? ? ? ? ?document.write("要輸出的內容");
? ? ? ? ? ? 3.在控制臺輸出內容
? ? ? ? ? ? ? ? console.log("要輸出的內容");
? ? 五、數據類型
? ? ? ? ? ? JavaScript 語言的每一個值，都屬于某一種數據類型。JavaScript 的數據類型，共有六種。（ES6 又新增了第七種 Symbol 類型的值和第八種 BigInt類型）
? ? ? ? 1.原始類型(基礎類型)：數值number、字符串string、布爾值boolean
? ? ? ? ? ? var age = 20;
? ? ? ? ? ? var name = "尚學堂";
? ? ? ? ? ? var learn = true;
? ? ? ? 2.合成類型(復合類型)
? ? ? ? ? ? 對象object：因為一個對象往往是多個原始類型的值的合成，可以看作是一個存放各種值的容器。
? ? ? ? ? ? var user = {
? ? ? ? ? ? ? ? name:"尚學堂", ? ?
? ? ? ? ? ? ? ? age:20, ?
? ? ? ? ? ? ? ? learn:true
? ? ? ? ? ?}
? ? ? ? 溫馨提示：
? ? ? ? ? ? 至于undefined和null，一般將它們看成兩個特殊值。
? ? 六、運算符
? ? ? ? 1.對象運算符 typeof
? ? ? ? ? ?typeof 123 // "number"
? ? ? ? ? ?typeof '123' // "string"
? ? ? ? ? ?typeof false // "boolean"
? ? ? ? ? ?typeof {} // "object"
? ? ? ? ? ?unll和undefined的區別:都表示“沒有”，語法效果幾乎沒區別，可以說一個是數值為空，一個是對象為空
? ? ? ? 2.算術運算符
? ? ? ? ? ? 加：10 + 10; // 20
? ? ? ? ? ? 減：100 - 10; // 90
? ? ? ? ? ? 乘：10 * 2; //20
? ? ? ? ? ? 除：10 / 5; 2
? ? ? ? ? ? 余數：13 % 5 // 3
? ? ? ? ? ? 自增：var x = 1; ++x // 2
? ? ? ? ? ? 自減：var y = 1; --y // 0
? ? ? ? ? ? ? ? ps:自增和自減運算符有一個需要注意的地方，就是放在變量之后，會先返回變量操作前的值，?再進行自增/自減操作；放在變量之前，會先進行自增/自減操作，再返回變量操作后的值。
? ? ? ? ? ? ? ? console.log(x++ + y);// 2
? ? ? ? 3.賦值運算符
? ? ? ? ? ?// 將 1 賦值給變量 x
? ? ? ? ? ? ? ? var x = 1;
? ? ? ? ? ?// 將變量 y 的值賦值給變量 x
? ? ? ? ? ? ? ? var x = y;
? ? ? ? ? ?// 等同于 x = x + y
? ? ? ? ? ? ? ? x += y
? ? ? ? 4.比較運算符
? ? ? ? ? ? <? ? ? ? ? ?小于運算符
? ? ? ? ? ? >? ? ? ? ? ?大于運算符
? ? ? ? ? ? <=? ? ? ? ?小于或等于運算符
? ? ? ? ? ? >= ????????大于或等于運算符
? ? ? ? ? ? == ????????相等運算符
? ? ? ? ? ? === ??????嚴格相等運算符
? ? ? ? ? ? !=? ? ? ? ? 不相等運算符
? ? ? ? ? ? !== ???????嚴格不相等運算符
? ? ? ? 5.布爾運算符
? ? ? ? ? ?取反運算符（!）：!true // false; 對于非布爾值，取反運算符會將其轉為布爾值。
? ? ? ? ? ?且運算符（&&）：多個條件都要滿足 console.log(10 < 20 && 10 >5); // true
? ? ? ? ? ?或運算符（||）：? ?滿足一個條件即可 console.log(10 < 20 || 10 < 5); // true? ? ??
????????6.三元運算符
? ? ? ? ? ? (條件) ? 表達式1 : 表達式2
? ? ? ? ? ? 當條件的布爾值為true時，執行表達式1否則執行表達式2。 ? ?
? ?
七、條件語句
? ? ? ? 1.if語句
? ? ? ? ? ?if (布爾值){
?? ? ? ? ? ? ? 語句;
? ? ? ? ? ? }
? ? ? ? 2.if...else
? ? ? ? ? ? if (m === 3) {
? ? ? ? ? ? ?// 滿足條件時，執行的語句
? ? ? ? ? ? } else {
? ? ? ? ? ? ?// 不滿足條件時，執行的語句
? ? ? ? ? ? } ?
? ? ? ? 3.switch
? ? ? ? ? ? switch (x) {
? ? ? ? ? ? ?case 1:
? ? ? ? ? ? ? ?console.log('x 等于1');
? ? ? ? ? ? ?case 2:
? ? ? ? ? ? ? ?console.log('x 等于2');
? ? ? ? ? ? ?default:
? ? ? ? ? ? ? ?console.log('x 等于其他值');
? ? ? ? ? ? }
? ? ? ? ? ? // x等于1
? ? ? ? ? ? // x等于2
? ? ? ? ? ? // x等于其他值
? ? ? ? ? ? ps:需要注意的是，每個case代碼塊內部的break語句不能少，否則會接下去執行下一個case代碼塊，?而不是跳出switch結構。? ? ? ?
? ? ? ? 4.for
? ? ? ? ? ? for (初始化表達式; 條件; 迭代因子) {
? ? ? ? ? ? ? ? ? ? ?語句
? ? ? ? ? ? ? ? }
? ? ? ? ? ? a 初始化表達式（initialize）：確定循環變量的初始值，只在循環開始時執行一次。
? ? ? ? ? ? b 布爾表達式（test）：每輪循環開始時，都要執行這個條件表達式，只有值為真，才繼續進行循環。
? ? ? ? ? ? c 迭代因子（increment）：每輪循環的最后一個操作，通常用來遞增循環變量。
? ? ? ? ? ? d for語句的三個表達式，可以省略任何一個，也可以全部省略。但把條件表達式省略會變成無限循環。
? ? ? ? ? ? //循環輸出1~100之間數字的和
? ? ? ? ? ? var sum=0;
? ? ? ? ? ? for(var i=1;i<=100;i++){
? ? ? ? ? ? ? ?sum+=i; }
? ? ? ? ? ? console.log(sum);
? ? ? ? ? ? //打印九九乘法表
? ? ? ? ? ? for(var i = 1;i <= 9;i++){
? ? ? ? ? ? ? ?document.write("<br>");
? ? ? ? ? ? ? ?for(var j = 1;j <= i;j++){
? ? ? ? ? ? ? ? ? ?sum = i * j;
? ? ? ? ? ? ? ? ? ?document.write(i ,"*" ,j ,"=" ,sum ," ");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ?5.while
? ? ? ? ?ps ：所有for循環，都可以改寫成while循環
? ? ? ? ? ? while (條件) {
? ? ? ? ? ? ? ? ?語句;
? ? ? ? ? ? }
? ? ? ? ? ? //例子
? ? ? ? ? ? var i = 0;
? ? ? ? ? ? while (i < 100) {
? ? ? ? ? ? ??console.log('i 當前為：' + i);
? ? ? ? ? ? ??i = i + 1;
? ? ? ? ? ? }
? ? ? ? 6.break 語句和 continue 語句
? ? ? ? ? 1? break語句用于跳出代碼塊或循環
? ? ? ? ? ? for (var i = 0; i < 5; i++) {
? ? ? ? ? ? ? ?if (i === 3){
? ? ? ? ? ? ? ? ? ?break;
? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?console.log(i);
? ? ? ? ? ? }
? ? ? ? ? ?2 continue語句用于立即終止本輪循環，返回循環結構的頭部，開始下一輪循環
? ? ? ? ? ? for (var i = 0; i < 5; i++) {
? ? ? ? ? ? ? ?if (i === 3){
? ? ? ? ? ? ? ? ? ?continue;
? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?console.log(i);
? ? ? ? ? ? }? ? ? ? ? ? ??
? ? 八、字符串
? ? ? ? 1.簡介
? ? ? ? ? ? 字符串就是零個或多個排在一起的字符，放在單引號或雙引號之中。單引號字符串的內部，?可以使用雙引號。雙引號字符串的內部，可以使用單引號。
? ? ? ? ? ? 'itbaizhan'
? ? ? ? ? ? "itbaizhan"
? ? ? ? ? ? 'key = "value"'
? ? ? ? ? ? "It's a long itbaizhan"
? ? ? ? ? ? 注意：字符串默認只能寫在一行內，分成多行將會報錯
? ? ? ? 2.屬性 ? ?
? ? ? ? ? ? length屬性返回字符串的長度，該屬性也是無法改變的 ? ?
? ? ? ? ? ? ? ? var s = 'itbaizhan';
? ? ? ? ? ? ? ? s.length // 9
? ? ? ? 3.方法
? ? ? ? ? ? a. charAt()
????????????????charAt 方法返回指定位置的字符，參數是從 0 開始編號的
? ? ? ? ? ? ? ? var s = new String('itbaizhan');
? ? ? ? ? ? ? ? s.charAt(1) // "t"
? ? ? ? ? ? ? ? s.charAt(s.length - 1) // "n"
? ? ? ? ? ? ? ? 注意：如果參數為負數，或大于等于字符串的長度， charAt 返回空字符串
? ? ? ? ? ? ? ? 'itbaizhan'.charAt(-1) // ""
? ? ? ? ? ? ? ? 'itbaizhan'.charAt(9) // ""
? ? ? ? ? ? b.concat()
????????????????concat 方法用于連接兩個字符串，返回一個新字符串，不改變原字符串
? ? ? ? ? ? ? ? var s1 = 'itbaizhan';
? ? ? ? ? ? ? ? var s2 = 'sxt';
? ? ? ? ? ? ? ? s1.concat(s2) // "itbaizhansxt"
? ? ? ? ? ? ? ? s1 // "itbaizhan"
? ? ? ? ? ? ? ? 該方法可以接受多個參數
? ? ? ? ? ? ? ? 'sxt'.concat('itbaizhan', 'bjsxt') //"sxtitbaizhanbjsxt"
? ? ? ? ? ? ? ? 如果參數不是字符串， concat 方法會將其先轉為字符串，然后再連接
? ? ? ? ? ? ? ? var one = 1;
? ? ? ? ? ? ? ? var two = 2;
? ? ? ? ? ? ? ? var three = '3';
? ? ? ? ? ? ? ? ''.concat(one, two, three) // "123"
? ? ? ? ? ? ? ? console.log(one + two + three )//33
? ? ? ? ? ? c.substring()
?????????substring方法用于從原字符串取出子字符串并返回，不改變原字符串。它的第一個參數表示子字符串的開始位置，第二個位置表示結束位置（返回結果不含該位置）。
? ? ? ? ? ? ? ? 規則：
? ? ? ? ? ? ? ? ? ? 1.如果省略第二個參數，則表示子字符串一直到原字符串的結束
? ? ? ? ? ? ? ? ? ? 2.如果第一個參數大于第二個參數， substring 方法會自動更換兩個參數的位置
? ? ? ? ? ? ? ? ? ? 3.如果參數是負數， substring 方法會自動將負數轉為0 ? ? ?
? ? ? ? ? ? ? ? ? ? 'itbaizhan'.substring(0, 2) // "it"
? ? ? ? ? ? ? ? ? ? 'itbaizhan'.substring(2) // "baizhan" ?
? ? ? ? ? ? ? ? ? ? 'itbaizhan'.substring(2, -3) // "it"? ?? ? ?
? ? ? ? ? ? d.substr()
????????substr方法用于從原字符串取出子字符串并返回，不改變原字符串，跟 substring 方法的作用相同。substr 方法的第一個參數是子字符串的開始位置（從0開始計算），第二個參數是子字符串的長度。
? ? ? ? ? ? ? ? 規則：
? ? ? ? ? ? ? ? ? ? 1.如果省略第二個參數，則表示子字符串一直到原字符串的結束
? ? ? ? ? ? ? ? ? ? 2.如果第一個參數是負數，表示倒數計算的字符位置。
? ? ? ? ? ? ? ? ? ? 3.如果第二個參數是負數，將被自動轉為0，因此會返回空字符串
? ? ? ? ? ? ? ? ? ? 'itbaizhan'.substr(2, 7); // baizhan
? ? ? ? ? ? ? ? ? ? 'itbaizhan'.substr(2) // "baizhan"
? ? ? ? ? ? ? ? ? ? 'itbaizhan'.substr(-7) // "baizhan"
? ? ? ? ? ? ? ? ? ? 'itbaizhan'.substr(4, -1) // "" ? ?
? ? ? ? ? ? e.indexOf()
????????indexOf 方法用于確定一個字符串在另一個字符串中第一次出現的位置，返回結果是匹配開始的位置。如果返回 -1 ，就表示不匹配。
? ? ? ? ? ? ? ? ? ? ? ? 'hello world'.indexOf('o') // 4
? ? ? ? ? ? ? ? ? ? ? ? 'itbaizhan'.indexOf('sxt') // -1
? ? ? ? ? ? ? ? ? ? ? ? indexOf 方法還可以接受第二個參數，表示從該位置開始向后匹配
? ? ? ? ? ? ? ? ? ? ? ? 'hello world'.indexOf('o', 6) // 7
? ? ? ? ? ? f.trim()
????????? trim 方法用于去除字符串兩端的空格、制表符（ \t 、 \v ）、換行符（ \n ）和回車符（ \r ），返回一個新字符串，不改變原字符串。
? ? ? ? ? ? ? ? ? ? ? ? ' hello world '.trim()// "hello world"
? ? ? ? ? ? ? ? ? ? ? ? '\r\nitbaizhan \t'.trim() // 'itbaizhan'
? ? ? ? ? ? g.split()
????????split 方法按照給定規則分割字符串，返回一個由分割出來的子字符串組成的數組。
? ? ? ? ? ? ? ? ? ? 規則：
? ? ? ? ? ? ? ? ? ? ? ? 1.如果分割規則為空字符串，則返回數組的成員是原字符串的每一個字符
? ? ? ? ? ? ? ? ? ? ? ? 2.如果省略參數，則返回數組的唯一成員就是原字符串
? ? ? ? ? ? ? ? ? ? ? ? 3.接受第二個參數，限定返回數組的最大成員數
? ? ? ? ? ? ? ? ? ? ? ? 'it|sxt|baizhan'.split('|') // ["it", "sxt","baizhan"]
? ? ? ? ? ? ? ? ? ? ? ? 'a|b|c'.split('') // ["a", "|", "b","|","c"]
? ? ? ? ? ? ? ? ? ? ? ? 'it|sxt|bz'.split() // [it|sxt|bz]
? ? ? ? ? ? ? ? ? ? ? ? 'it|sxt|bz'.split('|', 0) // []
? ? ? ? ? ? ? ? ? ? ? ? 'it|sxt|bz'.split('|', 1) // ["it"]
? ? ? ? ? ? ? ? ? ? ? ? 'it|sxt|bz'.split('|', 2) // ["it", "sxt"]
? ? 九、數組
? ? ? ? 1.簡介
? ? ? ? ? ? 數組（array）是按次序排列的一組值。每個值的位置都有編號（從0開始），整個數組用方括號表示。
? ? ? ? ? ? ? ? var arr = ['sxt', 'baizhan', 'it'];
? ? ? ? ? ? 任何類型的數據，都可以放入數組
? ? ? ? ? ? ? ? var arr = [ 100, [1, 2, 3],false ];
? ? ? ? 2.length 屬性：
? ? ? ? ? ? 數組的length屬性，返回數組的成員數量
? ? ? ? ? ? ['sxt', 'baizhan', 'it'].length // 3
? ? ? ? 3.數組的遍歷
? ? ? ? ? ? 數組的遍歷可以考慮使用for循環或while循環
? ? ? ? ? ? ? ? var a = ['sxt', 'baizhan', 'it'];
? ? ? ? ? ? ? ? // for循環
? ? ? ? ? ? ? ? for(var i = 0; i < a.length; i++) {
? ? ? ? ? ? ? ? ?console.log(a[i]);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // while循環
? ? ? ? ? ? ? ? var i = 0;
? ? ? ? ? ? ? ? while (i < a.length) {
? ? ? ? ? ? ? ? ?console.log(a[i]);
? ? ? ? ? ? ? ? ?i++;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? for...in遍歷數組
? ? ? ? ? ? ? ? var a = ['sxt', 'baizhan', 'it'];
? ? ? ? ? ? ? ? for (var i in a) {
? ? ? ? ? ? ? ? ? ? console.log(a[i]);
? ? ? ? ? ? ? ? }
? ? ? ? 4.數組方法
? ? ? ? ? ? 1.Array.isArray()
? ? ? ? ? ? ? ? Array.isArray 方法返回一個布爾值，表示參數是否為數組。它可以彌補typeof 運算符的不足。
? ? ? ? ? ? ? ? var arr = ["尚學堂", 100, true];
? ? ? ? ? ? ? ? console.log(typeof arr); // object
? ? ? ? ? ? ? ? var arr = ['sxt', 'baizhan', 'it'];
? ? ? ? ? ? ? ? Array.isArray(arr) // true
? ? ? ? ? ? 2.push()/pop()
? ? ? ? ? ? ? ? push 方法用于在數組的末端添加一個或多個元素，并返回添加新元素后的數組長度。
pop 方法用于刪除數組的最后一個元素，并返回該元素。兩者都會改變數組長度。
? ? ? ? ? ? ? ? var arr = [];
? ? ? ? ? ? ? ? arr.push("尚學堂") // 1
? ? ? ? ? ? ? ? arr.push('itbaizhan') // 2
? ? ? ? ? ? ? ? arr.push(true, {}) // 4
? ? ? ? ? ? ? ? arr // [尚學堂, 'itbaizhan', true, {}
? ? ? ? ? ? ? ? var arr = ['尚學堂', 'itbaizhan', 'WEB前端'];
? ? ? ? ? ? ? ? arr.pop() // 'WEB前端'
? ? ? ? ? ? ? ? arr // ['尚學堂', 'itbaizhan']
? ? ? ? ? ? 3.shift()/unshift()
? ? ? ? ? ? ? ? shift 方法用于刪除數組的第一個元素，并返回該元素。unshift 方法用于在數組的第一個位置添加元素，并返回添加新元素后的數組長度。
? ? ? ? ? ? ? ? var arr = ['尚學堂', 'itbaizhan', 'WEB前端'];
? ? ? ? ? ? ? ? arr.shift() // '尚學堂'
? ? ? ? ? ? ? ? arr // ['itbaizhan', 'WEB前端']
? ? ? ? ? ? ? ? var arr = ['尚學堂', 'itbaizhan', 'WEB前端'];
? ? ? ? ? ? ? ? arr.unshift('baizhan'); // 4
? ? ? ? ? ? ? ? arr // ['baizhan', '尚學堂', 'itbaizhan', 'WEB前端']
? ? ? ? ? ? 4.join()
? ? ? ? ? ? ? ? join 方法以指定參數作為分隔符，將所有數組成員連接為一個字符串返回。如果不提供參數，默認用逗號分隔。數組的 join 配合字符串的 split()可以實現數組與字符串的互換。
? ? ? ? ? ? ? ? var a = [1, 2, 3, 4];
? ? ? ? ? ? ? ? a.join(' ') // '1 2 3 4'
? ? ? ? ? ? ? ? a.join(' | ') // "1 | 2 | 3 | 4"
? ? ? ? ? ? ? ? a.join() // "1,2,3,4"
? ? ? ? ? ? ? ? 如果數組成員是 undefined 或 null 或空位，會被轉成空字符串
? ? ? ? ? ? ? ? [undefined, null].join('#') ?// '#'
? ? ? ? ? ? ? ? ['a',, 'b'].join('-') // 'a--b
? ? ? ? ? ? 5.concat()
? ? ? ? ? ? ? ? concat 方法用于多個數組的合并。它將新數組的成員，添加到原數組成員的后部，
然后返回一個新數組，原數組不變。
? ? ? ? ? ? ? ? ['hello'].concat(['world'])// ["hello", "world"]
? ? ? ? ? ? ? ? ['hello'].concat(['world'], ['!'])// ["hello", "world", "!"]
? ? ? ? ? ? ? ? 除了數組作為參數， concat 也接受其他類型的值作為參數，添加到目標數組尾部。
? ? ? ? ? ? ? ? [1, 2, 3].concat(4, 5, 6) ?// [1, 2, 3, 4, 5, 6]
? ? ? ? ? ? 6.reverse()
? ? ? ? ? ? ? ? reverse 方法用于顛倒排列數組元素，返回改變后的數組。注意，該方法將改變原數組
? ? ? ? ? ? ? ? var a = ['a', 'b', 'c'];
? ? ? ? ? ? ? ? a.reverse() // ["c", "b", "a"]
? ? ? ? ? ? ? ? a // ["c", "b", "a"]
? ? ? ? ? ? ? ? 實現一個字符串反轉排列
? ? ? ? ? ? ? ? var str = "hello";
? ? ? ? ? ? ? ? str.split("").reverse().join("")
? ? ? ? ? ? 7.indexOf()
? ? ? ? ? ? ? ? indexOf 方法返回給定元素在數組中第一次出現的位置，如果沒有出現則返回 -1
? ? ? ? ? ? ? ? var arr = ['a', 'b', 'c'];
? ? ? ? ? ? ? ? arr.indexOf('b') // 1
? ? ? ? ? ? ? ? arr.indexOf('y') // -1
? ? ? ? ? ? ? ? indexOf 方法還可以接受第二個參數，表示搜索的開始位置
? ? ? ? ? ? ? ? ['尚學堂', '百戰程序員','itbaizhan'].indexOf('尚學堂', 1) // -1
?十、函數
? ? ? ? 1.函數的聲明
? ? ? ? ? ? function 命令： function命令聲明的代碼區塊，就是一個函數。function命令后面是函數名，函數名后面是一對圓括號，里面是傳入函數的參數。函數體放在大括號里面。
? ? ? ? ? ? function print(s) {
? ? ? ? ? ? ? ? ?console.log(s);
? ? ? ? ? ? }
? ? ? ? 2.函數名的提升
? ? ? ? ? ? JavaScript 引擎將函數名視同變量名，所以采用function命令聲明函數時，整個函數會像變量聲明一樣，被提升到代碼頭部。
? ? ? ? 3.函數參數
? ? ? ? ? ? 函數運行的時候，有時需要提供外部數據，不同的外部數據會得到不同的結果，這種外部數據就叫參數。
? ? ? ? 4.函數返回值
? ? ? ? ? ? JavaScript函數提供兩個接口實現與外界的交互，其中參數作為入口，接收外界信息；返回值作為出口，把運算結果反饋給外界。
? ? ? ? ? ? function getName(name){
? ? ? ? ? ? ? ?return name;
? ? ? ? ? ? }
? ? ? ? ? ? var myName = getName("itbaizhan")
? ? ? ? ? ? console.log(myName); // itbaizhan
? ? ? ? ? ? 溫馨提示：return 后面不能在添加任何代碼，因為不會執行
? ? 十一、對象
? ? ? ? 1.簡介
? ? ? ? ? ? 對象（object）是 JavaScript 語言的核心概念，也是最重要的數據類型。簡單說，
對象就是一組“鍵值對”（key-value）的集合，是一種無序的復合數據集合。
? ? ? ? ? ? var user = {
? ? ? ? ? ? ? ? name: 'itbaizhan',
? ? ? ? ? ? ? ? age: '13'
? ? ? ? ? ? };
? ? ? ? ? ? 對象的每一個鍵名又稱為“屬性”（property），它的“鍵 值”可以是任何數據類型。如果一個屬性的值為函數，通常把這個屬性稱為“方法”，它可以像函數那樣調用。
? ? ? ? ? ? var user = {
? ? ? ? ? ? ? ? getName: function (name) {
? ? ? ? ? ? ? ? ? ?return name;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? };
? ? ? ? ? ? user.getName("itbaizhan") // itbaizhan
? ? ? ? ? ? 如果屬性的值還是一個對象，就形成了鏈式引用
? ? ? ? ? ? var user = {
? ? ? ? ? ? ? ?name:"itbaizhan",
? ? ? ? ? ? ? ?age:13,
? ? ? ? ? ? ? ?container:{
? ? ? ? ? ? ? ? ? ?frontEnd:["Web前端","Android","iOS"],
? ? ? ? ? ? ? ? ? ?backEnd:["Java","Python"]
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? user.container.frontEnd // ["Web前 端","Android","iOS"]
? ? ? ? 2.Math對象
? ? ? ? ? ? Math是 JavaScript 的原生對象，提供各種數學功能。
? ? ? ? ? ? 1.Math.abs()
????????????????Math.abs 方法返回參數值的絕對值
? ? ? ? ? ? ? ? Math.abs(1) // 1
? ? ? ? ? ? ? ? Math.abs(-1) // 1
? ? ? ? ? ? 2.Math.max()，Math.min()
? ? ? ? ? ? ? ? Math.max 方法返回參數之中最大的那個值， Math.min 返回最小的那個值。如果參數為空, Math.min 返回 Infinity , Math.max 返回 -Infinity 。
? ? ? ? ? ? ? ? Math.max(2, -1, 5) // 5
? ? ? ? ? ? ? ? Math.min(2, -1, 5) // -1
? ? ? ? ? ? ? ? Math.min() // Infinity
? ? ? ? ? ? ? ? Math.max() // -Infinity
? ? ? ? ? ? 3.Math.floor()，Math.ceil()
???????????????Math.floor()向下取整，Math.ceil()向上取整
? ? ? ? ? ? ? ? Math.floor(3.2) // 3
? ? ? ? ? ? ? ? Math.floor(-3.2) // -4
? ? ? ? ? ? ? ? Math.ceil(3.2) // 4
? ? ? ? ? ? ? ? Math.ceil(-3.2) // -3
? ? ? ? ? ? 4.Math.random()
? ? ? ? ? ? ? ? Math.random() 返回0到1之間的一個偽隨機數，可能等于0，但是一定小于1。
? ? ? ? ? ? ? ? Math.random() // 0.28525367438365223
? ? ? ? ? ? ? ? //任意范圍的隨機數生成函數如下
? ? ? ? ? ? ? ? function getRandomArbitrary(min, max) {
? ? ? ? ? ? ? ? ?return Math.random() * (max - min) + min;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? getRandomArbitrary(5, 10)//得到5到10之間的隨機數
? ? ? ? 3.Date對象
? ? ? ? ? ? Date 對象是 JavaScript 原生的時間庫。它以1970年1月1日00:00:00 作為時間的零點，可以表示的時間范圍是前后各1億天（單位為毫秒）
? ? ? ? ? ? 1.Date.now()
? ? ? ? ? ? ? ? Date.now 方法返回當前時間距離時間零點（1970年1月1日 00:00:00UTC）的毫秒數，
? ? ? ? ? ? ? ? 相當于Unix時間戳乘以1000.
? ? ? ? ? ? ? ? Date.now(); ? // 1635216733395
? ? ? ? ? ? 2.時間戳
? ? ? ? ? ? ? ? 時間戳是指格林威治時間1970年01月01日00時00分00秒(北京時間1970年01月01日08時00分00秒)
? ? ? ? ? ? ? ? 起至現在的總秒數。Unix是20世紀70年代初出現的一個操作系統，Unix認為1970年1月1日0點是時間紀元。
? ? ? ? ? ? ? ? JavaScript也就遵循了這一約束。
?????????????3.實例方法get類
????????????????Date 對象提供了一系列 get* 方法，用來獲取實例對象某個方面的值：
? ? ? ? ? ? ? ? ? ? getTime()：返回實例距離1970年1月1日00:00:00的毫秒數
? ? ? ? ? ? ? ? ? ? getDate()：返回實例對象對應每個月的幾號（從1開始）
? ? ? ? ? ? ? ? ? ? getDay()：返回星期幾，星期日為0，星期一為1，以此類推
? ? ? ? ? ? ? ? ? ? getYear()：返回距離1900的年數
? ? ? ? ? ? ? ? ? ? getFullYear()：返回四位的年份
? ? ? ? ? ? ? ? ? ? getMonth()：返回月份（0表示1月，11表示12月）
? ? ? ? ? ? ? ? ? ? getHours()：返回小時（0-23）
? ? ? ? ? ? ? ? ? ? getMilliseconds()：返回毫秒（0-999）
? ? ? ? ? ? ? ? ? ? getMinutes()：返回分鐘（0-59）
? ? ? ? ? ? ? ? ? ? getSeconds()：返回秒（0-59）
? ? ? ? ? ? ? ? var d = new Date('January 6, 2022');
? ? ? ? ? ? ? ? d.getDate() // 6
? ? ? ? ? ? ? ? d.getMonth() // 0
? ? ? ? ? ? ? ? d.getYear() // 122
? ? ? ? ? ? ? ? d.getFullYear() // 2022
? ? ? ? ? ? ? ? //編寫函數獲得本年度剩余天數
? ? ? ? ? ? ? ? function leftDays() {
? ? ? ? ? ? ? ? ?var today = new Date();
? ? ? ? ? ? ? ? ?var endYear = new Date(today.getFullYear(),11, 31, 23, 59, 59, 999);
? ? ? ? ? ? ? ? ?var msPerDay = 24 * 60 * 60 * 1000;
? ? ? ? ? ? ? ? ?return Math.round((endYear.getTime() - today.getTime()) / msPerDay);
? ? ? ? ? ? ? ? }
十二、DOM概述
? ? ? ? 1.介紹
? ? ? ? ? ? DOM 是 JavaScript 操作網頁的接口，全稱為“文檔對象模型”（DocumentObjectModel）。它的作用是將網頁轉為一個JavaScript 對象，從而可以用腳本進行各種操作（比如對元素增刪內容）。瀏覽器會根據 DOM 模型，將結構化文檔HTML解析成一系列的節點，再由這些節點組成一個樹狀結構（DOM Tree）。
? ? ? ? ? ? 所有的節點和最終的樹狀結構，都有規范的對外接口DOM 只是一個接口規范，可以用各種語言實現。所以嚴格地說，DOM 不是 JavaScript 語法的一部分，但是 DOM 操作是 JavaScript最常見的任務，離開了 DOM，JavaScript 就無法控制網頁。另一方面，JavaScript 也是最常用于 DOM 操作的語言。
? ? ? ? 2.節點
? ? ? ? ? ? DOM 的最小組成單位叫做節點（node）。文檔的樹形結構（DOM樹），就是由各種不同類型的節點組成。每個節點可以看作是文檔樹的一片葉子。
? ? ? ? ? ? 節點的類型有七種：
? ? ? ? ? ? ? ? Document：????????????????整個文檔樹的頂層節點
? ? ? ? ? ? ? ? DocumentType：????????doctype標簽
? ? ? ? ? ? ? ? Element：???????????????????網頁的各種HTML標簽
? ? ? ? ? ? ? ? Attribute：???????????????????網頁元素的屬性（比如class="right"）
? ? ? ? ? ? ? ? Text：? ? ? ? ? ? ? ? ? ? ? ? ?標簽之間或標簽包含的文本
? ? ? ? ? ? ? ? Comment：????????????????注釋
? ? ? ? ? ? ? ? DocumentFragment：文檔的片段
? ? ? ? 3.節點樹
? ? ? ? ? ? 一個文檔的所有節點，按照所在的層級，可以抽象成一種樹狀結構。這種樹狀結構就是 DOM 樹。它有一個頂層節點，下一層都是頂層節點的子節點，然后子節點又有自己的子節點，就這樣層層衍生出一個金字塔結構，倒過來就像一棵樹瀏覽器原生提供document節點，代表整個文檔。?除了根節點，其他節點都有三種層級關系：
? ? ? ? ? ? ? ? ? ? 父節點關系（parentNode）：直接的那個上級節點
? ? ? ? ? ? ? ? ? ? 子節點關系（childNodes）： 直接的下級節點
? ? ? ? ? ? ? ? ? ? 同級節點關系（sibling）：? ? ?擁有同一個父節點的節點
? ? ? ? 4.document對象_方法/獲取元素
? ? ? ? ? ? ? ? a.getElementsByTagName()
????????該方法搜索 HTML 標簽名，返回符合條件的元素。它的返回值是一個類似數組對象，可以實時反映 HTML 文檔的變化。如果沒有任何匹配的元素，就返回一個空集。如果傳入 * ，就可以返回文檔中所有 HTML 元素。
? ? ? ? ? ? ? ? b.getElementsByClassName()
????????該方法返回一個類似數組的對象，包括了所有 class 名字符合指定條件的元素，元素的變化實時反映在返回結果中。由于 class 是保留字，所以 JavaScript 一律使用 className 表示 CSS 的 class。
? ? ? ? ? ? ? ? c.getElementsByName()
????????該方法用于選擇擁有 name 屬性的 HTML 元素（比如 <form> 、 <radio> 、 <img> 等），返回一個類似數組的的對象（ NodeList 實例），因為 name 屬性 ?相同的元素可能不止一個。
? ? ? ? ? ? ? ? d.getElementById()
????????該方法返回匹配指定 id 屬性的元素節點。如果沒有發現匹配的節點，則返回 null。注意，該方法的參數大小寫是敏感的。比如，如果某個節點的 id 屬性是 main ，那么? ? ? .getElementById('Main') 將返回 null。
? ? ? ? ? ? ? ? e.querySelector()
? ? ? ? ? ? ? ? ? ? 該方法接受一個 CSS 選擇器作為參數，返回匹配該選擇器的元素節點。如果有多個節點?滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回 null。
? ? ? ? ? ? ? ? f.querySelectorAll()
? ? ? ? ? ? ? ? ? ? 該方法與 querySelector 用法類似，區別是返回一個NodeList 對象，包含所有匹配給定選擇器的節點。
? ? ? ? ? ? ? ? <p class="text">Hello</p>
? ? ? ? ? ? ? ? <form name="login"></form>
? ? ? ? ? ? ? ? <div id="root">哈哈哈</div>
? ? ? ? ? ? ? ? <div class="nav">nav1</div>
? ? ? ? ? ? ? ? <div class="nav">nav2</div>
? ? ? ? ? ? ? ? <script>
? ? ? ? ? ? ? ? ? ? ??// 獲得div標簽數組的第一個div標簽
? ? ? ? ? ? ? ? ? ? var div1 = document.getElementsByTagName("div")[0]
? ? ? ? ? ? ? ? ? ? div1.innerHTML = "Hello World"// 把獲得的標簽的內容寫成 Hello World
???????????????????????// 獲得class為text的標簽數組的第一個標簽
? ? ? ? ? ? ? ? ? ? var text = document.getElementsByClassName("text")[0];
? ? ? ? ? ? ? ? ? ? text.innerHTML = "Hello!"// 把獲得的標簽內容寫成 Hello！
? ? ? ? ? ? ? ? ? ? // 使用率極低
? ? ? ? ? ? ? ? ? ? var name = document.getElementsByName("login")
? ? ? ? ? ? ? ? ? ? console.log(name);
? ? ? ? ? ? ? ? ? ? var root = document.getElementById("root");// 獲得id為 root 的標簽
? ? ? ? ? ? ? ? ? ? root.innerHTML = "呵呵呵"// 把該標簽的內容改為 呵呵呵
? ? ? ? ? ? ? ? ? ? var nav = document.querySelector(".nav");// 獲得class為nav的第一個標簽
? ? ? ? ? ? ? ? ? ? console.log(nav);// 在控制臺輸出該標簽
? ? ? ? ? ? ? ? ? // 獲得class為nav標簽數組的第二個標簽
? ? ? ? ? ? ? ? ? ? var navs = document.querySelectorAll(".nav")[1];
? ? ? ? ? ? ? ? ? ? console.log(navs); // 在控制臺輸出該標簽 ?
? ? ? ? ? ? ? ? </script>
? ? ? ? 5.document對象_方法/創建元素
? ? ? ? ? ? ? ? a.document.createElement()
? ? ? ? ? ? ? ? ? ? 該方法用來生成元素節點，并返回該節點。
? ? ? ? ? ? ? ? b.document.createTextNode()
? ? ? ? ? ? ? ? ? ? 該方法用來生成文本節點（Text 實例），并返回該節點。它的參數是文本節點的內容。
? ? ? ? ? ? ? ? c.document.createAttribute()
? ? ? ? ? ? ? ? ? ? 該方法生成一個新的屬性節點（Attr 實例），并返回它。
? ? ? ? ? ? ? ? var text = document.createElement("p");//創建一個p標簽
? ? ? ? ? ? ? ? var content = document.createTextNode("我是文本")//創建一個文本
? ? ? ? ? ? ? ? var it = document.createAttribute("id")//創建一個id
? ? ? ? ? ? ? ? it.value = "root"//給id取名叫“root”
? ? ? ? ? ? ? ? text.appendChild(content);//往p標簽里添加文本
? ? ? ? ? ? ? ? text.setAttributeNode(it);//往p標簽里添加id
? ? ? ? ? ? ? ? console.log(text);//在控制臺輸出p標簽
????????????????//獲得頁面id為container的div標簽
? ? ? ? ? ? ? ? var container = document.getElementById("container");
? ? ? ? ? ? ? ? container.appendChild(text);//在div標簽里放入p標簽在頁面上顯示出來
? ? ? ? 6.Element對象_屬性
? ? ? ? ? ? Element對象對應網頁的 HTML 元素。每一個 HTML 元素，在 DOM 樹上都會轉化成一個
Element節點對象（以下簡稱元素節點）。
? ? ? ? ? ? a.Element.id
? ? ? ? ? ? ? ? Element.id 屬性返回指定元素的 id 屬性，該屬性可讀寫
? ? ? ? ? ? ? ? // HTML 代碼為 <p id="foo">
? ? ? ? ? ? ? ? var p = document.querySelector('p');
? ? ? ? ? ? ? ? p.id // "foo"
? ? ? ? ? ? b.Element.className
? ? ? ? ? ? ? ? className 屬性用來讀寫當前元素節點的 class 屬性。它的值是一個字符串，每個 class 之間用空格分割。
? ? ? ? ? ? c.Element.classList
? ? ? ? ? ? ? ? classList 對象有下列方法:
? ? ? ? ? ? ? ? ? ? add() ：????????????????增加一個 class
? ? ? ? ? ? ? ? ? ? remove() ：? ? ? ? ? 移除一個 class
? ? ? ? ? ? ? ? ? ? contains() ：????????檢查當前元素是否包含某個 class
? ? ? ? ? ? ? ? ? ? toggle() ：? ? ? ? ? ? 將某個 class 移入或移出當前元素
? ? ? ? ? ? ? ? var div = document.getElementById('myDiv');
? ? ? ? ? ? ? ? div.classList.add('myCssClass');
? ? ? ? ? ? ? ? div.classList.add('foo', 'bar');
? ? ? ? ? ? ? ? div.classList.remove('myCssClass');
? ? ? ? ? ? ? ? div.classList.contains('myCssClass'); // 返回true 或者 false
? ? ? ? ? ? ? ? div.classList.toggle('myCssClass'); // 如果myCssClass 不存在就加入，否則移除
? ? ? ? ? ? d.Element.innerHTML
? ? ? ? ? ? ? ? Element.innerHTML 屬性返回一個字符串，等同于該元素包含的所有HTML 代碼。該屬性可讀寫，常用來設置某個節點的內容。它能改寫所有元素節點的內容，包括 <HTML> 和 <body> 元素
? ? ? ? ? ? e.Element.innerText
? ? ? ? ? ? ? ? innerText 和 innerHTML 類似，不同的是 innerText 無法識別元素，會直接渲染成字符串
?7.Element獲取元素位置
? ? ? ? ? ? ? ? ? ? 屬性 ? ? ? ? ? ? ? ? ? ? ? ? ? ?描述
?clientHeight? ? ?獲取元素自身高度包括 padding 部分，但是不包括 border 、 margin
clientWidth? ? ? ?獲取元素自身寬度，同上
scrollHeight? ? ? 元素總高度，它包括 padding ，但是不包括 border 、 margin
? ? ? ? ? ? ? ? ? ? ? ? ?包括溢出的不可見內容
scrollWidth? ? ? ?元素總寬度，同上（在實際中和clientWidth差不多）
scrollLeft ? ? ?????當前水平滾動條距離左端的像素數量
scrollTop? ? ? ? ? 當前垂直滾動條距離頂端的像素數量
offsetHeight? ? ?元素的 CSS 垂直高度（單位像素），包括元素本身的高度、
? ? ? ? ? ? ? ? ? ? ? ? ? padding 和 border
offsetWidth ? ? 元素的 CSS 水平寬度（單位像素），同上
offsetLeft? ? ? ?左邊到定位父級左邊界的間距，前提是父級有定位，否則往更上一級定位
offsetTop ? ? ? 上邊到定位父級上邊界的間距
? ? ? ? ? ? // 視口高度
? ? ? ? ? ? document.documentElement.clientHeight
? ? ? ? ? ? // 網頁總高度
? ? ? ? ? ? document.body.clientHeight
8.CSS操作
? ? ? ? ? ? a.setAttribute
? ? ? ? ? ? ? HTML 元素的 style 屬性操作 CSS 樣式最簡單的方法，就是使用網頁元素節點的setAttribute 方法直接操作網頁元素的 style 屬性
? ? ? ? ? ? ? div.setAttribute('style','background-color:red;' + 'border:1px solidblack;');
? ? ? ? ? ? b.元素節點的 style 屬性
? ? ? ? ? ? ? ? var divStyle = document.querySelector('div').style;
? ? ? ? ? ? ? ? divStyle.backgroundColor = 'red';
? ? ? ? ? ? ? ? divStyle.border = '1px solid black';
? ? ? ? ? ? ? ? divStyle.width = '100px';
? ? ? ? ? ? ? ? divStyle.height = '100px';
? ? ? ? ? ? ? ? divStyle.fontSize = '10em';
? ? ? ? ? ? c.cssText 屬性
? ? ? ? ? ? ? ? var divStyle = document.querySelector('div').style;
? ? ? ? ? ? ? ? divStyle.cssText = 'background-color: red;' ?+ 'border: 1px solid black;'?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? + 'height: 100px;'?+ 'width: 100px;';
9.事件處理程序
? ? ? ? ? ? a.HTML事件處理
? ? ? ? ? ? ? ? <!DOCTYPE html>
? ? ? ? ? ? ? ? <html>
? ? ? ? ? ? ? ? ? ?<head lang="en">
? ? ? ? ? ? ? ? ? ? ? ? <meta charset="UTF-8">
? ? ? ? ? ? ? ? ? ? ? ? <title>Js事件詳解--事件處理</title>
? ? ? ? ? ? ? ? ? ?</head>
? ? ? ? ? ? ? ? ? ?<body>
? ? ? ? ? ? ? ? ? ? ? ?<div id="div">
? ? ? ? ? ? ? ? ? ? ? ? ? ?<button id="btn1" οnclick="demo()">按鈕</button>
? ? ? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ? ? ?<script>
? ? ? ? ? ? ? ? ? ? ? ? ? ?function demo(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?alert("hello html事件處理");
? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ?</script>
? ? ? ? ? ? ? ? ? ?</body>
? ? ? ? ? ? ? ? </html>
? ? ? ? ? ? b.DOM0級事件處理
? ? ? ? ? ? ? ? <body>
? ? ? ? ? ? ? ? ? ?<div id="div">
? ? ? ? ? ? ? ? ? ? ? ?<button id="btn1">按鈕</button>
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?<script>
? ? ? ? ? ? ? ? ? ? ? ? var btn1=document.getElementById("btn1");
? ? ? ? ? ? ? ? ? ? ? ? btn1.οnclick=function(){alert("Hello DOM0級事件處理程序1");}//被覆蓋掉
? ? ? ? ? ? ? ? ? ? ? ? btn1.οnclick=function(){alert("Hello DOM0級事件處理程序2");}
? ? ? ? ? ? ? ? ? ?</script>
? ? ? ? ? ? ? ? </body>
? ? ? ? ? ? c.DOM2級事件處理
? ? ? ? ? ? ? ? <body>
? ? ? ? ? ? ? ? ? ?<div id="div">
? ? ? ? ? ? ? ? ? ? ? ?<button id="btn1">按鈕</button>
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?<script>
? ? ? ? ? ? ? ? ? ? ? ?var btn1=document.getElementById("btn1");
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? btn1.addEventListener("click",demo1);
? ? ? ? ? ? ? ? ? ? ? ? btn1.addEventListener("click",demo2);
? ? ? ? ? ? ? ? ? ? ? ? btn1.addEventListener("click",demo3);
? ? ? ? ? ? ? ? ? ? ? ? function demo1(){ alert("DOM2級事件處理程序1") }
? ? ? ? ? ? ? ? ? ? ? ? function demo2(){?alert("DOM2級事件處理程序2") }
? ? ? ? ? ? ? ? ? ? ? ? function demo3(){ alert("DOM2級事件處理程序3") }
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? btn1.removeEventListener("click",demo2);
? ? ? ? ? ? ? ? ? ?</script>
? ? ? ? ? ? ? ? </body>
10.事件類型之鼠標事件
? ? ? ? ? ? 鼠標事件：鼠標事件指與鼠標相關的事件，具體的事件主要有以下一些
1 click： ? ? ? ????????按下鼠標時觸發
2 dblclick： ? ????????在同一個元素上雙擊鼠標時觸發
3 mousedown： ? 按下鼠標鍵時觸發
4 mouseup：? ? ? ? 釋放按下的鼠標鍵時觸發
5 mousemove： ? 當鼠標在節點內部移動時觸發。當鼠標持續移動時，該事件會連觸發。
6 mouseenter：? ?鼠標進入一個節點時觸發，進入子節點不會觸發這個事件
7 mouseleave：? ?鼠標離開一個節點時觸發，離開父節點不會觸發這個事件
8 mouseover：? ? ?鼠標進入一個節點時觸發，進入子節點會再一次觸發這個事件
9 mouseout：? ? ? ?鼠標離開一個節點時觸發，離開父節點也會觸發這個事件
10 wheel：? ? ? ? ? ?滾動鼠標的滾輪時觸發
? ? ? ? ? ? var btn1 = document.getElementById("btn1");
? ? ? ? ? ? btn1.onclick = function(){
? ? ? ? ? ? ? ?console.log("click事件");
? ? ? ? ? ? }
? ? ? ? ? ? 這些方法在使用的時候，除了DOM2級事件，都需要添加前綴 on.
11.Event事件對象
? ? ? ? ? ? 事件發生以后，會產生一個事件對象，作為參數傳給監聽函數。
? ? ? ? ? ? a.Event對象屬性：
? ? ? ? ? ? ? ? 1 Event.Target
???????????????????????Event.target屬性返回事件當前所在的節點
? ? ? ? ? ? ? ? ? ? // HTML代碼為
? ? ? ? ? ? ? ? ? ? // <p id="para">Hello</p>
? ? ? ? ? ? ? ? ? ? function setColor(e) {
? ? ? ? ? ? ? ? ? ? ? ?console.log(this === e.target);
? ? ? ? ? ? ? ? ? ? ? ?e.target.style.color = 'red';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? para.addEventListener('click', setColor);
? ? ? ? ? ? ? ? 2 Event.type
? ? ? ? ? ? ? ? ? ? Event.type屬性返回一個字符串，表示事件類型。事件的類型是在生成事件的時候。該屬性只讀。 ?
? ? ? ? ? ? b.Event對象方法：
? ? ? ? ? ? ? 3?Event.preventDefault()
????????該方法取消瀏覽器對當前事件的默認行為。比如點擊鏈接后，瀏覽器默認會跳轉到另一個頁面，使用這個方法以后，就不會跳轉了。
? ? ? ? ? ? ? ? ? ? btn.onclick = function(e){
? ? ? ? ? ? ? ? ? ? ? ?e.preventDefault(); // 阻止默認事件
? ? ? ? ? ? ? ? ? ? ? ?console.log("點擊A標簽");
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?4 Event.stopPropagation()
????????該方法阻止事件在 DOM 中繼續傳播，防止再觸發,阻止事件冒泡。定義在別的節點上的監聽函數，但是不包括在當前節點上其他的事件監聽函數? 。
? ? ? ? ? ? ? ? ? ? btn.onclick = function(e){
? ? ? ? ? ? ? ? ? ? ? ?e.stopPropagation(); // 阻止事件冒泡
? ? ? ? ? ? ? ? ? ? ? ?console.log("btn");
? ? ? ? ? ? ? ? ? ? } ?
12.事件類型之鍵盤事件
1 keydown：按下鍵盤時觸發。
2 keypress：按下有值的鍵時觸發，即按下 Ctrl、Alt、Shift、Meta 這樣無值的鍵，這個事件? ? ? ? ? ? ? ? ? ? ? ? 不會觸發。對于有值的鍵，按下時先觸發keydown事件，再觸發這個事件。
3 keyup：? ? ?松開鍵盤時觸發該事件? ? ? ? ? ? ? ? ? ?
?4 keyCode:? 唯一標識// ?回車鍵值為13
? ? ? ? ? ? ? ?
????????????????username.onkeypress = function(e){
? ? ? ? ? ? ? ? ? ? ? ?console.log("keypress事件");
? ? ? ? ? ? ? ? ? ? }
????????????????var username = document.getElementById("username");
? ? ? ? ? ? ? ? username.onkeydown = function(e){// 按下回車鍵觸發的事件
? ? ? ? ? ? ? ? ? ?if(e.keyCode === 13){
? ? ? ? ? ? ? ? ? ? ? ?console.log("回車");
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
13.事件類型之表單事件
? ? ? ? ? ? 1 input事件
????????input事件當 <input>、<select>、<textarea> 的值發生變化時觸發。對于復選框（ <input type=checkbox> ）或單選框（ <input type=radio> ），用戶改變選項時，也會觸發這個事件。input事件的一個特點，就是會連續觸發，比如用戶每按下一次按鍵，就會觸發一次input事件。
? ? ? ? ? ? ? ? var username = document.getElementById("username");
? ? ? ? ? ? ? ? username.oninput = function(e){// 實時獲取當前輸入框的內容
? ? ? ? ? ? ? ? ? ?console.log(e.target.value);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? 2 select事件
????????select事件當在 <input>、<textarea> 里面選中文本時觸發
? ? ? ? ? ? ? ? // HTML 代碼如下
? ? ? ? ? ? ? ? // <input id="test" type="text" value="Select me!" />
? ? ? ? ? ? ? ? var elem = document.getElementById('test');
? ? ? ? ? ? ? ? elem.addEventListener('select',
? ? ? ? ? ? ? ? function (e) {
? ? ? ? ? ? ? ? ?console.log(e.type); // 該事件類型是"select"
? ? ? ? ? ? ? ? }, false);
? ? ? ? ? ? 3 Change事件
????????Change事件當 <input>、<select>、<textarea> 的值發生變化時觸發。?它與input事件的最大不同，就是不會連續觸發，只有當全部修改完成時才會觸發。
? ? ? ? ? ? ? ? var email = document.getElementById("email");
? ? ? ? ? ? ? ? email.onchange = function(e){
? ? ? ? ? ? ? ? ? ?console.log(e.target.value);//當輸入完后獲取值
? ? ? ? ? ? ? ? }
? ? ? ? ? ? 4 reset事件
?????????發生在表單對象 <form> 上，reset事件當表單重置（所有表單成員變回默認值）時觸發。
? ? ? ? ? ? 5 submit事件
????????發生在表單對象 <form> 上，submit事件當表單數據向服務器提交時觸發。
? ? ? ? ? ? ? ? <form id="myForm" οnsubmit="submitHandle">
? ? ? ? ? ? ? ? ? ?<button οnclick="resetHandle">重置數據
? ? ? ? ? ? ? ? </button>
? ? ? ? ? ? ? ? ? ?<button>提交</button>
? ? ? ? ? ? ? ? </form>
? ? ? ? ? ? ? ? var myForm = document.getElementById("myForm")
? ? ? ? ? ? ? ? function resetHandle(){
? ? ? ? ? ? ? ? ? ?myForm.reset();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? function submitHandle(){
? ? ? ? ? ? ? ? ? ?console.log("提交");
? ? ? ? ? ? ? ? }
14.事件代理(事件委托)
? ? ? ? ? ? 由于事件會在冒泡階段向上傳播到父節點，因此可以把子節點的監聽函數定義在父節點上，由父節點的監聽函數統一處理多個子元素的事件。這種方法叫做事件的代理（delegation）。
? ? ? ? ? ? var ul = document.querySelector('ul');
? ? ? ? ? ? ul.addEventListener('click', function (event) {
? ? ? ? ? ? ? ? ?if (event.target.tagName.toLowerCase() ==='li') {
? ? ? ? ? ? ? ? ? ?// some code
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
15.定時器
? ? ? ? ? ? JavaScript 提供定時執行代碼的功能，叫做定時器（timer），主要由 setTimeout() 和 setInterval()這兩個函數來完成。它們向任務隊列添加定時任務。
? ? ? ? ? ? 1 setTimeout ()
????????函數用來指定某個函數或某段代碼，在多少毫秒之后執行。它返回一個整數，表示定時器的編號，以后可以用來取消這個定時器。?setTimeout 函數接受兩個參數，第一個參數 func|code 是將要推遲執行的。函數名或者一段代碼，第二個參數 delay 是推遲執行的毫秒數。
? ? ? ? ? ? ? ? var timerId = setTimeout(func|code, delay);
? ? ? ? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? ? ? ? console.log("定時器")
? ? ? ? ? ? ? ? },1000)
? ? ? ? ? ? ? ? 溫馨提示：
????????還有一個需要注意的地方，如果回調函數是對象的方法，那么setTimeout 使得方法內部的 this 關鍵字指向全局環境，而不是定義時所在的那個對象
? ? ? ? ? ? ? ? 定時器取消：
? ? ? ? ? ? ? ? ? ? var id = setTimeout(f, 1000);
? ? ? ? ? ? ? ? ? ? clearTimeout(id);
? ? ? ? ? ? 2 setInterval ()
????????函數的用法與 setTimeout 完全一致，區別僅僅在于 setInterval 指定某個任務每隔一段時間就執行一次，也就是無限次的定時執行。
? ? ? ? ? ? ? ? var timer = setInterval(function() {
? ? ? ? ? ? ? ? ?console.log(2);
? ? ? ? ? ? ? ? }, 1000)
? ? ? ? ? ? ? ? 通過setInterval方法實現網頁動畫 ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? <!DOCTYPE html>
? ? ? ? ? ? ? ? <html lang="en">
? ? ? ? ? ? ? ? <head>
? ? ? ? ? ? ? ? ? ? <meta charset="UTF-8">
? ? ? ? ? ? ? ? ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? ? ? ? ? ? ? ? ? <title>Document</title>
? ? ? ? ? ? ? ? ? ? <style>
? ? ? ? ? ? ? ? ? ? ? ? #someDiv{
? ? ? ? ? ? ? ? ? ? ? ? ? ? width: 100px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? height: 100px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: red;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?</style>
? ? ? ? ? ? ? ? </head>
? ? ? ? ? ? ? ? <body>
? ? ? ? ? ? ? ? ?<div id="someDiv"></div>
? ? ? ? ? ? ? ? ? ? <script>
? ? ? ? ? ? ? ? ? ? ? ? var div = document.getElementById('someDiv');
? ? ? ? ? ? ? ? ? ? ? ? var opacity = 1;
? ? ? ? ? ? ? ? ? ? ? ? var fader = setInterval(function() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? opacity -= 0.05;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?if (opacity > 0) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?div.style.opacity = opacity;
? ? ? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?clearInterval(fader);
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }, 30);
? ? ? ? ? ? ? ? ? ? </script>
? ? ? ? ? ? ? ? ? </body>
? ? ? ? ? ? ? ? ? </html>
16.防抖(debounce)
????????防抖嚴格算起來應該屬于性能優化的知識，但實際上遇到的頻率相當高，處理不當或者放任不管就容易引起瀏覽器卡死。
? 防抖定義：
? ? ? ? ? ? ? ? 對于短時間內連續觸發的事件（上面的滾動事件），防抖的含義就是讓某個時間期限（如上面的1000毫秒）內，事件處理函數只執行一次。
? ? ? ? ? ? 從滾動條監聽的例子說起
? ? ? ? ? ? function showTop () {
? ? ? ? ? ? ? ? var scrollTop = document.documentElement.scrollTop;
? ? ? ? ? ? ? ? console.log('滾動條位置：' + scrollTop);
? ? ? ? ? ? }
? ? ? ? ? ? window.onscro = showTop
? ? ? ? ? ? function debounce(fn,delay){
? ? ? ? ? ? ??let timer = null //借助閉包
? ? ? ? ? ? ? return function() {
? ? ? ? ? ? ? ? if(timer){
? ? ? ? ? ? ? ? ? ?clearTimeout(timer)
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? timer = setTimeout(fn,delay) // 簡化寫法
? ? ? ? ? ? ? }
? ? ? ? ? ? }
17.節流(throttle)
????????如果在限定時間段內，不斷觸發滾動事件（比如某個用戶閑著無聊，按住滾動不斷的拖來拖去），只要不停止觸發，理論上就永遠不會輸出當前距離頂部的距離。但是如果產品同學的期望處理方案是：即使用戶不斷拖動滾動條，也能在某個時間間隔之后給出反饋呢？
? ? ? ? ? ? function throttle(fn,delay){
? ? ? ? ?? ?let valid = true
? ? ? ? ?? ?return function() {
? ? ? ? ?? ? ? if(!valid){
? ? ? ? ?? ? ? ? ? //休息時間 暫不接客
? ? ? ? ?? ? ? ? ? return false
? ? ? ? ?? ? ? }
? ? ? ? ?? ? ? // 工作時間，執行函數并且在間隔期內把狀態位設為無效
? ? ? ? ?? ? ? ?valid = false
? ? ? ? ?? ? ? ?setTimeout(function(){
? ? ? ? ?? ? ? ? ? ?fn()
? ? ? ? ?? ? ? ? ? ?valid = true;
? ? ? ? ?? ? ? ?}, delay)
? ? ? ? ?? ? ? ?}
? ? ? ? ? ? }
? ? ? ?
? ? ? ? ? ? function showTop () {
? ? ? ? ? ? ? ?var scrollTop =
? ? ? ? ? ? ? ? document.documentElement.scrollTop;
? ? ? ? ? ? ? ?console.log('滾動條位置：' + scrollTop);
? ? ? ? ? ? }
? ? ? ? ? ? window.onscroll = throttle(showTop,300)
? ? ? ? ?使用場景：
? ? ? ? ? ? 1 搜索框input事件，例如要支持輸入實時搜索可以使用節流方案（間隔一段時間就必須查詢相關內容），或者實現輸入間隔大于某個值（如500ms），就當做用戶輸入完成，然后開始搜索，具體使用哪種方案要看業務需求。
? ? ? ? ? ? 2 頁面resize事件，常見于需要做頁面適配的時候。需要根據最終呈現的頁面情況進行dom渲染（這種情形一般是使用防抖，因為只需要判斷最后一次的變化情況）。
十三、總結
????????這個筆記內容中的“重點”和“輕點”是我根據自己的學習狀況和理解來的，有什么不足還請多多包涵~
總結
以上是生活随笔為你收集整理的前端JavaScript学习小总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Springboot 静态资源路径配置
- 下一篇： JavaScript最简单的方法实现简易