javascript學習筆記全記錄

 

 

 

js的初步瞭解

    1.就是用來修改樣式的,修改的是行內樣式。任何樣式都可以修改。

    2.css裏面怎麼寫js就怎麼寫。

    3.任何元素都能加事件；事件都要小寫

js的三大組成部分：

1.ECMAScript——核心解釋器，把js代碼轉換成計算機能夠讀懂的語言

2.DOM——Document  object model 文檔對象模型

          增刪改查文檔節點

3.BOM——browser object model 瀏覽器對象模型

          徹底不兼容

---

特別的問題：

 0、document.ready和document.load有什麼區別？

      document.ready比onload要快，要先加載

          頁面加載完成有兩種事件，一是ready，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件），二是onload，指示頁面包含圖片等文件在內的全部元素都加載完成。

 

 1.調用一個函數老是返回一個值，若是沒有指定這個值則返回undefined;

 2.對象引用問題（Date,json,arr）

    var arr = [1,2];

var arr2 = arr;

arr2.push(5);

document.write(arr+'<br />');//[1,2,5]

document.write(arr2);//[1,2,5]

---

js的數據類型：

     數字類型（number）,字符串（string）,布爾值（booleans），未定義（undefined），對象（object）

     基本數據類型：數字類型（number）,字符串（string）,布爾值（booleans），未定義（undefined）

     複合數據類型：對象（object）

---

數據類型轉化：

     1.強制數據類型轉化

          轉整數：parseInt();

          轉小數：parseFloat();

          弱轉化：number();//嚴格轉化

     2.隱式數據類型轉化

          +：字符串拼接==》12+'5'='125';

          -*/%:字符串轉數字==》'12'-5=7;

          ++:字符串轉NaN==》var i='12';i++;typeOf(i)=='number';     

---

函數：有返回值，返回值，返回值

函數返回值：

     1.函數沒有返回值，返回undefined

     2.函數有return，可是沒有值，返回undefined;

     3.return後面的代碼不執行

     還有一個特殊的是 "函數function(){}"

          1.函數分定義階段和調用階段

          2.在哪裏定義不重要，重要的是在哪裏調用

          *3.只要函數名能出現的地方，均可以放函數自己

函數傳參：

     函數不設置參數接收的話能夠調取arguments[i]獲取到參數

--------------

字符串：

     字符串定義： var i=0;

                var str='abc';

     *字符串拼接：

        var name = 'leo';

    var age = 19;

    var hobby = '妹子';

    var you = '你';

    var str = you+'是帥氣的'+name+'，今年'+age+'歲，性別男，愛好'+hobby;

---

操做樣式的2種方法：

    .     方便靈活

   []能使用變量參數，點能作的它均可以作

---

循環：操做一組元素的時候使用

     ①條件循環

     while(i<5){

          執行語句；

          i++;

     }

當i不知足條件的時候的，循環自動終止；

     ②固定次數循環

     //循環5次

     for(var i=0;i<5;i++){

          執行語句；

     }

 

for循環小知識：

     continue        跳出當次循環

     break           阻斷後面的循環

---

函數的做用域

1.全局變量=公用衛生間

2.局部變量=次臥衛生間

     局部變量 全局沒法使用

     局部聲明變量不加var的話就變成全局變量（不推薦使用）

     window.a=123;

3.閉包=次臥的能夠用本身的衛生間，也能夠用公用衛生間；

 

閉包：變量做用域

 

預解析（從上至下，從左至右）

      一、先把變量聲明 所有提早，賦值不動

     二、函數也有預解析，直接提早

     三、預解析 不會脫離函數做用域，也不會衝出script標籤 最多提到本身標籤的頂部

代碼執行順序 見一個script解析執行一個，執行完了 在執行下一個

 

預解析的時候，函數和變量重名的時候，函數覆蓋變量

執行代碼的時候，有表達式的爲大，會覆蓋掉同名的函數值，最後讀取變量的值；

var a=function(){

     alert(1);

};

function a(){

      alert(2);

}

     a();

預解析的時候a=function a(){alert(2)}

正常執行代碼時候a=function(){alert(1)};覆蓋了上面的值

因此彈1(表達式爲大)

---

if語句和switch語句

     不適用break會致使case穿越，且不會報錯

     switch(條件){

    case 條件可能的取值1:

        執行的語句1;

        break;

    case 條件可能的取值2:

            執行的語句2;

            break;

    default:

        默認的狀況;

    break;

     }

 

     if(判斷條件1){

          判斷條件1成立執行 語句1

     }else if(判斷條件2 ){

          判斷條件2成立執行 語句2

     }else{

          以上判斷條件都不成立的狀況這條語句

     }

     

     if語句的簡寫形式：

          1.

          var a=500;

          if(a==500){

               alert('吃大餐');

          }

          能夠簡寫成：a==500&&alert('吃大餐');

          2.三目運算符

          條件成立不？執行語句1:執行語句2;

---

運算符

算數運算符    +-*/%

賦值運算符    = += -= /= *= %=

比較運算符    <><= >= == === != !==(三等號：數據類型和值都徹底相等的狀況下才是true;)

邏輯運算符    &&  ||  ！取反

運算優先級    ()

---

return

     後面的代碼不執行了

     用函數的返回值代替執行結果

---

定時器：

先開後關

     開啓：setInterval(function(){}||fn,300);有返回值

     清除：clearInterval(定時器名);

     setTimeout(fn,300);

     clearTimeout(定時器名);

定時器的問題：

    1.循環裏面加定時器，定時器裏面用i 的問題

          用閉包解決

    2.定時器函數不能放括號

          不然會undefined;由於函數沒有返回值，返回一個undefined

    3.定時器裏面不能用this  當事件發生的時候先把this存下來，而不是在定時器裏直接用this （定時器裏面的this指向window）;

          在定時器外面：var _this=this;

    例子：

        延遲選項卡

     2.第一次起做用的時候要等一個定時器的時間；解決：封裝成函數，先調用一次

---

日期對象：

     特殊用法：

          var oData=new Data(oData.getTime()時間戳);

          時間戳是毫秒數

          裏面放置時間戳也能夠得到，時間戳轉化得來的時間

     獲取日期對象：

     var oDate=new Date();

     var year=oDate.getFullYear();

     var month=oDate.getMonth()+1;小1

     var day=oDate.getDay();//獲取星期(0，1，2，3，4，5，6)

     var date=oDate.getDate();

     var hour=oDate.getHours();

     var mintues=oDate.getMinutes();

     var seconds=oDate.getSeconds();

     oDate.getTime();獲取時間戳

     設置日期對象：

     var oDate= new Date();

     oDate.setFullYear(2017,0,1);設置：年，月，日

     oDate.setHours(0,0,0,0);設置：時，分，秒，毫秒

     oDate.getTime();

經典案例：獲取到本月最後一天是星期幾？

    var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];

    var oDate=new Date();

    oDate.setMonth(oDate.getMonth()+1);//設置日期到下個月

    oDate.setDate(0);//獲取到上個月的最後一天

    var week=oDate.getDay();

    alert(arr[week]);

---

數組經常使用方法：增，刪，改，查     9

     var arr=[12,5,8];

     arr.push(0);向後添加==》arr=[12,5,8,0];

     arr.unshift(0);向前添加==》arr=[0,12,5,8];

     arr.pop();數組後刪除一位==》arr=[12,5];

     arr.shift();數組前刪除一位==》arr=[5,8];

     arr.join('-');數組鏈接成字符串==》'12-5-8';

     arr.splice('開始位置','幾位','元素');具有‘增刪改’

          for(){}時候須要i--;

          增長：arr.splice(1,0,3);==》arr=[12,3,5,8];

          刪除：arr.splice(1,1);==》arr=[5,8];

          修改：arr.splice(1,1,3);==》arr=[12,3,8];

     arr.reverse;數組反轉==》arr=[8,5,12];

     arr.concat();數組鏈接

     arr.sort(function(n1,n2){

              return n1-n2; 由小到大的排序

              return n2-n1; 由大到小的排序

               n1n2能夠是對象的某個具體屬性值比較

     })

---

字符串經常使用方法：7

     var str='welcome to zhinengshe'

     str.charAt(0);==>w  //查找位置範圍相應字符 

     str.indexOf('e');==>1【UA檢測】

     str.lastIndexOf('e');==>20【判斷文件名】

     找到相對應的元素返回元素位置

     找不到元素的位置返回-1

     str.split(' ');分割成數組==》['welcome','to','zhinengshe'];

     str.substring('開始位置','結束位置'不包含結束位置);截字符串

     str.substring(0,1);==>'w'

     str.substring(0,str.length-1);把最後一個字母去掉

     str.toUpperCase();轉成大寫；

     str.toLowerCase();轉成小寫；

     str.charCodeAt(位置);返回指定位置的字符編碼

     String.fromCharCode(字符編碼);返回對應字符編碼的字符

     str.replace('要更換的'，'更換的');

          注意：字符串的比較 其實就是編碼大小的比較

---

Math的經常使用方法：9

     Math.round();四捨五入

     Math.random();獲取0-1之間的隨機數字，不包含1自己

     Math.floor();向下取整數

     Math.ceil();向上取整；

     Math.max();獲取最大數字

     Math.min();獲取最小數字；

     Math.abs();獲取絕對值；

     Math.sqrt();冪

     Math.pow();開方

---

閉包（匿名函數自執行、封閉空間）變量做用域

    1.命名衝突

        商量

    2.i的問題

for(var i=0;i<arr.length;i++){

      (function(index){

          直接用index代替i

      })(i);

}

        a)循環裏面用事件，事件裏面用i,i變成長度而不是對應的i的值 0 1 2

        b)循環裏面加定時器，定時器裏面用i

    左邊小括號裏面用的是匿名函數的定義，右邊的小括號是函數的調用

    (function(){ })();

---

json={};

    JSON.stringify(json)   -> 普通json變成標準json版字符串

    JSON.parse(str) ->  把字符串變成json

    兼容：IE8+ chrome FF

        後臺返回的是'{}'字符串的json

eval:把字符串變成能夠執行JS代碼，把結果放過去

eval解析json必須加括號;否則會報錯

var str1='({"name":"shiyou","age":20})';

    alert(eval(str1).name); ==>shiyou

    ////////

    var str2='{"name":"shiyou","age":20}';

    //直接eval一個'json'會報錯(Uncaught SyntaxError: Unexpected token :)

    //必須eval 的時候加上小括號

    alert(eval('('+str2+')').age);

 

var json={a:5,b:5,c:5};

delete json.a;能夠移除a和它的值

它值兼容ie9以上的瀏覽器

---

<select></select>

先建立 ，後添加

var opt = new Option('text'，'value');    //建立選項

oS.options.add(opt)                             //添加

oS.options.remove(下表||opt);           //刪除

 

selectedIndex 獲取選中的那個項 下標

oS.options[oS.options.selectedIndex].value/text

 

注意1：<option value="北京">北京</option>必定要加value  

注意2： 事件oS.onchange=function(){};

---

對象引用：

     一、基本數字類型：number,string,undefined,boolean

          賦值就是複製；

          var a = 12;

       var b =a ;

       b=b+2;

       a的值仍是不變

     二、對象引用

          1）賦值不會複製，對象比較不相等，看起來同樣也不行

     var oDate1=new Date();

     var oDate2=new Date();

     oDate1 !==oDate2

     

          2）一個東西改變，另一個東西也跟着改變

          案例1：

          var a = [12,5,8]; //對象

    var b =a;

    b.pop();

    alert(a);

    給b賦值了a對象，a,b同時指向了同一個對象

     當一個改變了，對象就會發生改變；

案例2：

     var oDate = new Date();

    var oDate2 = oDate;

    oDate2.setFullYear(2020);

    alert(oDate)

---

'use strict'嚴格模式

解決的問題

1.變量必須加var

2.不容許 if 裏面定義函數，必須頂層定義

3.嚴格模式幹掉了with

 

嚴格模式特性

1.必須寫use strict 不能是其它單詞 不然不起做用

2.use strict 有做用範圍 只針對當前函數起做用

3.只針對 當前本身 script標籤起做用

4.只針對當前js文件起做用

---

各類表達式：

     1.逗號表達式：優先級特別低用（）括起，讀取後面的

          var a = (12,5);

         alert(a);//5

     ————————

     一樣讀取最後一個，走else

           if(undefined,true,false,32,0){

        alert('ok');

    }else{

        alert('不ok');   

    }

 

     2.||：比較懶，碰到真的就返回

     var a=0||5;

     alert(a);結果5

 

     3.&&：比較勤快，得查完，有一個假就都是假的

---

DOM     增，刪，改，查

oUl.children         獲取UL的子節點         有length的屬性

oUl.children[0]    獲取UL第1個子節點     使用比較多

oUl.children[oUl.children.length-1]    獲取Ul的最後一個子節點    使用比較多

 

oUl.parentNode    獲取Ul的父節點    body,HTML,document

 

oUl.firstElementChild||oUl.firstChild    首個節點（first）    "firstChild 低版本IE6 -8

firstElementChild 高級瀏覽器"

oUl.lastElementChild||oUl.lastChild    最後一個字節點    同上

 

oLi.previousElementSibling||oLi.previousSibling    獲取上一個兄弟節點    相對本身

oLi.nextElementSibling||oLi.nextSibling    獲取下一個兄弟節點    相對本身

 

var oLi=document.createElement('li');    建立一個li的節點    建立賦值添加3個步驟

oLi.innerHTML=''    給它賦值   

oUl.appendChild(oLi);    插入到oUl裏面去（向後插入）經常使用   

oUl.insertBefore(要插的元素,插到哪裏)    插入到某個元素前面去   

 

oUl.removeChild(要移除的元素);    刪除掉某個元素  

 

節點.cloneNode()    克隆某個元素    "cloneNode（true）深度克隆

移除id:節點.removeAttribute('id');"

 

window.onscroll    滾動事件    當鼠標滾動的時候發生

window.onresize    窗口事件    當窗口縮小/放大的時候

 

滾動距離    配合滾動事件

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop

 

獲取可視區寬高

document.documentElement.clientHeight    可視區的高度   

document.documentElement.clientWidth    可視區的寬度   

 

offsetHeight(佔位物體)（live事件）    物體盒模型高度    border+padding+height

offsetWidth(佔位物體)（live事件）    物體盒模型寬度    border+padding+width

 

offsetparent    定位父級    若是沒有定位父級則是body

parentNode      結構父級

 

offsetTop(佔位物體)    物體盒模型最外邊距離定位父級的top值    若是沒有定位父級則是相對body

offsetLeft(佔位物體)    物體盒模型最外邊距離定位父級的left值    若是沒有定位父級則是相對body

 

getAttribute('屬性')    獲取行間自定義屬性   

setAttribute('屬性'，'屬性值');    設置行間屬性值    對應使用

removeAttribute('屬性')    移除屬性    

---

form 表單

     關於表單

    提交數據

    action  提交的地址 數據提交到哪裏

    method    提交方式

     get    默認表單的提交方式  ?user=leo&age=19

                get的方式數據在url裏面 明文串  不安全

                比較小      32k

 

            post    數據量        1G    不在url傳輸    相對安全

 

     name    名字    必須加name

 

post與get 區別

get            數據量小  方便    利於分享     不安全

post        數據量大  無法分享    相對安全

更安全的方式

https  相對安全

cache 緩存

---

冒泡機制

     特性

    1.冒泡無論 父級有沒有事件 都會冒泡

    2.冒泡跟css無關  跟元素位置無關 ——》parentNode

 

    子級元素 一層一層將事件 往父級和父級的父級和父級的父級的父級和...一直到頭

    取消冒泡，誰觸發的冒泡，在哪裏取消

    ev.cancelBubble = true;

    cancel：取消

    Bubble：冒泡

    何時出問題何時用，沒事別瞎瞎取消

    通常狀況下，咱們碰不到冒泡的狀況， 等碰到了在想着去取消；

---

this的問題：

     this有問題的狀況

1.attachEvent 事件綁定的時候，(addEventListener沒有this問題 onclick方式也沒問題)

2.定時器中用this(this指向window)

3.行間事件中用函數 函數裏面用this

4. 函數嵌套調用this

---

ev||event事件：

var oEvent=ev||event;  事件兼容的寫法ev 是FF用，event是chrome和IE用

 

頁面座標

oEvent.clientX    鼠標在可視區中距離body左邊的距離（當有滾動距離的時候須要加上）

oEvent.clientY    鼠標在可視區中距離body上邊的距離（當有滾動距離的時候須要加上）

ev.pageX不兼容ie678

ev.pageX=ev.clientX+scrollLeft;

ev.pageY=ev.clientY+scrollTop;

 

oEvent.cancelBubble=true;    取消事件冒泡爲真

 

oEvent.keyCode    鍵值（經過判斷鍵值，能夠有些操做）

 

onkeydown    當鍵盤按下的時候（例子：鍵盤控制div行走）

onkeyup    當鍵盤擡起的時候

down和up的問題    輸入框輸入的內容是onkeyup的時候進去的

 

oEvent.ctrlKey&shiftKey&altKey    布爾值,判斷ctrl時候有

 

document.oncontextmenu    右鍵事件（若是阻止右鍵事件，能夠自定義右鍵事件）

 

return false；    阻止瀏覽器的默認事件的發生

 

oEvent.preventDefault();    addEventListener的狀況下阻止默認事件發生

事件監聽：能讓一個obj上面能綁定多個事件   

obj.addEventListener('事件'，'函數'，false);

①標準瀏覽器中使用

②事件前面不須要加on

③函數能夠放有名字的函數，也能夠放匿名的函數

④false 是冒泡階段綁定事件，默認也是冒泡綁定

⑤函數裏面不能用return false 來阻止瀏覽器默認事件的發生，改成用

    oEvent.preventDefault();

 

obj.attachEvent('事件'，'函數')

①低版本瀏覽器中使用

②事件前面要加on

③IE瀏覽器只支持冒泡，因此沒有false和true的說法

④函數裏面用this會失效

 

obj.removeEventListener('事件'，'函數'，false);    標準瀏覽器的刪除事件的寫法

obj.detachEvent('事件'，'函數');    IE6-8移除綁定事件的寫法

 

addEvent(obj,sEv,fn);    封裝好的事件綁定函數

removeEvent(obj,sEv,fn);    移除綁定事件的封裝函數

 

oEvent.detail    "火狐下存儲滾輪方向信息，當它爲正值，滾輪是向下的，爲負值的時候滾輪是向上的"

oEvent.wheelDelta(得了她)    "IE&chrome下存儲滾輪方向信息的，當它爲正值的時候,滾輪向上，爲負值的時候滾輪向下"

 

事件委託:給父級加事件 ，而後尋找事件發生源  

oEvent.srcElement （chrome、IE）    誰觸發了這個事件的元素(觸發事件的源元素)

oEvent.target （Firefox）    同上，觸發事件的源元素

兼容寫法： var oSrc=oEvent.srcElement||oEvent.target;   

oSrc這個變量就是觸發事件的源元素的兼容版   

 

判斷標籤名

oSrc.tagName  觸發事件的事件源的標籤名 所有大寫

oSrc.tagName == 'INPUT'&&oSrc.value

 

onmouseover和onmoverout的問題

oEvent.fromElement（chrome、IE）    從哪裏移動進來的元素

oEvent.relatedTarget（FF）    火狐的寫法仍是同樣的

 

oEvent.toElement（chrome、IE）    從哪裏移出去的元素

oEvent.relatedTarget（FF）    火狐的寫法仍是同樣的

兼容寫法：

      var oFrom=oEvent.fromElement||oEvent.relatedTarget;

     var oTo=oEvent.toElement||oEvent.relatedTarget;  

判斷 oDiv 是否包含了 oForm

if(oDiv.contains(oForm)){return}

---

cookie 保存數據     

cookie 設置  查看cookie  F12->resource  ->cookies

     特色：

          一、不能跨域

                    同一個域名下全部文件共享cookie

                    不一樣域名之間——不共享

          二、容量下4k

          三、不安全（隱私數據別存cookie）

          四、有有效期

                    默認是 session  瀏覽器 退出 會話結束

                    也能夠爲cookie設置日期，不過某些瀏覽器仍是會選擇性刪除的

                    *數據超出有效期，就會刪除

 cookie的設置

      function setCookie(name,value,data){

    var oDate =new Date();

    oDate.setDate(oDate.getDate()+data);

    document.cookie=name+'='+value+';expires='+oDate;

} 

cookie的獲取

function getCookie(name){

    var arr=document.cookie.split('; ');

    for(var i=0;i<arr.length;i++){

        if(name==arr[i].split('=')[0]){

            return arr[i].split('=')[1];

        }

    }

    return '';//爲了和上面return的數據類型的一致性

}

cookie的移除：設置日期過時就自動清除

function removeCookie(name){

    setCookie(name,0,-1);

}

---

經常使用事件：

 

 

onclick	點擊事件
onmouseover onmouseout	當鼠標移入事件 當鼠標移除事件
onmouseenter     onmouseleave	當鼠標移入事件（已作了冒泡阻止） 當鼠標移除事件（已作了冒泡阻止）瀏覽器有時會發神經的不支持
onmousedown onmousemove onmouseup	鼠標按下事件     鼠標按下並移動時觸發     當鼠標按下並擡起的時候觸發
onfocus onblur	聚焦的時候觸發obj.focus();這個方法能夠觸發onfocus事件裏的邏輯發生失去焦掉的時候觸發
onload onerror	當加載完成後發生（圖片）     加載失敗時候觸發（圖片）
onkeydown     onkeyup	鍵盤按下的時候觸發 鍵盤擡起的時候觸發
oncontextmenu	右鍵事件（環境上下文事件）
onchange	select的選擇事件
onresize	窗口大小更改事件
onscroll	滾動條滾動事件
onsubmit	表單提交事件
oninput   onpropertychange	在input的值發生改變的時候觸發，IE9不兼容 同oninput的事件意思幾乎相同，只是在IE下使用，不兼容IE9故而放棄
DOMContentLoaded     onreadystatechange 還要判斷document.readyState==complete	FF chrome 高級瀏覽（統稱：ready事件）只能事件綁定addEventListener       IE6-IE8（統稱：ready事件）只能事件綁定attachEvent()
onmousewheel  DOMMouseScroll	chrome IE  滾動事件     （Firefox）當滾輪滾動的事件