javascript知識碎片

這裏記錄下一些js容易忘的知識

1、乘方和開根號

Math.pow(a,b)      →        a的b次方
Math.sqrt(a)          →       a開方

2、用戶輸入

prompt就是專門用來彈出能夠讓用戶輸入的對話框的，但必須要用一個變量來接受用戶輸入的值
例：

var a = prompt("請輸入內容")

結果：

3、document.write() 文檔打印輸出，直接在文檔中顯示

注意：不是window.write()

4、隱藏樣式的三種方法

display:none;         visibility:hidden;       overflow:hidden;
區別：第一種和第二種的區別在於第一種隱藏不佔位置，第二種隱藏仍佔有位置，第三種則是隱藏超出盒子的部分內容

5、判斷用戶輸入事件（當用戶輸入內容時觸發）

正常瀏覽器支持：oninput
IE678支持的：onpropertychange

6、兩個小循環：while(退出條件){語句} 和 do{語句} while(退出條件) 的區別

區別：後者是至少執行一次而前者則不一定

7、各節點的相互關係

父節點： parentNode  親父親

兄弟節點：nextSibling（ie678認識）    nextElementSibling（其他瀏覽器認識的）      下一個兄弟節點
                 previousSibling（ie678認識）   previousElementSibling（其他瀏覽器認識的）    上一個兄弟節點
兼容寫法：obj.nextElementSibling || obj.nextSibling     
需要注意的是必須要先寫正常瀏覽器後寫ie678

子節點：firstChild（ie678）     firstElementChild（正常瀏覽器）        第一個孩子節點
              lastChild（ie678）     lastElementChild（正常瀏覽器）        最後一個孩子節點
兼容寫法：同上 

孩子節點：childNodes（官方） 選出制定元素的全部孩子節點，包括HTML節點、屬性節點、文本節點
                火狐、谷歌等高級瀏覽器會把換行也看做是子節點
一般情況下我們可以通過nodeType來判斷具體是什麼節點，nodeType = 1 元素節點，nodeType = 2 屬性節點，nodeType = 3 文本節點
               children  選出所有的孩子，只有元素節點，但是ie678會將註釋節點也算爲節點

8、arguments對象

arguments是存儲了函數傳遞過來的實參，JavaScript在創建函數時，會在函數內部創建一個arguments對象實例，arguments對象只有函數開始時纔可用，訪問單個參數的方式與訪問數組元素的方式相同
  例：

 function fn(a,b){
        if(fn.length == arguments.length){
            console.log(a+b);
        }else{
            console.error("對不起，您的參數不匹配，正確的參數個數爲'+ fn.length + '")
        }
    }
    fn(1,2);
    fn(1,2,3);

結果：

arguments.callee 返回的是正在執行的函數，在函數體內使用。在函數遞歸調用時推薦使用arguments.callee代替函數名本身

9、++前置和++後置

a++： 每次自加1，是先運算後自加
++a： 每次自加1，是先自加後運算
例：

var a = 10,b = 20,c = 30;
    ++a;
    a++;
    c = ++a+(++b)+(c++)+a++;
    console.log(c)   //  77

10、isNaN（a）判斷a是不是數字

console.log（isNaN（"12"））   //  true

11、按鈕不可用(disabled屬性)

disabled = “disabled”或 disabled = true

12、轉換爲字符串類型的方法

String(轉換目標）

轉換目標.toString(基數)，基數用於指定轉化爲幾進制

13、獲取相應位置的字符的方法：charAt(字符位置)  返回的是字符串

例：
    

var txt = "abcdefg";
console.log(txt.charAt(5))  // f

14、獲取字符串位置的方法：indexOf("字符")  返回的是數值

indexOf()        返回前面起第一個字符的位置
lastIndexOf()       返回後面起第一個字符的位置(仍是從左邊開始數)
例：

var txt = "abcdefgfh";
console.log(txt.indexOf(“f”))  // 5
console.log(txt.lastIndexOf(“f”))  // 7

15、網址編碼

encodeURIComponent()       函數可把字符串作爲URI組件進行編碼
decodeURIComponent()       函數可把字符串作爲URI組件進行解碼

16、slice()和substr()

兩者都是用來截取字符串的
slice（“起始位置”[結束位置]）      但不包括結束位置,起始位置可以是負數，如果爲負數，則是從右往左開始取
substr(起始位置，[取的個數])          substr(-1) ie678會報錯
兩者區別：substr(0始終會把小的值作爲起始位置，大的值作爲結束位置，例如：substr(6,3)會自動變爲substr(3,6)
                           

17、js常用的訪問css屬性的方法

點語法：box.style.attribute          獲得的屬性帶有單位，且不可以給屬性傳遞參數

利用[]訪問：box.style[attribute]       獲得的屬性不帶單位，可以給屬性傳遞參數

以上兩個只能獲得行內的樣式，但是我們想要獲取內嵌或外鏈式的樣式該怎麼辦？

可以用： obj.currentStyle (ie 和 opera常用)     window.getComputedStyle("元素","僞類") （w3c常用，兩個參數是必須的沒有僞類用null代替）  
注意：獲得的值帶有單位
兼容寫法：

function getStyle(obj,attr){
       if(obj.currentStyle){
           return obj.currentStyle[attr];
       }
       else{
           return window.getComputedStyle(obj,null)[attr];
       }
   }

18、in運算符

in運算符也是一個二元運算符，但是對運算符左右兩邊的操作數要求比較嚴格。in運算符要求第一個（左邊的）操作數必須是字符串類型或者是可以轉化爲字符串類型的其他類型，而第二個（右邊的）操作數必須是數組或對象，只有第一個操作數是第二個操作數的屬性名，纔會返回true,否則則返回false

19、判斷是不是怪異模式的瀏覽器

document.compatMode === "CSS1Compat"    //  CSS1Compat代表已經聲明，非怪異模式

document.compatMode === "BackCompat"    //  BackCompat代表未聲明，是怪異模式

20、防止鼠標拖動選擇文字

清除選種的內容：

window.getSelection ? window.getSelection().removeAllRanges() : document.selsection.empty();

21、阻止冒泡的兼容寫法

if (event && event.stopPropagation){
       event.stopPropagation()    //w3c標準
   }
    else{
       event.cancelBubble = true;   // IE瀏覽器
   }

22、判斷當前選擇對象的兼容寫法

火狐、谷歌等高級瀏覽器：   event.target.id

IE瀏覽器：    event.srcElement.id

兼容寫法： 

var targetId = event.target ? event.target.id : event.srcElement.id

可以利用這個做點擊除模態框自己外的空白處隱藏模態框，其原理就是當點擊對象的targetId不爲模態自身的id時都隱藏盒子

23、獲得用戶鼠標選擇的內容

標準瀏覽器：      window.getSelection()
IE瀏覽器：         document.selection.createRange().text;
兼容寫法：

if (window.getSelection){
      var txt = window.getSelection().toString();   //轉爲字符串
   }
    else{
       var txt = document.selection.createRange().text;  
   }