原生js总结(干货)

2018-02-23 21:13:32来源:cnblogs.com作者:Paradise_追逐者人点击

分享

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  可以实现到当前被触发元素为止,不再向上冒泡

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台