原生js總結(乾貨)

1.js基本數據類型

number　　string　　boolean　　underfined　　null

 

2.查找文檔中的特定元素

document.getElementById("id");

document.getElementByTagName("div");

document.getElementByClassName("aa");  //有兼容問題

document.getElementByName("username");  //有兼容問題

 

3.定時器

setTimeout(function(){

　　執行代碼

},time); 　　//time爲定時幾秒

 

4.js獲取塊元素寬高

var oDiv = document.getElementById("id");　　//獲取元素id

oDiv.offsetWidth　　　　//offsetWidth = content + padding + border

oDiv.offsetHeight

oDiv.offsetLeft

oDiv.offsettop

oDiv.offsetParent

 

5.事件冒泡與事件捕獲

事件冒泡：從觸發的事件開始，自下而上的觸發事件,默認爲false   　　　　　　　　　　           //　　我 -->爸爸 -->爺爺

事件捕獲：從document到觸發事件的節點，自上而下的觸發事件,第三個參數爲true　　　　　　//　　爺爺-->爸爸-->我

而後，上代碼

 

HTML:

1 <div id="div1">
2       <div id="div2" class="div2">
3 
4       </div>
5     </div>

js:

事件冒泡（結果：div1　　div2）

1 var oDiv1 = document.getElementById("div1");
2     var oDiv2 = document.getElementById("div2");
3     oDiv1.addEventListener("click",function (){
4       alert("div1被觸發");
5     });
6     oDiv2.addEventListener("click",function (){
7       alert("div2被觸發");
8     });

事件捕獲(結果：div2　　div1)

1   var oDiv1 = document.getElementById("div1");
2     var oDiv2 = document.getElementById("div2");
3     oDiv1.addEventListener("click",function (){
4       alert("div1被觸發");
5     });
6     oDiv2.addEventListener("click",function (){
7       alert("div2被觸發");
8     },true);

 

ps:阻止事件冒泡的函數：

　　jq:　　e.stopPropagation　　能夠實現到當前被觸發元素爲止，再也不向上冒泡