JavaScript（一）

標籤：常用   局部變數   大寫   abs   str1   載入   字母   ext   拖拽   

一、JavaScript基礎

1.     JavaScript組成

ECMAScript 解譯器、翻譯 幾乎完全相容

DOM：Document Object Model文件物件模型 有相容性問題

BOM：Browser Object Model 瀏覽器物件模型 幾乎完全不相容

2.     變數類型

typeof運算子

typeof x;

number string boolean undefined object function

資料類型轉換：顯式類型轉換(強制類型轉換) 隱式類型轉換

parseInt() parseFloat()

3.     閉包

子函數可以使用父函數中的局部變數

4.     命名規範

匈牙利命名法 類型首碼 首字母大寫

5.     函數傳回值

函數可以沒有return或者return;

一個函數應該只返回一種類型的值

6.     函數傳參

arguments數組是函數的參數數組

7.     取非行間樣式 相容

if(obj.currentStyle){

        console.log(obj.currentStyle[attr]);

}

else{

        console.log(getComputedStyle(obj,false)[attr]);

}

8.     數組

添加

push(元素)從尾部添加 unshift(元素)從頭部添加

刪除

pop()從尾部彈出

shift()從頭部彈出

排序

sort(比較函數) 傳回值大於0會改變2數順序

//從小到大

arr.sort(function(num1,num2){

return num1-num2;

})

 

轉換

concat(數組2)串連2個數組

join(分隔字元)將數群組轉換為字串

split(分隔字元)將字串轉換為數組

splice 插入 刪除 替換

splice(開始位置，要刪除的長度) 刪除

splice(開始位置，0，要插入的元素…) 插入

splice(開始位置，要刪除的長度，要插入的元素…) 替換

9.     input文字框為唯讀不可編輯的方法

方法1：onfocus=this.blur() 當滑鼠放上就離開焦點

<input type="text" name="input1" value="中國" onfocus=this.blur()>   

方法2：readonly

<input type="text" name="input1" value="中國" readonly>   

<input type="text" name="input1" value="中國" readonly="true"> 

方法3：disabled 文字會變成灰色

<input type="text" name="input1" value="中國" disabled="true">

10.   eval(string) 計算其中的字串，並執行其中的js代碼

11.   input文字框中的內容從右至左

方法1：text-align:right

<input style="text-align:right" />

方法2：dir=”rtl”

<input type="text" dir="rtl" />

12.   截取字串

string.slice(start,end)

string.substring(start,stop)

stringObject.substr(start [, length ])

13.   字串的替換

var str = ‘abcadeacf‘;

var str1 = str.replace(‘a‘, ‘o‘);//只替換第一個

alert(str1); 

 

// 列印結果： obcadeacf

 

var str2 = str.replace(/a/g, ‘o‘);//替換所有

alert(str2); 

 

//列印結果： obcodeocf,

二、DOM

1.     DOM節點

nodeType 節點類型 元素1 屬性2 文本3

childNodes子節點 children是children的相容版

parentNode 父節點

offsetParent 最近的顯示指定位置的元素 position是absolute的offsetParent是最近的父的relative的元素

firstChild/firstElementChild 首子節點 有相容性問題 Firefox

lastChild/lastElementChild 尾子節點 有相容性問題

nextSibling/nextElementSibling 兄弟節點

previousSibling/previousElementSibling 有相容性問題

 

childNodes和nodeType結合 //Firefox中空白地方也當作文本節點

if(nodex.childNodes[i].nodeTypw==1){…}

2.     元素屬性操作

第一種：oDiv.style.display=’block’;

第二種：oDiv.style[‘display’]=’block’;

第三種：

               getAttribute(名稱)擷取

               setAttribute(名稱，值)設定

               removeAttribute(名稱)刪除

3.     用className擷取元素

function getByClass(oParent, sClass)

{

  var aEle=oParent.getElementsByTagName(‘*‘);

  var aResult=[];

  var i=0;

  

  for(i=0;i<aEle.length;i++)

  {

    if(aEle[i].className==sClass)

    {

      aResult.push(aEle[i]);

    }

  }

  

  return aResult;

}

 

4.     建立和插入節點

var oLi=document.createElement(‘li‘);//建立

oLi.innerHTML=oTxt.value;

//父.appendChild(newNode);

oUl.appendChild(oLi);//插入

//父.insertBefore(newNode,某子節點)

oUl.insertBefore(oLi,aLi[0]);//在某節點前插入

如果原來沒有子節點，不能insertBefore  可以判斷一下有沒有子節點

       如果父元素沒有子節點則appendChild()，否則insertBefore()

5.     文檔片段

理論上可以提高dom的效能，實際上並不能 只有面試可能會問

window.onload=function(){

      var iStart=new Date().getTime();

      var oBtn=document.getElementById(‘btn1‘);

      var oUl=document.getElementById(‘ul1‘);     

      var oFrag=document.createDocumentFragment();

      var i=0;

      for(i=0;i<i<10000;i++){

        var oLi=document.createElement(‘li‘);

        oFrag.appendChild(oLi);

      }

      oUl.appendChild(oFrag);

      console.log(new Date().getTime()-iStart);

    }

 

三、BOM

1.     開啟網頁

window.open(‘http://www.baidu.com/‘,‘_blank‘);

第二個參數可選，_blank在一個新視窗開啟，_self在當前視窗開啟

window.open(‘about:blank‘);//空白頁

window.open()傳回值是新開啟的頁面

2.     document.write(‘…’)

在網頁上寫…

如果是在文檔載入完後執行，會清空頁面

3.     關閉網頁

 window.close();

chrom可以直接關閉

ie提示是否關閉

Firefox不允許關閉 只能要關閉open出來的網頁

4.     userAgent

alert(window.navigator.userAgent);

當前瀏覽器的版本

5.     location

alert(window.location);//顯示當前路徑

 window.location=‘http://www.baidu.com/‘;//開啟這個網頁

 

6.     尺寸及座標

可視區尺寸

document.documentElement.clientWidth

document.documentElement.clientHeight

滾動距離

document.body.scrollTop

document.documentElement.scrollTop

 距可視區頂部的距離oEvent.clientY

7.     系統對話方塊

 alert(‘…’);//警告框 只能確定

confirm(‘…’);//選擇框 有確定和取消2個選項 返回使用者的選項true/false

prompt(‘…’,’…’);//輸入框 第一個參數是問題，第二個參數是預設值 返回輸入的內容 沒有內容返回null

8.     window對象的常用事件

onload

onscroll//當頁面滾動時

onresize

9.     document的本質是最外面的一層標籤

document.childNodes[0].tagName=html

10.   擷取event對象

var oEvent=ev||event;//為了相容性

11.   取消冒泡

oEvent.cancelBubble=true;

12.   鍵盤按鍵

onkeydown 按鍵按下

onkeyup 按鍵抬起

onpress=onkeydown+onkeyup

onclick=onmousedown+onmouseup

13.   keycode 索引值

document.onkeydown=function(ev){

      var oEvent=ev||event;

      alert(oEvent.keyCode);

    }

 

14.   解決卡頓問題

設定定時器

上下左右設定為布爾變數

onkeydown設定某方向為true if或switch

onkeyup設定所有方向為false

15.   ctrlKey shiftKey altKey

按著ctrl時 ctrlKey為true

16.   右鍵菜單

 document.oncontextmenu=function()

{

}

當點擊右鍵時，…

有傳回值 return false;可以阻止彈出右鍵的菜單

17.   瀏覽器內建的行為都能用return false屏蔽

右鍵菜單

form提交

按鍵輸入input

18.   拖拽

按下的點與div的左上方距離不變

onmousedown 儲存距離

onmousemove 根據距離計算div最新的位置

onmouseup

四、

JavaScript（一）