【嘉興東臣php】JS BOM和DOM學習周總結

一.集合

打印數組的兩種方法：

（未知長度）   var list= [2,4,6,8,10];
    for(var i=0;i<list.length;i++){
        console.log(list[i]); 

    }
（超出數組長度，數組值爲undefined）   var list= [2,4,6,8,10];
    for(var i=0;i<1000;i++){
        if(list[i]==undefined)
         break;
         console.log(list[i]);
   }

  var list= [4,6,8,10,123,321,22222];

  var list2=[1,32,23,222,333];    
 倒序排序 console.log(list.sort(function(a,b){return b-a;}));
 升序排序 console.log(list.sort(function(a,b){return a-b;}));

join join()方法將數組中的全部元素轉換成字符串，而後鏈接起來，join()默認是使用「,」做爲分隔符，固然也能夠在方法中指定分隔符

concat鏈接兩個數組 【注意】返回的是合併後的數組

push在數組尾部加入數值，【注意】返回的是字符串的長度

pop刪除數組尾部的一個數  【注意】返回的是刪除的字符串

splice刪除數組中某個位置的數1爲初始位置即元素下標，3爲刪除個數 【注意】返回的是刪除的字符串
console.log(list.splice(1,3));

slice選出某一段的數組 【注意】返回的是選出的的字符串，1爲起始位置即元素下標，4爲末位置但不選出這個下標所表示的數。

數組套字典，字典套數組

   var dic={"name":"傑克",
             "sex":"男",
              "date":[{"dat":"1994","dae":"1996"},
                       {"da":"2000","de":"2002" }]}
              console.log(dic["date"][0]["dae"])

二.節點

每個HTML都有節點，節點就是元素
整個文檔是一個文檔節點
每一個 XML 標籤是一個元素節點
包含在 XML 元素中的文本是文本節點
每個 XML 屬性是一個屬性節點
註釋屬於註釋節點

IE下會自動識別換行，空格等特殊字符。FF,Safri等下不會自動識別，也就是會把換行。空格看成一個子節點。

firstElementChild和firstChild的區別就是會不會識別特殊字符。

若是要找節點裏的某個節點的abc屬性【注意：在這裏換行空格屬於一個節點，簡單理解就是空節點】：document.getElementById("dd").childNodes[3].childNodes[2].getAttribute("abc");

找id爲dd節點裏的第一個節點：   document.getElementById("dd").firstElementChild；
找id爲dd節點裏的最後一個節點：   document.getElementById("dd").lastElementChild；
找id爲wei節點的父節點：               document.getElementById("wei").parentNode;

返回id的全部屬性：document.getElementById("id").attributes【注意】返回值爲數組。
childNodes[i] i就是這個父輩節點裏第i個子節點。 【注意：在這裏換行空格屬於一個節點，簡單理解就是空節點】。
console.log(document.getElementById("dd").childNodes[3].childNodes[4].getAttribute("abc"));

尋找標籤節點的全部屬性

<div class="123" id="wode" abv="356"></div>
<div></div>
<div></div>

 a=document.getElementById("wode").attributes;
       console.log(a.abv)

三.BOM 計時器

<input type="text" id="jishi"value="0" />

   var a=setInterval(loading,100)
        function loading(){
           c=document.getElementById("jishi").value
           c=parseInt(c)+1
          document.getElementById("jishi").value=c    
          if(c==100)
          clearInterval(a)
        }
        
      setTimeout(abd,10000)
     function abd(){
        document.getElementById("jishi").value="加載完成"
     } 

BOM：瀏覽器結構模型
    一、history :.go(-1);
    二、location :.href();
    三、navigator :.appName();
    四、screen：width , height

this對象指的是window或者調用該函數的對象。

四.DOM事件

onclick 點擊事件

onblur  失焦事件
onfocus 聚焦事件
onkeyup 鍵盤釋放事件
onkeydown 鍵盤按下事件
onchange 改變值的失焦事件
onsubmit 表單提交事件
onreset 表單重置事件

onmouseover 鼠標移入事件

onmousemove 鼠標移動事件

兩種事件的不一樣寫法：（還有一種直接寫在標籤裏）
document.getElementById.onclick = function(){
}
document.getElementById.addEventListener ( "click", function(){
});

兩種獲取控件值的方法：
getElementById("") 經過ID獲取 返回的是元素
getElementsByName("") 經過Name獲取 返回的是數組

removeEventListener 移除一個事件

addEventListener用法，代替onclick等事件
 <button id="btn">提交</button>
 document.getElementById("btn");
      addEventListener("click",function(){alert("漂亮");});

若要移除某個控件的函數，先獲取這個控件節點，再移除
 <button id="listen">提交</button>
 <button id="remove">提交</button>

    document.getElementById("listen").addEventListener("click",clic);
  function clic(){
         alert("123123123123123123123");
   }
 document.getElementById("remove").addEventListener("click",function(){
        document.getElementById("listen").
        removeEventListener("click",clic);
   });

表單：

【注意】：若是須要提交表單的話，要加入屬性name，否則後臺接受不到。

<form> 用於提交表單內輸入的信息。
 action: URL地址
method：GET  POST（POST通常用於傳輸數據，GET通常用於跳轉頁面 ）
GET：
  URL爲明文 也就是顯示在地址欄裏
  相對不安全
  長度是有必定的限制的。
    
POST：
  URL爲密文
  相對安全
  長度相對沒有限制
  name：
  enctype：支持文件上傳

五.函數

onclick="return subForm();" return的做用一般爲，要求該按鈕優先執行這個函數。
return false；阻止程序繼續往下執行。

函數有兩種定義寫法：

1.   function abc(){}
   

2. var abc=fiunction(){}
   

【注意】1當出現.同名的函數時，若是調用在後，第二種的函數優先級更高。2.第二種若調用在前，則會找不到該函數。

變量

 1.若是變量沒有用var定義，則該變量爲全局變量，全局變量能夠從函數中被解析出來，可是賦值只能經過函數調用運行後才能產生做用。

2.函數有無形參很關鍵，若是有形參，那麼函數裏面和形參同名的變量將永遠做用不到函數外。

3.JS裏沒有塊做用域，只有函數做用域，全局的變量，在局部是可使用，可是局部的變量，全局不可使用。

4.就近原則。特指在函數做用域內，若是做用域內有被定義，那麼就取做用域內的變量，若是沒有，則去外層找。

5.在JS中，若是多個形參都相同的狀況，打印的時候通常是輸出最後一個參數的值

六.總結

   又是開心的一週結束了。經過兩週的學習我發現時間過的真的好快，感受比平時玩遊戲都要快。這一週的知識點較上一週相比略少，不過知識點雖少，卻都是比較考驗人思惟邏輯的東西。第一週比如在學文科的知識，第二週略偏向於理科方面。本身也很喜歡這樣的學習氛圍。這周知識點整體來講吸取效果仍是不錯的。不會的多問，多去百度，多給本身找問題，多想辦法怎麼解決問題。我想這樣的學習效率才能夠更高。固然本身也有不少的不足之處。好比沒有失眠致使精神有點疲憊等等。不過我相信只要堅持下去，總會有結果的。我相信天道酬勤。