JavaScript 新页面和图片懒加载及绑定事件写法

1. 打开新页面
2. 图片懒加载原理
3. jq&js写法对比
4. 元素处理js&jq写法对比

Jquery 打开新页面

    var newWeb=window.open('_blank');
    newWeb.location='新页面的链接地址 eg: this.src';

Jquery 实现图片懒加载原理

• 即img的src替换并检测位于视窗页面后加载

img标签src链接设为预设图片（如空白图片），设置自定义属性（如 data-src=真正的图片地址）,当JS监听该图片进入可视窗口时，将data-src取并赋值到src属性中。达到懒加载的效果。防止页面一次性向发送大量图片请求，导致服务器响应面，页面卡顿崩溃等

jquery与javascript写法对比

//分别绑定事件写法
$('#btn').on('click',function(){    doing...    })
$('#btn').click(function(){    doing...    })
$('#btn').bind('click',function(){    doing...    }) 
//unbind和off会清除解绑之前的事件
$('#btn').unbind('click').bind('click',function(){    doing...    })
$('#btn').addEventListenter('click',function(){    doing...    },false)
$('#btn').attachEvent('click',function(){    doing...    })

document.getElementById('btn').onclick=function(){    doing...    }

//分别元素处理
$('#btn').focus();     //获取焦点 jq一致
$('#btn').html("test");
$('#btn').hide();      // show(),toggle()
$('#btn').val("test"); //表单赋值 
$('#btn').attr("disabled", true);
$('#btn').css('font-size', 20);
$('#btn').attr("checked") == "checked"

$.get("abc.php?a=1&b=2", recall);
$.post("a.php","a=1&b=2", funcName);
function funcName(result) {
    doing...
    //result = eval('(' + result + ')'); //如果返回的是json，则如下处理
}
$.each(arr1, function(i,val){     
     doing...
}); 
var res = arr.forEach(function (item,index,input) {
     input[index] = item*10;
})
document.getElementById('btn').style.fontSize=size;
document.getElementById('btn').innerHTML = "test"; 
document.getElementById('btn').style.display = "none"; 
document.getElementById('btn').value = "test"; 
document.getElementById('btn').disabled = true; 
for(var i=0;i<len;i++){
    doing...
}
var res = arr.forEach(function (item,index,input) {
     input[index] = item*10;
})