JavaScript基礎知識總結

一、  js運算符：

算術運算符

           +  -   *  /  %  ++   --    =      +=       -= 

           加 減 乘 除 模 累加 遞減 等於 等差增長 等差遞減

邏輯運算符

　　　||     &&    !

　　　或   且    非

二、  字符串處理的小方法：

（1）       str.indexOf(‘要查找的字符串’)  從前日後查找字符串位置，大小寫敏感，從0開始計數，返回數字，找不到返回-1。

（2）       str.lastIndexOf(‘要查找的字符串’)  從後往前查找字符串位置，但從前日後計數，一樣返回數字，找不到返回-1。

（3）       str.length  字符串長度

（4）       str.charAt(‘數字’)  返回該數字對應的位置的字符，從0開始計數

（5）       str.substring(start,end)   截取字符串，從start位置開始，到end前的位置結束。返回截出的字符串，包含start位置字符，不包含end位置字符，即左閉右開。start爲必選非負整數，end爲非必選非負整數，不寫end時，指從start位置截到最後。

區分：str.substring()、str.slice()和str.substr()

l  與 slice() 和 substr() 方法不一樣的是，substring() 不接受負的參數。

l  str.slice(start,end)非負數用法和substring()相似，當start爲負數時，如-1，表示從字符串倒數第一個字符開始截取。

l  ECMAscript 沒有對該方法進行標準化，所以反對使用substr()。

（6）       str.split(‘切的方式’)  切割字符串，將字符串用某個字符或串切成數組，即返回數組

（7）       str.toUpperCase()   轉成大寫

（8）       str.toLowerCase()   轉成小寫

三、  數組處理的小方法：

（1）       arr.push(須要添加的東西)  添加到數組後面，返回新數組

（2）       arr.pop()   從數組後面刪除一項，返回新數組

（3）       arr.unshift(須要添加的東西)   添加到數組前面，返回新數組

（4）       arr.shift()    從數組前面刪除一項，返回新數組

（5）       arr.splice(開始位置，刪除的個數，添加元素1，元素2…) 萬能操做：刪除、添加、替換，添加的元素1和2…非必選，返回新數組

（6）       arr.join(‘拼接的方式’)  將數組經過某個字符或串拼接成字符串，即返回字符串

（7）       arr.contact(數組1, 數組2 …)  鏈接數組，返回新數組

（8）       arr.reverse()   反轉，返回新數組

（9）       arr.sort(function(n1, n2){

             return n1 – n2;     // 從小到大排序

})

arr.sort(function(n1, n2){

             return n2 – n1;     // 從大到小排序

})

四、  json對象處理的小方法：

（1）添加或替換一項obj.a = b或obj[a] = b     返回新對象obj = {a:’b’}

（2）刪除一項delete obj.a 或delete obj.b   返回新對象obj

五、  數學小方法：

（1）       Math.floor(x)  向下取整

（2）       Math.ceil(x)  向上取整

（3）       Math.round(x)  四捨五入

（4）       Math.random()  0-1的隨機數

（5）       Math.abs(x)   絕對值

（6）       Math.max(x,y)   最大值

（7）       Math.min(x,y)   最小值

（8）       Math.sqrt(x)   求平方

（9）       Math.pow(數，次方數)   求次方

（10）   Math.PI   π

（11）   Math.sin(角度)  正弦

（12）   Math.cos(角度)  餘弦

（13）   Math.tan(角度)  正切

（14）   Math.asin(弧度)   反正弦

（15）   Math.acos(弧度)  反餘弦

（16）   Math.atan(弧度)  反正切

六、 經常使用的全局函數

（1）eval()   計算 JavaScript 字符串，並把它做爲腳本代碼來執行。使用方法eval('('+str+')')

（2）Number()    把對象的值轉換爲數字。

（3）parseInt()   解析一個字符串並返回一個整數。

（4）parseFloat()    解析一個字符串並返回一個浮點數。

（5）isNaN()    檢查某個值是不是數字。

（6）String()    把對象的值轉換爲字符串。

七、關於時間的小方法：

var oDate = new Date();

獲取：

（1）oDate.getTime()    時間戳 – 從1970年到此刻的毫秒數

（2）oDate.getFullYear()  年

（3）oDate.getMonth()   月 – 從0開始表明1月

（4）oDate.getDate()     日

（5）oDate.getHours()     時

（6）oDate.getMinutes()   分

（7）oDate.getSeconds()   秒

（8）oDate.getDay()      星期  -- 從0開始表明星期日

設置：

（1）oDate.setFullYear(年，月，日)   把時間設置到某年某月某日

（2）oDate.setHours(時，分，秒，毫秒)  把時間設置到某時某分某秒某毫秒

（3）oDate.setDate()    把時間設置到某天。自動進位,若是有那一天，就設置那一天，若是沒有，就自動跑到下一個月或者上一個月

 

八、關於DOM  --  文檔（document）、對象(object)、模型（model）

（1）DOM關係

　　a) 父節點：obj.parentNode

　　b) 子節點：obj.children   -- 獲得一組元素

　　c) 兄節點：obj.previousElementSibling || obj.previousSibling   -- 前者兼容高版本瀏覽器，後者兼容低版本瀏覽器

　　d) 弟節點：obj.nextElementSibling || obj.nextSibling  -- 同上

　　e) 首節點：obj.firstElementChild || obj.firstChild  -- 等同於obj.children[0] -- 同上

　　f) 尾節點：obj.lastElementChild || obj.lastChild  -- 等同於obj.children[obj.children.length - 1]  -- 同上

（2）DOM操做

　　a) 建立：document.createElement('div')

　　b) 添加：父節點.appendChild(子節點)   --  在父節點內部的最後添加

　　　　　　父節點.insertBefore(要添加的元素，某個子節點以前)   -- 向父節點內部的某個子節點以前添加

　　c) 刪除：父節點.removeChild(子節點)

九、關於BOM  -- 瀏覽器（browser）、對象（object）、模型（model）

（1）window.open(地址, 打開方式)

　　打開方式包括：a) _blank   新頁面

　　　　　　　　   b) _self   當前頁面

　　Chrome：攔截 從用戶體驗      FF：阻止      IE：直接打開

　　若是是用戶觸發：直接打開

（2）window.close()

　　Chrome：直接關閉     FF：沒有反應      IE：給個提示框

（3）window.location.href   當前頁面的地址

　　  window.location.search   數據

　　  window.location.hash   錨點

　　  其餘：

　　　　window.location.host   地址

　　　　window.location.hostname   域名

　　　　window.location.pathname   路徑

　　　　window.location.port   端口

　　　　window.location.protocol  協議

（4）window.history.forward()    前進

　　  window.history.back()   後退

　　  window.history.go(數字)   --  1 前進；-1 後退；2前進兩個頁面；-2  後退兩個頁面

十、關於各類距離

（1）滾動條滾動的距離

　　var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;     -- 前者兼容chrome，後者兼容FF和IE

（2）可視區高度

　　var clientH = document.documentElement.clientHeight;  

（3）物體的高度

　　var oH = obj.offsetHeight;

綜上，可獲得物體的top值top = scrollTop + clientH - oH + 'px';

十一、關於事件

（1）事件冒泡

　　觸發子元素的事件，傳遞給父級，若是父級有這個事件，則會觸發，若是沒有繼續傳遞，直到document爲止　　

　　阻止冒泡：
　　　　oEvent.cancelBubble=true;

（2）事件捕獲

（3）事件委託