一、JS中的函數

【關於注釋】

/**

【文檔注釋】：開頭兩個*。寫在函數上方，在調用函數時可以看到文檔上方的描述信息。

*/

// 單行注釋

/* 多行注釋 */

1、函數的聲明及調用

（1）函數的聲明格式

function 函數名(參數1,參數2,......){

//函數體代碼

return 返回值;

}

（2）函數的調用

① 直接調用：函數名(參數1的值，參數2的值，......);

② 事件調用：直接在HTML標籤中，直接使用事件名="函數名()";

eg. <button onclick="sayHello("Hello,Genista!","pink")">點擊按鈕，列印內容</button>

【 函數的注意事項 】

① 函數名必須要符合小駝峰法則，首字母小寫，之後每個單詞首字母大寫；

② 函數名後面的括弧()中，可以有參數，也可以無參數，分別稱為有參函數和無參函數。

③ 聲明函數時的參數列表，稱為形參列表，形式參數，即變數的名字；

eg. function sayHello( str,color ){}

調用函數時的參數列表，稱為形參列表，實際參數，即變數的賦值；

eg. sayHello("Hello,Genista!","blue");

④ 函數的形參列表個數與實參列表個數沒關係；

函數的參數個數，取決於實參列表；實參多了不出錯，只是沒有形參接收他的值。

如果實參列表的個數 < 形參列表，則未賦值的形參，將為undefined；

⑤ 函數可以有返回值，使用return返回結果，調用函數時，可以使用一個變數接收函數的返回結果。

如果函數沒有返回值，則接收結果為undefined；

eg. function func(){

return "haha";

}

var num = func(); // num = "haha"

⑥ 函數中變數的作用域：

在函數中，使用var聲明的變數，為局部變數，只能在函數內部訪問；

在函數中，不用var聲明的變數，為全部變數，在函數外面也能訪問；

函數的形參列表，默認為函數的局部變數，只能在函數內部使用；

⑦ 函數的聲明與函數的調用沒有先後之分，即可以再聲明函數前調用函數；

eg. func(); //聲明func之前調用也是可以的

function func(){}

2、匿名函數的聲明和使用

（1）聲明一個匿名 函數，直接賦值給某一個事件；

window.onload = function(){} 窗口載入完成函數

【區別】function 函數名(參數1,參數2,......){

//函數體代碼

return 返回值;

}

（2）匿名函數表達式。（變數函數-即 將匿名函數賦值給一個變數）

聲明： var func = function(){}

調用： func();

【注】使用匿名函數表達式時，函數的調用語句，需要放在函數聲明語句之後！！！（與普通函數的區別）

（3）自執行函數。

① ！function(){}(); //可以使用多種運算符開頭，但一般用！

！function(形參列表){}(實參列表);

② ( function(){}(); ) //使用()將函數及函數後的括弧包裹

③ ( function(){})(); //使用()只包裹函數部分

三種寫法的特點：

① 使用！開頭，結構清晰，不容易混亂，推薦使用；

② 官方推薦寫法，能夠表明匿名函數與調用的()是一個整體。

③ 無法表明匿名函數與調用的()的整體性，不推薦使用。

（4）JS代碼的執行順序問題

JS代碼在運行時，會分為兩大部分：

檢查裝載階段：會先檢測代碼的語法錯誤，進行變數、函數的聲明；

執行階段：變數的賦值和函數的調用等

以下面代碼為例：

console.log(num); //undefined

var num = 10;

func1(); //函數可以正常執行

var function func1(){}

func2(); //函數不能正常執行，列印func2時顯示undefined。

var func2 = function(){} //函數表達式（匿名函數）

【原因】：上述代碼執行順序為：

檢查裝載階段運行的代碼 —— 變數、函數的聲明

var num;

var function func1 (){}

var func2;

執行階段運行的代碼 —— 變數的賦值、函數的調用

console.log(num);

num = 10;

func1();

func2();

var func2 = function(){}

3、函數的內部屬性

（1）arguments 對象數組

① 作用：用於儲存調用函數時的所有實參。

當我們調用參數，並使用實參賦值時，實際上參數列表已經保存到arguments數組中，

可以在函數中，使用arguments[n]的形式調用。n從0開始。

② arguments數組的個數，取決於實參列表，與形參無關。

但是，一旦第n個位置的形參、實參、arguments都存在時，形參將與arguments綁定，同步變化， 即，在函數中修改形參的值，arguments也會改變，反之，也成立。

③ arguments.callee 是arguments的重要屬性。

表示當前所在函數的引用地址。 在函數裡面可以使用arguments.callee調用函數本身，

在函數內部調用函數自身的寫法，叫做遞歸。

遞歸分為兩部分：遞和歸。以遞歸調用語句為界限，可以將函數分為上下兩部分。

遞：當函數執行上半部分遇到自身的調用語句時，繼續進入內層函數，在執行上半部分，直到執行完最內層函數。

歸：當最內層函數執行完以後，再從最內層函數開始，逐漸執行函數的下半部分。

當最外層函數值形式，遇到自身調用語句，會進入內層函數執行，而外層函數的後半部分暫不執行，直到最內層函數執行完以後，在逐漸向外執行。

【補充】confirm 彈出確認、取消對話框

var is = confirm("在嗎？？？");

if(is){

alert("在");

}else{

alert("不在");

}

二、BOM 瀏覽器對象模型

1、screen 對象

console.log(window.width); //屏幕寬度

console.log(window.height); //屏幕高度

console.log(window.availWidth); //屏幕可用寬度

console.log(window.availHeight); //屏幕高度 = 屏幕高度-底部工具欄

2、location 對象

console.log(location); 取到瀏覽器的URL信息

完整的URL的路徑：

協議名：//主機名（IP地址）：埠號/文件所在路徑？傳遞參數 （name1=value1&name2=value2）#錨點

eg. http://127.0.0.1:8080/wenjianjia/index.html?name=jredu#top

【location 常見屬性】

console.log(location);

console.log(location.href); //返回當前完整路徑

console.log(location.protocol); //返回協議名 http://

console.log(location.host); //返回主機名+埠號 127.0.0.1:8080

console.log(location.hostname); //返回主機名 127.0.0.1

console.log(location.port); //返回埠號 :8080

console.log(location.pathname); //返迴文件路徑 wenjianjia/index.html

console.log(location.search); //返回問好?開頭的參數列表 name=jredu

console.log(location.hash); //返回井號#開頭的錨點 #top

使用JS跳轉頁面

<1> window.location= "http://www.baidu.com";

<2>

3、history 瀏覽歷史

4、navigator 包含瀏覽器的各種系統信息

三、JS中的DOM操作

1、DOM樹 節點

分為三大類：元素節點、屬性節點、文本節點；

文本節點、屬性節點屬於元素子節點，操作時均需要先取到元素節點，再操作子節點；

可以使用getElement系列方法，取到元素節點；

【查看元素節點】

1、getElementById() ： 通過ID取到唯一節點；如果id重名，只能取到第一個。

getElementsByName() ：通過name屬性

getElementsByTagName() ：通過標籤名

getElementsByClassName() ：通過class名

【注】獲取元素節點時，一定注意：獲取節點的語句，必須在DOM渲染完成之後執行，可以有兩種實現方式：① 將JS代碼寫在body之後；② 將 代碼寫到window.onload函數之中。

後面三個得到的是數組格式。不能直接添加各種屬性，而應該取出數組的每一個單獨操作

eg. getElementsByName("name1")[0].onclick = function(){}

【查看/設置屬性特點】

1、查看屬性節點：getAttribute("屬性名")；

2、設置屬性節點：setAttribute("屬性名"，"新屬性值")；

【注】查看和設置屬性節點 必須先取到元素節點，才能使用！

更多優質內容推薦：

2017優就業就業促進計劃：http://www.ujiuye.com/zt/jycj/?wt.bd=zdy35845tt

學IT，用周末給自己加薪！

http://www.ujiuye.com/zt/zmb/?wt.bd=zdy35845tt

IT職業教育：http://xue.ujiuye.com/

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！