1.获取屏幕可视的大小：
标准浏览器及IE9+ || 低版本浏览器IE8以下 || 低版本混杂模式
window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
jquery : $(window).height()
2.获取滚动条滚动的距离：
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
jquery: $(document).scrollTop()
3.获取元素的尺寸：（左边jquery方法 右边原生方法）
$(o).width() = 0.style.width;
$(o).innerwidth() = o.style.width + o.style.padding;
$(o).outerWidth() = o.style.width + o.style.padding + o.style.border;
4.获取元素的位置：（左边jquery方法 右边原生方法）
$(o).offset.top = getOffsetTop();
原生js的实现方法
var imgs = document.getElementByTagName("img");
function lazyLoad() {
var winHeight = window.innderHeight || document.documentElement.innderHeight || document.body.innderHeight, //可视窗口的高度
scrollTop= window.pageYOffset || document.documentElement.scorllTop || document.body.scrollTop; //滚动条的位置
for(var i=0;i<imgs.length;i++){
var x = winHeight + scrollTop - imgs[i].offsetTop;
if(x>0) {
imgs[i].src = imgs[i].getAttribute("data-url");
}
}
}
setInterval(lazyload,1000); //设置定时器来检查是否进行滚动，然后处理在可视窗口范围内的图片。
setTimeout & setInterval 的区别
setTimeout方法是一个定时程序，运用在延迟一段时间，只执行一次
setInterval方法是表示在一定间隔内重复执行某个操作的程序
用原生js实现一个图片轮播效果
核心基本原理：做一个div,宽高固定，设置overflow:hidden,
在该div里面设置一个ul,每个li里面放着排列的图片，大小就是外层div的宽高
ul的宽度设置为所有图片大小的总和，这样就不会换行，
然后，js里面设置一个定时器setInterval，每个几秒不断修改ul的margin-left,大小就是为一张图片的宽度
效果就是向左滑动了一个图片，每次切换一个图片，就将ul的第一个li copy到ul的最后一位，并删除掉第一个li,这个时候，li已经在可视窗口的外面，用户看不到，然后修改ul的margin-left为零。这样就可以实现无缝首尾切换了
js代码实现：
window.onload = function() {
var speed = 1e3, time = 1e3, it = 0, ul = document.getElementById("items"), list = ul.childNodes, len = list.length, step = 78 / 1e3, tr = null, scroller = function() {
tr = setInterval(function() {
var left = 0;
//动画
for (var i = 0; i <= time; i++) {
setTimeout(function() {
ul.style.left = "-" + left + "px";
left = left + step;
}, i);
}
//执行完之后，将第一个li放到最后去
setTimeout(function() {
var l = document.createElement("LI"), i = document.createElement("IMG"), f = ul.getElementsByTagName("LI");
i.src = f[0].firstChild.src;
l.appendChild(i);
ul.removeChild(f[0]);
ul.appendChild(l);
ul.style.left = "0px";
}, time);
}, speed);
};
for (var i = 0; i < len; i++) {
if (list[i].tagName === "LI") {
it++;
}
}
ul.style.width = it * 78 + "px";
scroller();
ul.onmouseover = function() {
clearInterval(tr);
};
ul.onmouseout = function() {
scroller();
};
};
transition & animation 的区别
1.触发事件不一样，transition需要某个事件触发(点击，鼠标悬停等)。animation不需要事件去触发，文档加载完成之后就可以执行动画。
2.循环次数。transition只执行一次，而animation循环一次或者多次动画
3.变化形态。transition是从0-100%一个递进的变化。而animation可以自定义任何一个时间段内的变化状态样式。
4.结合js。transition可以很好的结合js来实现一个简单的动画。
结论：1.如果要灵活定制多个帧以及循环，就用animation
2.如果只是简单的form to效果，就用tranition
3.如果使用js灵活设定动画属性，用transition
cookie & localStorage & sessionStorage 的区别
cookie是网站为了标识用户身份而存储在用户本地终端上的数据(通常已经加密)
cookie数据始终在同源的http请求中携带（即使不需要），会在服务器与浏览器之间来回传递。
localstorage 和 sessionStorage不会自动把数据发给服务端，仅在本地存储。
存储大小：
cookie的数据大小不能够超过4K，比较小
localstorage 和 sessionStorage虽然也有存储大小限制，但是比cookie大的多，可以达到5M
跨域问题
同源策略：要求域名，协议，端口都要相同
1.jsonp
原理：通过动态创建script,通过script标签引入一个js文件，当这个js文件引入成功后就会执行url参数中指定的函数，并且会把我们需要的json数据作为参数传入
function createJs(sUrl) {
var oScript = document.createElement("script");
oScript.type = "text/javascript";
oScript.src = sUrl;
document.getElementsByTagName('head')[0].appendChild(oScript);
}
createJs('jsonp.js');
// jsonp.js
box({
name:"text"
})
function box(json){
alert(json.name)
}
优点:兼容性好，简单易用，支持浏览器和服务器的双向通信，
缺点：只是支持get请求
2.CORS(跨源资源共享)
服务端对于cors的支持，主要是通过设置Access-Control-Allow-Origin
与原生app(android & iOS)通过js来进行交互
else if(this.device()=='ios'){
window.webkit.messageHandlers.wxPay.postMessage(this.paydata);
}else if(this.device()=='android'){
androidInterface.wxMemberPay(JSON.stringify(this.paydata));
}