#阻止i冒泡
// 点击遮罩 关闭弹窗
$('.pop').click(function(e) {
$(".pop").addClass("hide").find(".pop-wrap").addClass("hide")
})
$(".pop-wrap").on("click",function(e){
if (!e) {
var e = window.event;
e.cancelBubble = true;
}
if (e.stopPropagation) {
e.stopPropagation();
}
})
1、 let p = document.querySelectorAll('p');
Array.from(p).forEach(function(i){
alert(i);
});
等于
var domList = document.getElementsByClassName('its');
使用for in 遍历DOMList
var res = [].slice.call(domList);
for(var item in res) {}；
2、自执行函数结构
()(), !function() {}() +function() {}() 三种函数自执行的方式^_^
3、.out{display:inline-block; background:#a0b3d6; margin-top:20px;}
.in1{display:block; height:20px;}
.in2{display:block; line-height:20px;}
使用height的 可能导致 宽度100%显示
外部inline-block
内部 block；
<span class="out">
<span class="in1">height:20px;</span>
</span>
<span class="out">
<span class="in2">line-height:20px;</span>
</span>
4、js获取兼容ie事件element.addEventListener("click",function(e){
var event = e || window.event;
……
event.preventDefault( ); //阻止默认事件},false);
5、卷上去的高度 scrollTop = window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop;
6、 1、onlick -->事件冒泡，重写onlick会覆盖之前属性，没有兼容性问题
ele.onclik =null;//解绑单击事件，将onlick属性设为null即可
2、 addEventListener(event.type, handle, boolean); IE8及以下不支持，属于DOM2级的方法，可添加多个方法不被覆盖
//事件类型没有on，false 表示在事件第三阶段（冒泡）触发，true表示在事件第一阶段（捕获）触发。 如果handle是同一个方法，只执 行 一 次。ele.addEventListener('click',function(){ },false); //解绑事件，参数和绑定一样ele.removeEventListener(event.type, handle,boolean);
3、 attachEvent(event.type, handle ); IE特有，兼容IE8及以下，可添加多个事件处理程序，只支持冒泡阶段
//如果handle是同一个方法，绑定几次执行几次，这点和addEventListener不同,事件类型要加on,例如onclick而不 是 clickele.attachEvent('onclick',function(){ }); //解绑事件，参数和绑定一样ele.detachEvent("onclick",function(){ });
7、计算 滚动高度 window.scrollBy(100, 100);
if (window.pageXOffset !== undefined) { // 所有浏览器，除了 IE9 及更早版本 alert("水平滚动: " + window.pageXOffset
+ ", 垂直滚动: " + window.pageYOffset);
} else { // IE9 及更早版本 alert("水平滚动: " + document.documentElement.scrollLeft
+ ", 垂直滚动: " + document.documentElement.scrollTop);
}
var scroll = document.documentElement.scrollTop || document.body.scrollTop;
var scroll = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
在文档使用了DTD时，document.body.scrollTop的值为0。
此时需要使用document.documentElement.scrollTop来获取滚动条滚过的长度；
在未使用DTD定义文档时，使用document.body.scrollTop获取值。
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if(scrollTop + windowHeight == scrollHeight){
alert("已经到最底部了！");
}
});
8、阻止冒泡 window.event? window.event.cancelBubble = true : e.stopPropagation();
阻止默认事件 if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}
function stopBubble(e) {
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
//阻止浏览器的默认行为
function stopDefault( e ) {
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault )
e.preventDefault();
//IE中阻止函数器默认动作的方式
else
window.event.returnValue = false;
return false;
}
9、事件委托 var out = document.getElementById("out");
if(out.addEventListener){
out.addEventListener("click",function(e){
var e = e||window.event;
//IE没有e.target，有e.srcElement
var target = e.target||e.srcElement;
//判断事件目标是否是td，是的话target即为目标节点td
if(target.tagName.toLowerCase()=="td"){
changeStyle(target);
console.log(target.innerHTML);
}
},false);
}else{
out.attachEvent("onclick",function(e){
var e = e||window.event;
//IE没有e.target，有e.srcElement
var target = e.target||e.srcElement;
//判断事件目标是否是td，是的话target即为目标节点td
if(target.tagName.toLowerCase()=="td"){
changeStyle(target);
console.log(target.innerHTML);
}
});
};
};
function changeStyle(ele){
ele.innerHTML = "已点击"
ele.style.background="#900";
ele.style.color = "#fff"; }
10、对象长度
1.对象的长度不能用.length获取，用js原生的Object.keys可以获取到
var obj = {'name' : 'Tom' , 'sex' : 'male' , 'age' : '14'};
var arr = Object.keys(obj);
console.log(arr); // ['name','sex','age']
console.log(arr.length); //3
2. javascript获取json对象的key名称的两种方法
第一种方法
jsonObj = { Name: ‘richard‘, Value: ‘8‘ }
for (key in jsonObj){
console.log(key);
//add your statement to get key value
}
结果
Name
Value
第二种方法
javascript中，Object具有一个key属性，可以返回json对象的key的数组
（Object has a property keys, returns an Array of keys from that Object）
用法：
Object.keys(jsonObj)
jsonObj = { Name: ‘richard‘, Value: ‘8‘ }
console.log(Object.keys(jsonObj));
结果
[ ‘Name‘, ‘Value‘ ]
11 、变量取值 变量为空或未定义则使用默认值
let c = a !== undefined && a !== null ? a : b;
12、阻止默认事件
$(".pop-wrap").on("click",function(e){
if (!e) {
var e = window.event;
e.cancelBubble = true;
}
if (e.stopPropagation) {
e.stopPropagation();
}
})
