javascript通用代码合集
1.逐一绑定操作到window.onload上
//func:新函数 function addLoadEvent(func){ //把现有的window.onload事件处理函数的值存入变量oldonload var oldload = window.onload; //如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它 if(typeof oldload !== 'function'){ window.onload = func; } else { //如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾 window.onload = function(){ oldload(); func(); } } }
2.插入一个元素到另一个元素的后面
虽然dom没有提供直接的方法，但是提供了这一操作的所有“原材料”
//首先，这个函数有两个参数：一个是将被插入的新元素，另一个是目标元素。 function insertAfter(newElement, targetElement){ //把目标元素的parentNode属性值保存到变量parent里 var parent = targetElement.parentNode; //检查目标元素是不是parent的最后一个元素 if(parent.lastChild === targetElement){ //如果是，则追加 parent.appendChild(newElement); } else { //如果不是，则把新元素插入到目标元素和目标元素的下一个兄弟元素之间。 parent.insertBefore(newElement,targetElement.nextSibling); } }
3.获取一个元素的下一个元素（不是节点，节点包括：文本节点，属性节点，元素节点）
//把当前元素的nextSibling节点作为参数传递给getNextElement函数 function getNextElement(node){ if(node.nodeType === 1){ return node; } if(node.nextSibling){ return getNextElement(node.nextSibling); } return null; }
4.为一个元素添加className
//参数一：需要添加新class的元素 //参数二：新的class设置值 function addClass(element,value){ //检查className属性的值是否为null if(element.className === null){ //如果是，把新的class设置值直接赋值给className属性 element.className = value; } else { //如果不是，把一个空格和新的class设置值追加到className属性上去 var newClassName = element.className; newClassName += " "; newClassName += value; element.className = newClassName; } }
5.移动页面元素：前提是元素能够移动，比如postion:absolute，父元素为postion:relative
//移动元素到指定位置 //参数: //elementID 元素ID //final_x 目标位置横坐标 //final_y 目标位置纵坐标 //interval 计时器timeout时长 function moveElement(elementID,final_x,final_y,interval){ if(!document.getElementById) return false; if(!document.getElementById(elementID)) return false; var elem = document.getElementById(elementID); //清除掉元素下所有计时器，重新开始，防止多个计时器混乱 if(elem.movement){ clearTimeout(elem.movement); } var xpos,ypos; //如果属性值为null，设置为0 if(!elem.style.left){ elem.style.left = "0px"; } if(!elem.style.top){ elem.style.top = "0px"; } xpos = parseInt(elem.style.left); ypos = parseInt(elem.style.top); if(xpos == final_x && ypos == final_y){ return true; } /*if(xpos < final_x){ xpos ++; }*/ var dist; if(xpos < final_x){ //实现由快到慢的动画效果 dist = Math.ceil((final_x - xpos)/10); xpos += dist; } /*if(xpos > final_x){ xpos --; }*/ if(xpos > final_x){ dist = Math.ceil((xpos - final_x)/10); xpos -= dist; } /*if(ypos < final_y){ ypos ++; }*/ if(ypos < final_y){ dist = Math.ceil((final_y - ypos)/10); ypos += dist; } /*if(ypos > final_y){ ypos --; }*/ if(ypos > final_y){ dist = Math.ceil((ypos - final_y)/10); ypos -= dist; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")"; elem.movement = setTimeout(repeat,interval); }
6.创建XMLHttpRequest对象
function getHTTPObject(){ //检测浏览器是否存在XMLHttpRequest对象 if(typeof window.XMLHttpRequest === "undefined"){ XMLHttpRequest = function(){ try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");} catch(e){} try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");} catch(e){} try{return new ActiveXObject("Msxml2.XMLHTTP");} catch(e){} return false; } } return new XMLHttpRequest(); }
7.获取一个元素的样式
function getStyle(obj,target){ if(obj.currentStyle){ return obj.currentStyle[target]; } else { return getComputedStyle(obj,null)[target]; } }
8.基于html4+css2的完美运动框架
//获取元素样式 function getStyle(obj,target){ if(obj.currentStyle){ return obj.currentStyle[target]; } else { return getComputedStyle(obj,null)[target]; } } /** obj:要操作的对象 json:格式如下 var json={ width:300, height:300 } fnEnd:回调函数 */ function startMove(obj,json,fnEnd){ if(obj.timer){clearInterval(obj.timer);} obj.timer = setInterval(function(){ var bStop = true; //假设：所有的操作都执行完毕（测试所有属性都设置好的解决方案有很多，这里取其中一种比较巧的方式） for(var v in json){ var attr = v; var iTarget = json[v]; bStop = oper(obj,attr,iTarget,bStop);//执行缓冲运动 } if(bStop){ clearInterval(obj.timer); if(fnEnd){fnEnd();} } },30); } function oper(obj,attr,iTarget,bStop){ var cur = 0; if(attr === 'opacity'){ cur = Math.round(parseFloat(getStyle(obj,'opacity'))*100); } else { cur = parseInt(getStyle(obj,attr)); } var speed = (iTarget-cur)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(cur !== iTarget){ bStop = false; //没达到目标设置为否 if(attr === 'opacity'){ obj.style.opacity = parseFloat((cur + speed)/100); obj.style.filter = 'alpha(opacity:'+(cur + speed)+')'; } else { obj.style[attr] = cur + speed + 'px'; } } return bStop; }
9 获取鼠标位置
function getPos(ev){ var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft; return {x:scrollLeft+ev.clientX,y:scrollTop+ev.clientY}; }
10 添加绑定事件
/*不用加on，例如:onclick写成click即可*/ function myAddEvent(obj,ev,fn){ if(obj.attachEvent){ obj.attachEvent('on'+ev,fn); return; } if(obj.addEventListener){ obj.addEventListener(ev,fn,false); return; } }
11 ajax调用方法
function ajax(url,succFn,failedFn){ //1.创建XMLHttpRequest对象 var oAjax = null; if(window.ActiveXObject){ oAjax = new ActiveXObject('MicrosoftHTTP'); } else { oAjax = new XMLHttpRequest(); } //2.连接服务器 oAjax.open('GET',url,true); //3.发送数据 oAjax.send(); //4.接收数据 oAjax.onreadystatechange = function(){ //解析完毕 if(oAjax.readyState === 4){ if(oAjax.status === 200){//状态码为200 succFn(oAjax.responseText); } else { if(failedFn){ failedFn(oAjax.status);//返回http状态码 } } } } }
11.javascript继承示例
function Drag(id){ var _this = this; this.id = id; this.disX = null; this.disY = null; this.oDiv = document.getElementById(id); this.oDiv.onmousedown = function(ev){ _this.fnDown(ev); return false;//阻止浏览器默认事件 }; }; Drag.prototype.fnDown = function(ev){ var oEvent = ev||event; var _this = this; this.disX=oEvent.clientX-this.oDiv.offsetLeft; this.disY=oEvent.clientY-this.oDiv.offsetTop; document.onmousemove = function(ev){ _this.fnMove(ev); }; document.onmouseup = function(){ _this.fnUp(); }; } Drag.prototype.fnMove = function(ev){ var oEvent = ev||event; this.oDiv.style.left = oEvent.clientX-this.disX + 'px'; this.oDiv.style.top = oEvent.clientY-this.disY + 'px'; } Drag.prototype.fnUp = function(){ document.onmousemove = null; document.onmouseout = null; } function LimitDrag(id){ Drag.call(this,id);//继承属性 } //继承方法 for(var v in Drag.prototype){ LimitDrag.prototype[v] = Drag.prototype[v]; } LimitDrag.prototype.fnMove = function(ev){//重写方法 var oEvent = ev||event; var l = oEvent.clientX-this.disX; var t = oEvent.clientY-this.disY; if(l<0){ l=0; } else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth) { l=document.documentElement.clientWidth-this.oDiv.offsetWidth; } if(t<0){ t=0; } else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight){ t=document.documentElement.clientHeight-this.oDiv.offsetHeight; } this.oDiv.style.left = l + 'px'; this.oDiv.style.top = t + 'px'; }
