寫在前面：
以前在學習js的時候，這一塊感受掌握的很很差，而這一塊在js中是比較重要的，因此藉此系統的將這一部分進行整理，以備不時之需 。javascript
1、函數css
1.js中函數的聲明與調用html
1).聲明：java
function 函數名(參數一，參數二){
//函數體代碼
return 返回值
}
2).調用windows
①直接調用：函數名(參數一，參數二); ②經過事件調用：再HTML標籤中，經過事件屬性進行調用
【函數聲明與調用的注意事項】數組
①函數中有沒有返回值，只取決於函數中有沒有return，無需刻意聲明
在js中，有返回值能夠不接受；沒有返回值，也能夠接受 ，結果爲undefined
②js中，函數的形參列表與實參列表，無任何關聯
即 有參數能夠不賦值（未賦值 undefined）；沒有參數也能夠賦值
函數的實際參數個數取決於實參列表
③js中，函數是變量的惟一做用域
那麼，函數的形參屬於函數的局部變量
④函數的聲明與調用語句，沒有前後之分。即，能夠先調用語句，再聲明函數
func()
function func(){}
【匿名函數的聲明與使用】瀏覽器
1).匿名函數表達式：緩存
var func =function(){};
調用：func();
注意：函數的調用語句，必須放在聲明語句以後
2).直接將匿名函數賦值給一個事件服務器
window.onload=function(){}//文檔就緒函數，確保函數中的代碼，在html文檔加載完以後執行代碼
document.getElementById("id").onclick=function(){}
3).自執行函數app
① ！functon(){}();//開頭用！代表這是自執行函數 建議
!function(){
alert("自執行函數1");
}();
② (function(){}());//用括號將匿名函數聲明與調用包括在一塊兒--->代表其總體性
(function(){
alert("自執行函數2");
})();
③ (function(){})();//用括號將匿名函數將聲明語句進行包括
(function(){
alert("自執行函數3");
})();
js代碼的執行
1.檢查編譯階段
主要檢查語法的錯誤，進行變量的聲明、函數的聲明等操做。
2.代碼執行階段
變量的賦值、函數的調用等執行語句，屬於代碼的執行階段
var num=1;
function func(){}
var func2=function(){}
//檢查編譯階段
var num;
function func(){}
var func2;
//代碼執行階段
num=1;
func();
func2();
func2=function(){}
【Arguments對象】
1.做用：用於保存全部函數的實參 >>>但函數存在實參時，可使用數組下標訪問函數的全部實參 >>>arguments[4]
2.arguments中元素的個數，取決於實參列表，與形參個數無關 3.一旦函數調用時，傳入了實參，那麼對應位置的形參，將於arguments對應的元素進行綁定 修改形參，arguments中對應的元素將被改掉。反之，也成立 可是，若是某一位置，沒有傳入實參，則該位置的形參和arguments將再也不進行關聯 4.arguments.callee(); 執行當前函數的引用，用於在函數中使用遞歸調用自身
2、BOM操做
screen 對象
width height availWidth//可用寬度 availHeight//可用高度=screen.height-底部任務欄高度 console.log(screen);//屬性,屬於windows對象，windows可省略 console.log(window.screen);
location對象
href：完整的url路徑 protocal：協議ming hostname主機名 port：端口號 host：主機名+端口號 pathname：文件路徑 search：從？開始的參數部分 hash：從#開始的錨點部分
function gotoBaidu(){
location.href="http://www.baidu.com";
}
//跳轉頁面。加載新頁面之後，能夠點擊回退按鈕返回
function gotoBaiduByAssign(){
location.assign("http://www.baidu.com");
}
//跳轉界面，加載新頁面之後沒有回退按鈕，沒法返回
function gotoBaiduByReplace(){
location.replace("http://www.baidu.com");
}
//刷新當前頁面 location.reload();刷新頁面，若是本地有緩存，將從緩存中讀取，至關於按F5 location.reload(true);//強制刷新，從服務器端從新獲取數據 至關於按Ctrl+F5
history 對象
console.log(history.length);//用於記錄當前頁面跳轉的歷史頁面的個數 history.forward();//上一頁 history.back();//下一頁 console.log(history.length);//用於記錄當前頁面跳轉的歷史頁面的個數 history.forward();//上一頁 history.back();//下一頁
navigator 對象
console.log(navigator);
//檢測瀏覽器中安裝的全部插件
for(var i=0;i<navigator.plugins.length;i++){
console.log(navigator.plugins[i].name);
}
window 對象
1.prompt()彈窗輸入
alert()彈框輸出
2.confirm(""):帶肯定、取消的提示框。分別返回true、false
3.close();關閉瀏覽器窗口
4.open():打開一個新窗口
參數一：新窗口的地址
參數二：新窗口的名字，沒啥用
參數三：新窗口的各類配置屬性
window.open("http://www.baidu.com","baidu","width=600px,height=600px,top=100px");
5.setTimeOut():延時器
參數一：能夠傳入匿名函數，也能夠傳入函數名
參數二：延時的毫秒數
參數三~參數n：傳給回掉函數的參數
setTimeout(function(num1,num2){},2000,"hahah",123);
6.setInterval():定時器。表示每隔多少毫秒執行一遍函數
其餘用法與setTimeout徹底相同
7.clearInterval()、clearTimeout():清除定時器、清除延時器
聲明定時器時，能夠接受返回的id，並將id傳給clearInterval()便可清除
3、DOM操做
DOM樹的節點
分三大類：元素節點（標籤節點）、屬性節點、文本節 屬性節點和文本節點都屬於元素節點的子節點。所以操做時，需先選中元素節點，再修改屬性和文本
<ul> <li id="first"><b>第一項</b></li> <li class="cls" name="name">第二項</li> <li class="cls">第三項</li> <li name="name">第四項</li> </ul> <div id="div1"> <ul> <li>第一項</li> <li class="cls" name="name">第二項</li> <li class="cls">第三項</li> <li name="name">第四項</li> </ul> </div>
【查看元素節點】
1）使用getElement系列方法：
var li = document.getElementById("first");
var lis1 = document.getElementsByClassName("cls");
var lis2 = document.getElementsByName("name");
var lis3 = document.getElementsByTagName("li"注意事項
①id不能重名，id重複取第一個
②獲取元素節點時，必須等到DOM樹加載完成後才能獲取
兩種方式：a.js寫在文檔最後
b.代碼寫在window.onload函數中
③經過getElments系列取到的爲數組格式，操做時必須取到每個元素，才能進行操做，不能直接對數組進行操做
document.getElementByTagName("li").click=function(){} ×
document.getElementByTagName("li")[0].click=function(){} √
④這一系列方法，也能夠先選中一個DOM節點，在從選中的DOM節點中，選擇須要的節點：
document.getElementById("div1").getElementByTagName("li");
2）經過querySelector系列方法：
① 傳入一個選擇器名稱，返回第一個找到的元素。 一般用於查找ID：
var dq1 = document.querySelector("#id");
② 傳入一個選擇器名稱，返回全部找到的元素，不管找到幾個，都返回數組格式。
var dqs1 = document.querySelectorAll("#div1 li");
【查看/設置屬性節點】
一、 查看屬性節點：.getAttribute("屬性名");
二、 設置屬性節點：.setAttribute("屬性名","屬性值");
三、 注意事項：
.setAttribute() 在老版本IE中會存在兼容性問題，可使用.符號代替。
document.getElementById("first").className = "haha";
【JS修改CSS的多種方式】
一、 使用setAttribute設置class和style document.getElementById("first").setAttribute("class","class1");
document.getElementById("first").setAttribute("style","color:red;");
二、使用.className添加一個class選擇器。
document.getElementById("first").className = "class1";
三、 使用.style.樣式 直接修改單個樣式。 注意樣式名必須使用駝峯命名法 document.getElementById("first").style.fontSize = "18px";
四、使用.style 或 .style.cssText 添加一串行級樣式：
document.getElementById("first").style = "color:red;"; // IE不兼容 document.getElementById("first").style.cssText = "color:red;"; // √
【查看/設置文本節點】
一、.innerHTML: 取到或設置一個節點中的HTML代碼。 二、.innerText: 取到或設置一個節點中的文本，不能設置HTML代碼。
【層次節點操做】
1. .childNodes： 獲取當前節點的全部子節點（包括元素節點和文本節點）。
children： 獲取當前節點的全部元素子節點（不包含文本節點）。
2. .parentNode: 獲取當前節點的父節點。
3. .firstChild： 獲取第一個子節點，包括回車等文本節點；
.firstElementChild： 獲取第一個元素節點。 不含文本節點。
.lastChild、.lastElementChild 獲取最後一個，同理。
4. .previousSibling： 獲取當前節點的前一個兄弟節點，包括文本節點；
.previousElementSibling： 獲取當前節點的前一個元素兄弟節點。
.nextSibling、.nextElementSibling： 同理。
5. .attributes: 獲取當前節點的全部屬性節點。 返回數組格式。
【建立並新增節點】
1. document.createElement("標籤名")： 建立一個新節點，並將建立的新節點返回。
須要配合.setAttribute()爲新節點設置屬性。
2. 父節點.insertBefore(新節點,目標節點)： 在父節點中，將新節點插入到目標節點以前。
父節點.appendChild(新節點)： 在父節點的內部最後，插入一個新節點。
3. 源節點.cloneNode(true)： 克隆一個節點。
傳入true表示克隆源節點以及源節點的全部子節點；
傳入false或不傳，表示只克隆當前節點，而不克隆子節點。
【刪除、替換節點】
1. 父節點.removeChild(子節點)： 從父節點中，刪除指定子節點。 2. 父節點.replaceChild(新節點,老節點)： 從父節點中，用新節點替換老節點。
DOM對象
html表中的對象有三種：
1.表格對象 table= document.getElementById("table");
2. 行對象 table.rows[0]
3.單元格對象 table.rows[0].cells[0]
【表格對象中的屬性和方法】
1.rows屬性，返回當前表格的全部行，爲數組格式
2.insertRow(index):在表格的index行，插入一個新行。返回新產生的行對象
3.deleteRow(index):刪除表格的第index行
【行對象中的屬性和方法】
1.cells屬性：返回當前行中的全部單元格對象，爲數組格式 2.rowIndex屬性，返回當前行 在表格中的下標 3.insertCell(index)：表示在行中的index位置，插入一個新單元格， 返回新產生的單元格對象 4.deleteCell(index):表示刪除本行中的第index個單元格
【單元格對象中的屬性和方法】
1.cellIndex屬性：返回當前單元格在本行中的下標 2.innerHTML innerText 等