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