1. addLoadEvent解决window.onload=fn在页面加载执行一次,addLoadEvent(fn)可以直接绑定多个函数在加载后执行
1 function addLoadEvent(fn) { 2 var oldLoad = window.onload; //把之前window.onload调用的函数保存起来 3 if( typeof window.onload != "function") { //如果window.onload还未指向function 4 window.onload = fn ; 5 } else { 6 window.onload = function() { // 7 oldLoad(); 8 fn(); 9 } 10 } 11 }
2.getElementsByClassName ,HTML5新增了此方法,使用这个方法可以带多个类名,如getElementsByClassName(" sale active ") 顺序不重要,为了使用老浏览器
1 function getElementsByClassName(node,className) { 2 if(node.getElementsByClassName) { 3 //使用h5现有方法 4 return node.getElementsByClassName(className); 5 } else { 6 var result = new Array(); 7 var elems = node.getElementsByTagName("*"); 8 for( var i=0; i<elems.length; i++) { 9 if(elems[i].className.indexOf(className) != -1) { 10 result[result.length] = elems[i]; // 或result.push(elems[i]); 11 } 12 } 13 return result; 14 } 15 }
3.getStyle(obj,attr)获取对象属性
1 function getStyle(obj,attr){ 2 if(obj.currentStyle){ 3 return obj.currentStyle[attr]; 4 } 5 else{ 6 return getComputedStyle(obj,false)[attr]; 7 } 8 }
4.css(obj,attr,valve),上面的增强版,获取和设置一个对象的CSS属性
1 function css(obj, attr, value) 2 { 3 switch (arguments.length) 4 { 5 case 2: 6 if(typeof arguments[1] == "object") //2个参数,第一个参数为obj,第二个参数为json(对象)格式{attr:value,attr2:value} 7 { 8 for (var i in attr) i == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + attr[i] + ")", obj.style[i] = attr[i] / 100) : obj.style[i] = attr[i]; 9 } 10 else //否则,2个参数一般为获取obj.attr值 11 { 12 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr] 13 } 14 break; 15 case 3: //3个参数为直接设置属性 obj.style[attr] = value 16 attr == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + value + ")", obj.style[attr] = value / 100) : obj.style[attr] = value; 17 break; 18 } 19 };
5. insertAfter,DOM有insertBefore方法,没有 insertAfter方法。我们完全可以利用已有DOM方法和属性编写一个insertAfter()函数
1 function insertAfter(newElement, targetElement) { 2 var parent = targetElement.parentNode ; 3 // 如果父元素最后的子节点就是 目标节点 , 则直接追加到父元素后面 4 if( parent.lastChild == targetElement ) { 5 parent.appendChild(newElement); 6 } else { 7 //否则将新元素插入到目标元素的下一个元素之前 8 parent.insertBefore(newElement,targetElement.nextSibling); 9 } 10 }
6.借助call或apply用其它对象的方法来操作某个函数,
1 function bind(obj,fn) { 2 return function(){ 3 fn.apply(obj,arguments); //相当于obj.fn 4 } 5 }
7.万能运动方法
1 function startMove(obj,json,endFn){ 2 3 clearInterval(obj.timer); 4 5 obj.timer = setInterval(function(){ 6 7 var bBtn = true; 8 9 for(var attr in json){ 10 11 var iCur = 0; 12 13 if(attr == ‘opacity‘){ 14 if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){ 15 iCur = Math.round(parseFloat(getStyle(obj,attr))*100); 16 17 } 18 else{ 19 iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100; 20 } 21 } 22 else{ 23 iCur = parseInt(getStyle(obj,attr)) || 0; 24 } 25 26 var iSpeed = (json[attr] - iCur)/8; 27 iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); 28 if(iCur!=json[attr]){ 29 bBtn = false; 30 } 31 32 if(attr == ‘opacity‘){ 33 obj.style.filter = ‘alpha(opacity=‘ +(iCur + iSpeed)+ ‘)‘; 34 obj.style.opacity = (iCur + iSpeed)/100; 35 36 } 37 else{ 38 obj.style[attr] = iCur + iSpeed + ‘px‘; 39 } 40 41 42 } 43 44 if(bBtn){ 45 clearInterval(obj.timer); 46 47 if(endFn){ 48 endFn.call(obj); 49 } 50 } 51 52 },30); 53 54 }
原文:http://www.cnblogs.com/yijinc/p/5293885.html