JavaScript要點彙總——The Most Important

關於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();
一、prompt：彈窗接受用戶輸入；
二、alert：彈窗警告；
三、confirm：帶有確認/取消  按鈕的提示框；
四、close：關閉當前瀏覽器選項卡
五、open:從新打開一個窗口，傳入參數：URL/窗口名稱/窗口特徵
六、setTimeout：設置延時執行，只會執行一次
七、setInterval：設置定時器，循環每隔n毫秒執行一次
   兩個參數：須要執行的function/毫秒
八、clearTimeout: 清除延時
九、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"

二、 .style.:爲元素設置一個新的樣式.例如：div1.style.backgroundColor="red"

3.style.cssText:爲元素同時修改多個樣式.例如：div1.style.cssText="width:100px;"

[查看節點]

1. tagName屬性：獲取標籤的標籤名

2. innerHTML屬性：設置或者獲取節點內部的全部Html代碼

3. innerText：設置或者獲取節點內部的全部文字

4.JS中的事件

【JS中的事件分類】
一、鼠標事件：click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup
二、鍵盤事件：
    keydown:鍵盤按下去觸發
    keypress：鍵盤按下並鬆開的瞬間觸發
    keyup：鍵盤擡起時觸發
    
    [注意事項：（瞭解）]
    ①執行順序：keydown-keypress-keyup
    ②長按時，會循環不斷地執行keydown-keypress
    ③有keydown事件時,不必定有keyup事件，（事件觸發過程當中，鼠標移走，可能就沒有keyup）
    ④keypress只能捕獲字母、數字、符號鍵，不能捕獲功能鍵；keydown/keyup基本能夠捕獲全部的功能鍵（特殊除外）
    ⑤keypress區分大小寫，keydown和keyup不區分
    ⑥keydown/keyup區分主鍵盤和小鍵盤，keypress不區分
    
【肯定鍵盤觸發按鍵】
一、在觸發過程當中，傳入參數e，表明按鍵時間；
二、經過e.keyCode，確認按鍵ASCII碼值，進而肯定按鍵；
三、全部瀏覽器系統的寫法（通常沒必要要）：
    var evn = e||event;//取到鍵盤事件
    var code = evn.keyCode||evn.which||evn.charCode;//取到按鍵


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

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

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


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

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

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

三、阻斷事件冒泡(重點):
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中的自定義對象

 一、基本概念：
①對象：對象包含一系列無序屬性和方法的集合；
②鍵盤對：對象中的數據，是以 鍵盤對的形式存在的，以鍵取值；
③屬性：描述對象特徵的一系列變量。【對象中的變量】
④方法：描述對象行爲的一系列方法。【對象中的函數】
二、對象的聲明：
①字面量聲明：
var obj = {
    key1:value1,  //屬性
    key2:value2,
    func:function(){}  //方法
}
=-=對象中的鍵，能夠是任何數據類型，但，通常用做普通變量名（不須要""）便可
=-=對象中的值能夠是任何數據類型,但，字符串的話必須用""包裹
=-=多組鍵值對之間用英文逗號分隔，鍵值對的鍵與值之間用英文:分隔
new關鍵字：
var liSi = new Object();
liSi.name = "李四";
liSi.say = function(){
    console.log("我是:"+this.name);
}
三、對象中屬性和方法的讀寫
①.運算符:
對象內部：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去實現功能已經不成問題了！我的感受最重要的仍是學會去取節點，能取到想到的節點，什麼事都好說。。。