位置大小
// getBoundingClientRect返回一个对象，包含top,left,right,bottom,width,height // width、height 元素自身宽高 // top 元素上外边界距窗口最上面的距离 // right 元素右外边界距窗口最上面的距离 // bottom 元素下外边界距窗口最上面的距离 // left 元素左外边界距窗口最上面的距离 // width 元素自身宽(包含border,padding) // height 元素自身高(包含border,padding) // 元素在页面上的偏移量 var rect = el.getBoundingClientRect() return { top: rect.top + document.body.scrollTop, left: rect.left + document.body.scrollLeft } // 元素自身宽(包含border,padding) el.offsetWidth // 元素自身高(包含border,padding) el.offsetHeight // 元素的左外边框至包含元素的左内边框之间的像素距离 el.offsetLeft // 元素的上外边框至包含元素的上内边框之间的像素距离 el.offsetTop //通常认为 <html> 元素是在 Web 浏览器的视口中滚动的元素（IE6 之前版本运行在混杂模式下时是 <body> 元素） //因此，带有垂直滚动条的页面总高度就是 document.documentElement.scrollHeight // 在没有滚动条的情况下，元素内容的总高度 scrollHeight // 在没有滚动条的情况下，元素内容的总宽度 scrollWidth // 被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置 scrollLeft // 被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置 scrollTop
// 视口大小
// ie9+ var pageWidth = window.innerWidth, pageHeight = window.innerHeight; if (typeof pageWidth != "number"){ // ie8 if (document.compatMode == "CSS1Compat"){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { // ie6混杂模式 pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } }
事件
// 绑定事件
// ie9+ el.addEventListener(eventName, handler , Booleans); // Booleans默认false(事件在冒泡阶段执行),true(事件在捕获阶段执行) // ie8 el.attachEvent('on' + eventName, function(){ handler.call(el); });
// 移除事件
// ie9+ el.removeEventListener(eventName, handler); // ie8 el.detachEvent('on' + eventName, handler);
// 事件触发
if (document.createEvent) { // ie9+ var event = document.createEvent('HTMLEvents'); event.initEvent('change', true, false); el.dispatchEvent(event); } else { // ie8 el.fireEvent('onchange'); }
// event对象
var event = window.event||event;
// 事件的目标节点
var target = event.target || event.srcElement;
// 事件代理
ul.addEventListener('click', function(event) { if (event.target.tagName.toLowerCase() === 'li') { console.log(event.target.innerHTML) } });
DOM加载完毕
function ready(fn) { if (document.readyState != 'loading'){ // ie9+ document.addEventListener('DOMContentLoaded', fn); } else { // ie8 document.attachEvent('onreadystatechange', function() { if (document.readyState != 'loading'){ fn(); } }); } }
绑定上下文
// ie8 fn.apply(context, arguments); // ie9+ fn.bind(context);
去除空格
// ie8 string.replace(/^\s+|\s+$/g, ''); // ie9+ string.trim();
ajax
// GET var request = new XMLHttpRequest(); request.open('GET', 'user.php?fname=Bill&lname=Gates', true); // false（同步） request.send(); // ie8 request.onreadystatechange = function() { if (this.readyState === 4) { if (this.status >= 200 && this.status < 400) { // Success! var data = JSON.parse(this.responseText); } else { // 错误 } } }; // ie9+ request.onload = function() { if (request.status >= 200 && request.status < 400) { // Success! var data = JSON.parse(request.responseText); } else { // 服务器返回出错 } }; request.onerror = function() { // 连接错误 }; // POST var request = new XMLHttpRequest(); request.open('POST', 'user.php', true); // false（同步） request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); request.send(dataString);
JSON处理
JSON.parse(string); JSON.String(Object)
节点遍历
function forEach( nodeList, callback ) { if(Array.prototype.forEach){ // ie9+ Array.prototype.forEach.call( nodeList, callback ); }else { // ie8 for (var i = 0; i < nodeList.length; i++){ callback(nodeList[i], i); } } } forEach(document.querySelectorAll(selector),function(el, i){ })
转载自：http://mp.weixin.qq.com/s/RqTnRZ9bpmJpxrGiv9KUsw
