全局變量 ner 格式化 符號 elements events etsec htm 基本概念

關於JavaScript的基礎變量，運算符的詳解以及基本的分支循環嵌套已經在

JS基礎變量及JS中的運算符
JS中的循環分支嵌套

說過了，今天我們所說的是做網頁中最長用到的東西。內容不算少，要有耐心，慢慢看

1.函數的聲明及調用：

函數的聲明及調用： 使用函數前要先定義才能調用 1.函數定義有三個部分：函數名，參數列表，函數體 定義函數的格式 function 函數名（參數1，參數2,.......）{ 函數執行部分； return 表達式； } 函數調用的格式：直接調用：函數名（參數一的值，參數二的值，.......） 聲明調用匿名函數： 1.聲明一個匿名函數直接賦給某個事件 事件名=function（）{} window.onload=function（）{ console.log（“”）； } 2.使用函數表達式調用匿名函數 聲明函數表達式： var func = function(){ console.log(“”)； } 調用函數表達式： func(); 》》使用匿名函數表達式，必須在聲明語句後，否則報錯 3.使用自執行函數調用匿名函數： ！function（參數一）{}(參數一的值)；——使用任意運算符開頭，一般用！ （function（）{}()）;——使用小括號將函數及之後的內容包裹 （function（）{} ）()；——使用括號只包裹匿名函數表達式 三種寫法特點：① 結構清晰，開頭加！，結尾加（）。不易亂 ②可以表明匿名函數與之後的括號為一個整體，推薦使用 ③無法表明函數與之後（）為一個整體，不推薦使用 2.函數的幾點強調 ①函數的聲明必須符合小駝峰法則，首字母小寫，之後每個單詞首字母大寫； ②參數列表可以有參數，可以無參數，分別稱為有參函數，無參函數； ③聲明函數時的參數列表稱為形參列表（變量名）； 調用函數時的參數列表稱為實參列表（變量值）； 函數中實際有效的參數取決於實參的賦值，未被賦值的形參，將為Undefined ④函數如果需要返回值，可以用return返回結果。 調用函數時，使用var 變量名=函數名；的方式接收返回結果； 如果函數沒有返回值，則接受的結果為Undefined； ⑤函數中變量的作用域： 在函數中使用var聲明的變量，默認為函數的局部變量，只在函數內部能用； 不用var聲明的變量，默認為全局變量（函數中的全局變量必須在函數調用後才能使用）； 函數的形參列表，為函數的局部變量，只在函數內部能用； ⑥函數聲明與函數調用沒有先後之分，即，調用語句可寫在聲明語句之前 JS中代碼運行，，會先進行檢查，裝載，即聲明變量、函數等操作 然後再進行執行階段（變量的賦值屬於執行階段） 函數的聲明屬於檢查裝載階段，函數的調用屬於執行階段。所以函數調用在哪無所謂 console.log(num); var num=10; funcN(); function funcN(){} 順序為： --檢查裝載-- ①var num;————聲明變量 ② function funcN() ————聲明函數 --執行階段-- ③console.log(num); ④ num=10; ⑤funcN(); 打印結果為Undefined 函數內部的屬性： 【argument對象】 1.作用：用於保存調用函數時所賦值的實參列表； 當我們調用函數並使用實參賦值時，實際上參數已經保存到argument數組中。即使沒有形參，也可以使用argument[n]的形式調用參數。 2.arguments數組的個數，取決於實參列表，與形參無關。（順序從零開始）但當第n個位置的形參、實參、arguments都存在時，形參與arguments 是同步的，即在函數中修改其中一個的值，另一個同步變化 3.argument.callee是argument的重要屬性，用來返回argument所在函數的引用： .argument.callee可以調用自身函數執行；在函數內部調用函數自身的寫法被稱為遞歸；

2.JS中的BOM（瀏覽器對象模型）

window對象的常用方法,均可以省略前面的window.，比如close();
1、prompt：彈窗接受用戶輸入；
2、alert：彈窗警告；
3、confirm：帶有確認/取消 按鈕的提示框；
4、close：關閉當前瀏覽器選項卡
5、open:重新打開一個窗口，傳入參數：URL/窗口名稱/窗口特征
6、setTimeout：設置延時執行，只會執行一次
7、setInterval：設置定時器，循環每隔n毫秒執行一次
兩個參數：需要執行的function/毫秒
8、clearTimeout: 清除延時
9、clearInterval:清除定時器
傳入參數：調用setInterval時返回一個ID，通過變量接受ID，傳入setInterval

其中設置延時執行與設置定時器很常用，下面是他們的用法示例：

var timeOutId = setTimeout(function(){
                console.log("setTimeout");
            },5000);
            
setInterval(function(){
                console.log("setInterval");
            },1000);

3.JS中的DOM

[DOM 樹節點] 分為三大類：元素節點、文本節點、屬性節點 文本節點跟屬性節點為元素節點的兩個子節點。 通過getElementById：通過ID獲取唯一的節點 [查看節點] 1.getElementById("div1")通過id獲取唯一節點:多個同名ID只會取第一個 2.getElementsByName()通過Name取到一個數組，包含一到多個節點 使用方式，通過循環，取到每個節點。循環次數，從零開始<數組.length getElementsByClassName()與getElementsByTagName取到的都是數組，用法同Name [查看和設置屬性節點] 1.查看屬性節點： getAttribute("屬性名")； 2.設置屬性節點： setAttribute("屬性名"，"屬性值") 【JS修改樣式 總結】 1.className:為元素設置一個新的class名字； div1.className="class1" 2、 .style.:為元素設置一個新的樣式.例如：div1.style.backgroundColor="red" 3.style.cssText:為元素同時修改多個樣式.例如：div1.style.cssText="width:100px;" [查看節點] 1. tagName屬性：獲取標簽的標簽名 2. innerHTML屬性：設置或者獲取節點內部的所有Html代碼 3. innerText：設置或者獲取節點內部的所有文字 4.JS中的事件 【JS中的事件分類】
1、鼠標事件：click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup
2、鍵盤事件：
keydown:鍵盤按下去觸發
keypress：鍵盤按下並松開的瞬間觸發
keyup：鍵盤擡起時觸發

[註意事項：（了解）]
①執行順序：keydown-keypress-keyup
②長按時，會循環不斷地執行keydown-keypress
③有keydown事件時,不一定有keyup事件，（事件觸發過程中，鼠標移走，可能就沒有keyup）
④keypress只能捕獲字母、數字、符號鍵，不能捕獲功能鍵；keydown/keyup基本可以捕獲所有的功能鍵（特殊除外）
⑤keypress區分大小寫，keydown和keyup不區分
⑥keydown/keyup區分主鍵盤和小鍵盤，keypress不區分

【確定鍵盤觸發按鍵】
1、在觸發過程中，傳入參數e，代表按鍵時間；
2、通過e.keyCode，確認按鍵ASCII碼值，進而確定按鍵；
3、所有瀏覽器系統的寫法（一般不必要）：
var evn = e||event;//取到鍵盤事件
var code = evn.keyCode||evn.which||evn.charCode;//取到按鍵


【JS中的DOM0事件模型】
1、內聯模型：直接將函數名作為HTML標簽的某個事件屬性的屬性值；
eg:<button onclick="func()">按鈕</button>
缺點：違反W3C關於HTML與JavaScript分離的基本原則；
2、腳本模型：在JS腳本中通過事件屬性進行綁定；
eg:window.onload = function(){}
3、局限性：同一節點，只能綁定同類型事件

【JS中的DOM2事件模型】
1、添加事件綁定：
IE10之前：btn1.attachEvent("onclick",函數);
其他瀏覽器：btn1.addEventListener("onclick",函數,true/false);
參數三：false(默認)，表示事件冒泡；true,表示事件捕獲
兼容寫法：
if(btn1.attachEvent){
btn1.attachEvent();
}else{
btn1.addEventListener();
}

優點：同一節點，可以添加多個同類型事件的監聽器；


【JS中的事件流】
1、事件冒泡：當某DOM元素觸發某事件時，會從當前DOM元素開始，逐個觸發其祖先元素的同類型事件，直到DOM根節點
DOM0模型，均為事件冒泡；
IE中使用：.attachEvents()添加的事件，均為冒泡；
其他瀏覽器：.addEventsListener添加的事件，當第三個參數為false時，為冒泡。

2、事件捕獲：當某DOM元素觸發某事件時，會從DOM根節點開始，逐個觸發其祖先元素的同類型事件，直到觸發到當前元素為止；
只有使用.addEventsListener添加的事件時，並設置第三個參數為true時，才進行捕獲；

↓ 當前元素 ↑
↓ ↑
冒 父元素 捕
↓ ↑
泡 爺爺元素 獲
↓ ↑
↓ DOM根節點 ↑

3、阻斷事件冒泡(重點):
IE瀏覽器中：將e.cancelBubble屬性設為true；
其他瀏覽器：調用e.stopPropagation();方法

兼容寫法：

function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
    e.stopPropagation(); //IE以外
} else {
    e.cancelBubble = true; //IE
}
}

下面是一個檢測你按鍵的代碼：

document.onkeydown = function(e){
                var evn = e||event;
                var code = evn.keyCode||evn.which||evn.charCode;
                console.log(e);
                console.log("keydown");
                if(code==13){
                    alert("你按了回車");
                }
            }

5.JS中的數組與內置對象

1.數組的概念： 數組是在內存中連續存儲多個有序元素的結構 元素的順序，稱為下標，通過下標查找對應元素 2.數組的聲明： ①通過 字面量聲明 var arr1 = [,,,] JS中，同一數組可以儲存多種不同數據類型(一般同一數組只用於存放同一數據類型) var arr1 = [1,"2",true,{"name":"lyx"},[1,2]]; ②通過new關鍵字聲明 var arr2 = new Array(參數); 參數可以： 為空：聲明一個沒有指定長度的數組； 為數組的長度length：聲明一個指定長度的數組，但數組的長度隨時可變，可追加。最大長度為0-2^32-1 數組默認的N個值：new Array(1，"2",true)相當於[1,"2",true] 3.數組中元素的讀寫/增刪： ①讀寫： 通過下標來訪問元素。例如 arr2[2]; ②增刪： deleta arr[n]刪除數組的第N+1個值，但數組長度不變，對應位置的值為Undefined arr3.push(值)；數組最後增加一個值arr3[arr3.length]=7; arr3.unshift(值);數組的第零位插入一個值，其余位數順延 arr3.pop();刪除數組最後一位，與delete不同的是POP執行後，數組長度減一。相當於arr3.length-=1 arr3.shift();刪除數組第0位，數組長度減一 4.數組中其他常用方法： ①join（"分隔符"）方法，將數組用指定分隔符分隔，轉為字符串。參數為空時，默認用逗號分隔 ②concat();（原數組不會被改變）將數組與多個數組的值連接為新的數組 [1,2].concat([3,4],[5,6])=[1,2,3,4,5,6];連接時中括號至多拆一層 [1,2].concat([1,2,[3,4]])=[1,2,1,2,[3,4]]；多層中括號，以二維數組的形式存在 ③push數組最後增加一個數；unshift數組開始增加一個數，【返回數組最新長度】 pop刪除數組最後一個數；shift：刪除數組第一個【返回被刪除的值】調用上述方法，原數組均被改變 ④reverse()；數組反轉。逆序排列。（原數組被改變） ⑤slice(begin,end);[原數組不會被改變]截取數組中的某一部分成為新數組， 傳遞一個參數默認為開始索引，從當前下標開始截取到最後一個; 傳遞兩個參數，截取從begin到end區間，左閉右開；包含begin，不含end 參數可以為負數，負一代表最後一個 ⑥sort（function）【原數組會被改變】對數組進行排序，不指定排序方法，默認按首位的ascii碼值進行排列 傳入排序函數，默認兩個參數a.b，如果返回值>0，則a>b;反之返回<0,則a<b arr3.sort(function(a,b){ return a-b;//升序排列 return b-a;//降序排列 }); ⑦indexOf(value，index)；返回數組中第一個value值對應的下標位置，若未找到，返回-1 lastindexOf(value，index)；返回最後一個value值對應的下標位置，------------ >>>>若未指定index參數：默認在數組所有元素中查詢，若指定index參數，則從當前index開始，向後查詢； 5.二維數組和稀疏數組【了解】 ① 稀疏數組：數組並不含有從0開始到length-1的所有索引（它的length值比實際元素個數大）； ② 二維數組:var arr5 = [[1,2,3],[4,5,6],[7,8,9],[0,1,2]];相當於一個四行三列的矩陣 取出二維數組元素：arr[行號][列號]，可使用嵌套循環遍歷 6.引用數據類型和基本數據類型 引用數據類型：數組/對象 賦值時是將原變量的地址賦給新變量。兩個變量實際上操作的是同一份數據，所以，修改其中一個變量 另一個跟著變化 基本數據類型：賦值時，是將原來變量的值賦給新的變量。兩個變量屬於不同的內存空間，修改其中一個，互不幹擾 6.JS中的內置對象 Boolean類 var isTrue = true ;//單純的變量 var isTrue1 = new Boolean(true);//一個Boolean類型的對象 console.log(isTrue1); Number類 Number.MIN_VALUE 可表示的最小數 Number.MAX_VALUE 可表示的最大數 num.toString() 將num轉為字符串? str3=num.toFixed(n);保留n位小數，進行四舍五入，轉為字符串? .valueOf()返回Number對象的基本數字值? num.tolocaleString()將數字按照本地格式的順序轉為字符串。一般是三個一組加逗號 .toPrecision（n）將數字格式化為指定長度,n=不包含小數點的所有位數和 var num=1;//Number類型 var num1=new Number(1);//Object類型 var str = num.toString();//String類型 var str2=num.toLocaleString(); var str3=num.toFixed(2); console.log(Number.MAX_VALUE) num.valueOf(); 字符串類String 1.屬性： .toLowerCase();所有字符轉為小寫。 .toUpperCase();所有字符轉為大寫。 .charAt(n);截取字符串中的第n個字符。 .indexOf("查詢子串"，index)；查詢從index開始的第一個子串的索引，沒找到，返回-1. .substring(begin,end);截取子串，只寫一個參數，從begin開始到最後， 寫兩個參數從begin開始到end,左閉右開 .replace("old","new");將字符串中的第一個old,替換為new; 第一個參數可以是字符串，也可以是正則表達式（普通字符串將只匹配第一個，正則表達式則根據 具體情況區分） .split("");將字符串通過指定分隔符分為數組。傳入""空字符串將把單個字符存入數組 var str = "i old A shuaiGe"; var xiaoxie = str.toLowerCase(); str.charAt(0); str.indexOf(); str.substring(); var rep=str.replace("old","new"); console.log(rep); Date類 1. new Date();拿到當前最新時間； new Date("2017,4,4,14:58:12");設置指定時間 2.常用方法： .getFullYear():獲取4位年份 .getMonth();獲取月份0~11 .getDate();獲取一個月中的某一天1——31 .getDay();獲取一周中的某一天。0——6 .getHours() 返回 Date 對象的小時 (0 ~ 23) 1 2 3 .getMinutes() 返回 Date 對象的分鐘 (0 ~ 59) 1 2 3 .getSeconds() 返回 Date 對象的秒數 (0 ~ 59)) 7.JS中的自定義對象 1、基本概念：
①對象：對象包含一系列無序屬性和方法的集合；
②鍵盤對：對象中的數據，是以鍵盤對的形式存在的，以鍵取值；
③屬性：描述對象特征的一系列變量。【對象中的變量】
④方法：描述對象行為的一系列方法。【對象中的函數】
2、對象的聲明：
①字面量聲明：
var obj = {
key1:value1, //屬性
key2:value2,
func:function(){} //方法
}
=-=對象中的鍵，可以是任何數據類型，但，一般用作普通變量名（不需要""）即可
=-=對象中的值可以是任何數據類型,但，字符串的話必須用""包裹
=-=多組鍵值對之間用英文逗號分隔，鍵值對的鍵與值之間用英文:分隔
new關鍵字：
var liSi = new Object();
liSi.name = "李四";
liSi.say = function(){
console.log("我是:"+this.name);
}
3、對象中屬性和方法的讀寫
①.運算符:
對象內部：this.屬性名 this.方法名()
對象外部：對象名.屬性名 對象名.方法名()
②通過["key"]調用 : 對象名["屬性名"]()
>>>如果key中包含特殊字符，則無法使用第①中方式，必須使用第二種；
>>>對象中，直接寫變量名，默認為調用全局變量，如果需調用對象自身屬性，則需要通過this關鍵字
③刪除對象的屬性和方法：delete 對象名.屬性/方法名 8.正則表達式 1.正則表達式包括兩部分： ①定義的正則表達式規則 ②正則表達式的模式（g/i/m） 2.正則表達式的聲明 ①字面量的聲明： var reg=/表達式規則/表達式模式 /white/g ②new關鍵字聲明：var reg=new RegExp("表達式規則","表達式模式") var reg=new Regexp("white","g") 3.正則表達式常用方法： .text():檢測字符串是否匹配某個正則模式，返回true、false； 4.正則表達式的常用模式： g 全局匹配，不加g默認非全局匹配，只匹配第一個符合條件的字符串（例："www".replace(/w/,"#")>>>#ww） i 忽略大小寫。不加i默認為需要匹配大小寫 例："aAa".replace(/A/,"#")>>>a#a "aAa".replace(/a/i,"#")>>>#Aa m 匹配多行模式。字符串多行顯示，每行都有開頭結尾 例子"abc "#bc abc".replace(/^a/g,"#")>>>abc" "abc "#bc abc".replace(/^a/gm,"#")>>>#bc" 下邊是一個郵箱底色正則判斷：

var email=document.getElementById("mail").value;

            var reg3=/^\w+\@[a-zA-Z0-9]{2}[a-zA-Z0-9]?\.[a-z]{2}[a-z]?$/
            if(reg3.test(email)){
                console.log("right");
            }
            else{
                console.log("wrong");
            }

OK嘍，相信會了這些，寫一些原生的JS去實現功能已經不成問題了！個人感覺最重要的還是學會去取節點，能取到想到的節點，什麽事都好說。。。

JavaScript要點匯總——The Most Important