JavaScript · 編程開發筆記

**章節導航：** [TOC] ***** Demo - 小米商城首屏：http://a-1.vip/demo/mi Demo - 掃雷項目：http://a-1.vip/demo/bomb Demo - 貪吃蛇：http://a-1.vip/demo/eat Demo - via 手機瀏覽器導航頁：http://a-1.vip/demo/via Demo - 卡片展示：http://a-1.vip/demo/cardShow Demo - 抓到我算我輸：http://a-1.vip/demo/random ***** ## :-: 數據類型、 ``` var demo = 123456; demo = typeof(demo) //判斷變量的類型、 console.log(1, demo); //返回字符串 "number" 1、數據類型轉換(顯式類型) Number(mix) —— 到數值型 parseint(string,radix) —— 到整數型（12.9asd=12） parseFloat(string) —— 到浮點數類型（后面有字符串直接砍斷，12.6px=12.6） String(mix) —— 到文本（"不管放什么都會變成字符串"） toString(radix) —— 也是轉字符串，不過并沒什么卵用、調用方法不同、 Boolean() —— 到布爾值 2、數據類型轉換(隱式類型) isNaN() —— Number轉換后判斷是否為NaN，結果返回Boolean ++ -- +/- —— 轉換成數值、（加號兩側有一個為字符串類型的值，就會被轉換為字符串類型） - * / % → number && || ! < > <= >= == != 3、不發生類型轉換的、 === —— 絕對等于 !== —— 絕對不等于（例子： 1 === "1" false） ``` ``` // 基于不同條件執行不同動作。 switch ( val ) { case 1: // ··· return; case 2: // ··· return; case 3: // ··· return; default: // ··· return; } ``` ## :-: 取隨機數的方法、 ``` Math.random() // 返回：0 ~ 1 的隨機數、 // [函數] 生成從minNum到maxNum的隨機數 function randomNum(minNum, maxNum) { switch (arguments.length) { case 1: return parseInt(Math.random() * minNum + 1, 10); break; case 2: return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); break; default: return 0; break; } } ``` ## :-: 數組(Array) 屬性/方法([api](http://www.w3school.com.cn/jsref/jsref_obj_array.asp)) ``` // 數組的兩種創建形式、 // 字面量形式 (建議) var arr = [1, 2, 3]; // 通過構造函數創建、 var arr1 = new Array(1, 2, 3); // 只傳1個參數時，則表示創建整數個稀松數組、 var arr2 = new Array(9); // [,,,,,] // 1、屬性 // arr.constructor —— 返回對創建此對象的數組函數的引用。 // arr.length —— 設置或返回數組的成員數、 // arr.prototype —— 使您有能力向對象添加屬性和方法。 // 2.1、方法：會改變原數組、 // arr.push() —— 向數組的末尾添加'一個或更多'成員，并返回新的'長度'。 // arr.unshift() —— 向數組的開頭添加'一個或更多'成員，并返回新的'長度'。 // arr.pop() —— 剪切并返回數組的最后一位成員、 // arr.shift() —— 剪切并返回數組的最前一位成員、 // arr.reverse() —— 顛倒數組中成員的順序。 // arr.splice() —— 剪切'指定區間'的成員并返回。并向該'指定區間頭位(第一個參數)'插入新成員(看演示)。 // arr.splice(從第幾位開始,截取多少的長度,在切口處添加新的數據(一個或多個)); // arr.splice(1,2,'a','b','c') —— 刪除并返回arr[1]、arr[2]，在arr[1]位置新增'a','b','c'、 // arr.splice(1,0,'ab','c') —— 不會刪除成員，并在指定位置插入新的數據、 // arr.sort() —— 對數組的元素進行排序、 // 演示 (fun參數傳兩個) var arr = [1, 6, 2, 3, 5, 4]; arr.sort(function(a, b) { // 當返回值為負數，前面的數放在前面、 // 當返回值為正數，后面的數放在前面、 // 當返回0時，不動、 // 總結：a - b 升序，b - a 降序、 return a - b; }); console.log(arr); // 返回數組：[1, 2, 3, 4, 5, 6] // 數組打亂(隨機排序); arr.sort(function() { // 隨機生成 0 ~ 1 的浮點數、 var mu = Math.random(); if (mu > 0.5) { return 1; } else { return -1; } }); // 數組打亂(隨機排序) 簡寫形式 arr.sort(function() { // 隨機生成 0 ~ 1 的浮點數、 return Math.random() - 0.5; }); console.log(arr); // 返回數組：[6, 5, 1, 3, 2, 4] // 2.2、方法：不改變原數組、 // arr.concat() —— 可拼接多個數組，參數為數組類型、 // arr.slice() —— 返回指定區間的數組、 // arr.slice(從該位開始截取,截取到該位); var arr = [1, 2, 3, 4, 5]; arr.slice(1, 3); // 返回：[2, 3] arr.slice(1); // 返回：[2, 3, 4, 5] arr.slice(); // 空截取：不傳參數返回整個數組，可以將類數組轉換成數組。(克隆數組) // arr.toString() —— 數組轉字符串、 // arr.join() —— 數組合并為字符串，1個參數，字符串類型、(不傳參默認',') // str.split('') —— 字符串拆分為數組，1個參數，字符串類型、 // 補充說明：arr[-1] 當數組的索引為負數時，表示取出倒數第幾位、 // 數組跟對象的特點相似，一般都不容易報錯、 ``` ## :-: 類數組de構建 ``` // 好處：既能當數組使，也可以當對象使、 var obj = { 0: 'a', 1: 'b', 2: 'c', abc: 123, push: Array.prototype.push, // 必有的屬性、 length: 3, // 加入splice后外觀上看起來就跟數組一樣了、 splice: Array.prototype.splice } console.log(obj); // ["a", "b", "c", abc: 123] ``` ## :-: 原型鏈繼承·圣杯模式、 ``` function inherit(Target, Origin) { function F() {}; F.prototype = Origin.prototype; Target.prototype = new F(); Target.prototype.constuctor = Target; Target.prototype.ubar = Origin.prototype; } ``` ## :-: <a href="http://www.w3school.com.cn/jsref/jsref_events.asp">Element 事件</a> ``` // 綁定事件有三種形式、 var div = document.getElementsByTagName('div')[0]; // Top 1 onclick div.onclick = function() { // 缺陷：只能綁定1個函數、 console.log(1); }; // Top 2 addEventListener div.addEventListener('click', function() { // 可以綁定多個'不同的'函數，IE9 以下不兼容、false參數與冒泡有關、 console.log(2); }, false); // Top 3 attachEvent div.attachEvent('on' + 'click', function() { // IE獨有、 console.log(3); }); // 封裝一個兼容性的寫法、 // 參數：元素對象,事件類型(文本),執行的函數、 function addEvent(elem, type, handle) { if (elem.addEventListener) { elem.addEventListener(type, handle, false); } else if (elem.attachEvent) { elem.attachEvent('on' + type, function() { handle.call(elem); }); } else { elem['on' + type] = handle; } } // Demo function demo() { alert('alert demo'); } addEvent(div, 'click', demo); // 解除事件綁定的方法、 div.onclick = null; div.removeEventListener(type, fun, null); div.detach('on' + type, fun)); // 取消事件冒泡 div.onclick = function(e) { // W3C標準：取消事件冒泡、 e.stopPropagation(); // IE獨有：取消事件冒泡、 e.cancelBubble = true; } // 事件冒泡：封裝的兼容方法、 function stopBubble(event) { if (event.stopPropagation) { // W3C標準：取消事件冒泡、 event.stopPropagation(); } else { // IE獨有：取消事件冒泡、 event.cancelBubble = true; } } // 取消右鍵出菜單事件、 document.oncontextmenu = function(e) { // W3C標準：取消右鍵菜單 e.preventDefault(); // IE獨有：取消右鍵菜單 e.returnValue = false; // 句柄的寫法，兼容性特別好、 return false; } // 事件冒泡：封裝的兼容方法、 function cancelHandler(event) { if (event.preventDefault) { // W3C標準：取消右鍵菜單 event.preventDefault(); } else { // IE獨有：取消右鍵菜單 event.returnValue = false; } } ``` ## :-: ECMS 文檔對象、(document) ``` <div class="demo" id="a0"></div> <script> // var div = document.getElementsByClassName('class'); // var div = document.getElementById('a0'); var div = document.getElementsByTagName('div'); // 標簽選擇器 div[0].style.width = '100px'; //修改樣式 div[0].style.height = '100px'; // div[0].style.backgroundColor = '#225'; div[0].style.border = '2px solid #f40' div[0].innerHTML = '改變dom元素的文本內容'; </script> ``` ``` // JavaScript的元素選擇、像CSS一樣選。不足：靜態的，不同步。用得少； var div = document.querySelector('div.demo>span'); //只能選一個 var div_arr = document.querySelectorAll('div.demo>span'); //選出來的是數組; ``` ``` var div = document.body.createElement('div') //創建一個div document.body.appendChild(div); //在body的尾部插入這個div元素 div.innerHTML = 'Hello World!' //寫入div元素的內容 //元素的刪除操作 var 變量 = div.removeChild(span); //刪除子元素，返回當前被刪除的元素值； span.remove(); //無參數，自我銷毀； ``` ## :-: <a href="http://www.w3school.com.cn/jsref/jsref_obj_date.asp">時間對象(Data)</a> ``` var date = new Date(); console.log(date); //打印 Sun Nov 25 2018 20:22:11 GMT+0800 (中國標準時間) // .get 取 .set 設置 // .getTime() 取時間戳、 ``` ## :-: 定時器 ``` //定時器·循環 var Interval = setInterval(function() { //代碼塊、 }, 1000) clearInterval(Interval); //銷毀定時器 //定時器·延時執行 (特點：只執行一次) var Interval = setTimeout(function(){ //代碼塊、 },1000) clearInterval(Interval); //銷毀定時器 ``` ## :-: 置滾動條 ``` scroll(x, y); //絕對位置； scrollBy(x, y); //相對位置，這個可以累加； ``` ## :-: 改變元素樣式 ``` var div = document.getElementsByTagName('div')[0]; //選中指定HTML元素、 var style = getComputedStyle(div, null); //返回當前div展示出來的所有樣式，屬性對象 (只讀) 參數2為選擇偽元素； console.log(style); var style = div.style; //返回當前div行間樣式，屬性對象； console.log(style); var style = div.style.color = '#f40'; //通過修改行間屬性，間接的改變CSS顯示樣式； div.className = 'demo'; //通過改變class屬性值，可以巧妙的改變其樣式； div.id = 'demo'; ``` ## :-: call/appyl方法 ``` //改變this指向，傳參列表不同、 Cra.call(this,'a','b','c'); var arr = ['a','b','c']; Cra.appyl(this,arr); Cra.appyl(this,['a','b','c']); //簡寫 ``` ## :-: 元素節點的4個屬性、 ``` <div class="demo" id="a01">測試</div> <script> var div = document.getElementsByClassName('demo')[0]; //元素節點的4個屬性、 div.nodeName //元素的標簽名，大寫形式表示、只讀 div.nodeValue //Text節點或Comment節點的文本內容、可讀寫 div.nodeType //該節點的類型，只讀 div.attributes //Element節點的屬性集合、類數組 </script> ``` ## :-: 節點樹操作、 ``` // 查詢 // ID選擇器，唯一的、 var span = document.getElementById('id'); // 標簽選擇器，數組(arr)類型、 var div = document.getElementsByTagName('div')[0]; // 通過class選擇，數組(arr)類型、 var div_1 = document.getElementsByClassName('class')[0]; // 創建 // 創建一個文本節點，并賦值到變量、 var text = document.createTextNode('創建文本節點'); // 創建一個元素節點，并賦值到變量、 var span = document.createElement('span'); var p = document.createElement('p'); // 插入 // 將文本節點(text)，插入到html頁面里去、 span.appendChild(text); // 將元素節點(Element)，插入到html頁面里去、 div.appendChild(span); // 相對于某元素前面插入；div是父級元素，在div里面的span元素節點前面插入p標簽、 div.insertBefore(p, span); // 刪除節點 // 通過父級刪除節點，類似于剪切操作。會把節點返回出來； var span = div.removeChild(span); // 節點銷毀自身，沒有返回值、 div_1.remove(); // 替換 // 拿p元素，替換div父級元素下的span元素；返回被替換的span元素、 var span = div.replaceChild(p, span); // 元素屬性 // 修改標簽里面的文本內容、 div.innerHTML = '文本的內容'; // 元素的方法 // 設置元素的屬性、(優點：可以自定義設置) div.setAttribute('class', 'demo'); // 取元素的屬性、 div.getAttribute('class'); //返回 demo ``` ## :-: HTML結構解析完，異步加載、 ``` // 原生js實現，異步加載、可以實現按需加載、 function loadScript(url, callback) { var script = document.createElement("script"); script.type = "text/javascript"; if (script.readyState) { script.onreadystatechange = function() { if (script.readyState == "complete" || script.readyState == "loaded") { callback(); } } } else { script.onload = function() { callback(); } } script.src = url; document.head.appendChild(script); } // 演示例程、 loadScript('js/demo.js', function() { // 執行'js/demo.js'里面的函數、 abc(); a(); b(); }); ``` ## :-: DOM元素解析完成事件、 ``` document.addEventListener('DOMContentLoaded', function() { // DOM元素解析完成事件、 var div = document.getElementsByTagName('div'); console.log(div); }, false) // 類似于jQery、 $(function(){ // 執行函數體、 }); ``` ## :-: 正則表達式 ([api](http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp)) ``` // 轉義符號： // \r —— 行結束符 \n —— 換行 (正常情況下一個換行 = \r\n) // \t —— 制表符 // 正則表達式的寫法 // var reg = new RegExp('[A-z]', 'g'); 第一種寫法、 // var reg = /[A-z]/g; 第二種寫法、 // i 不區分大小寫、 // g 全局匹配、 // m 多汗匹配、 // (abc|bcd) 匹配abc或者bcd、 // 默認是貪婪匹配原則、 var reg = /[\w]/igm; var str = "abcdefgh\nasfkjjnef\nasjdafij\naskmf"; var demo = reg.test(reg); // 測驗str中是否含有reg片段。返回 true、false console.log(demo); // 返回結果：true var demo = str.match(reg); // 挑選出正則匹配出來的片段，以數組形式展現、 console.log(demo); // 返回結果：數組類型、 // var reg = /(a)/1/g; /1 的意思是反向引用第1個括號的內容、 var str = 'aabb'; var str_1 = str.replace('a', 'z'); // 文本替換(只能替換掉第1個)、 console.log(1, str_1); // 返回結果："zabb" var str_1 = str.replace(/a/, 'z'); // 文本替換(只能替換掉第1個)、 console.log(2, str_1); // 返回結果："zabb" var str_1 = str.replace(/a/g, 'z'); // 文本替換(會全部替換掉)、 console.log(3, str_1); // 返回結果："zzbb" // 以下是配合正則，高級文本替換。$1、$2分別表示第1和第2個括號的內容， var str_1 = str.replace(/(\w)\1(\w)\2/g, '$2$2$1$1'); console.log(4, str_1); // 返回結果："bbaa" // 實例：用正則替換·轉小駝峰、 var str = 'the-first-name'; var reg = /-(\w)/g; console.log(str.replace(reg, function($, $1) { // console.log($, $1); return $1.toUpperCase(); })); // 返回字符串(小駝峰)：'theFirstName' // 正向預查(a(?=b) 選出后面帶b的a) str = '1abaa1abuuhuaa'; reg = /[\w]{3}a(?=b)/g; console.log(str.match(reg)); // 返回數組：["aa1a"] "1ab'aa1a'buuhuaa" str = 'asdfv11aaaaaaaaaaaaaabbbbbbccccc'; reg = /([\w])\1*/g; console.log(str.replace(reg, '$1')); // 返回字符串：'asdfv1abc' ``` ## :-: new Fn(); —— 小測試、 ``` function Fn() { this.a = 123; this.b = [1, 515, 5, 16]; console.log('demo'); //會被正常執行、 // ····· 以下情況不會改變構造函數的結果 ····· // return 123234; // 無效 // return '123234'; // 無效 // return true; // 無效 // ····· 以下情況會改變構造函數的結果 ····· // return [3, 156, 5, 11, 5]; // 有效 // return { // b: 321 // }; // 有效 // return function() {console.log(123);}; // 有效 // ····· 特殊情況 ····· // return this.a; // 原始值，無效、 // return this.b; // 數組，有效、 // 總結：返回原始值時不會改變其結果，返回對象類型時會改變 new Fn() 后的結果、 } var fn = new Fn(); console.log(fn); ``` ## :-: <a href="http://www.w3school.com.cn/jsref/dom_obj_window.asp">Window 對象(BOM)</a> ``` window.alert('彈出提示框'); window.confirm('彈出選擇框，true/false'); window.prompt('彈出輸入框，返回輸入的文本'); window.onbeforeunload = function() {return '關閉頁面前，會彈出提示詢問是否關閉';} // 彈出新的窗口、窗口名(window.name='demo') 如第二個參數('demo')省略，則只創建標簽頁、 window.open('https://www.baidu.com', 'demo', 'width=300,height=200') window.open('https://www.baidu.com') // window.history對象 history.length; // 返回當前窗口(標簽頁)中，歷史URL變動的次數、 history.back(); // 后退 history.forward(); // 前進 history.go(-1); // -2 = 后退2次，0 = 刷新，2 = 前進2次、 // window.location對象(可讀/可寫) // 屬性、 location.href // 完整URL location.hostname // 域名 location.hash // 錨點(#) location.pathname // 路徑部分 location.search // ?號后面的數據參數 location.protocol // 傳輸協議(如：http/https) // 方法、 location.assign('https://www.baidu.com'); // 加載新的文檔、 location.reload(true); // 重新加載當前文檔、可選參數：false = 直接取緩存加載、true = 重新加載云端的文檔 ``` ## :-: js收官(碎片化知識) ``` <p>  <label for="demo">當點擊時輸入框獲得焦點、</label> <input type="text" id="demo"> </p>   <script> // 圖片·預加載 var oImg = document.createElement('img');\ // 創建img標簽、 var oImg = new Image(); // img標簽加載完成事件、 oImg.onload = function() { var div = document.getElementById('demo'); // 將img標簽插入到div里去，此時this為img標簽對象、 div.appendChild(this); } // 開始加載圖片、 oImg.src = 'http://xx.com/demo/xxx.png'; </script> ``` ## :-: 判斷變量是否為Document對象的方法、 ``` if (selector instanceof Element) { // 判斷selector是dom對象、 } ```