首页 > 代码库 > JavaScript DOM 编程艺术 公用方法
JavaScript DOM 编程艺术 公用方法
1. load方法
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != ‘function‘) { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } }
2. 移上高亮
function highlightRows() { if(!document.getElementsByTagName) return false; var rows = document.getElementsByTagName("tr"); for (var i=0; i<rows.length; i++) { rows[i].onmouseover = function() { this.style.fontWeight = "bold"; } rows[i].onmouseout = function() { this.style.fontWeight = "normal"; } } } addLoadEvent(highlightRows);
3. table,单和偶
function stripeTables() { if (!document.getElementsByTagName) return false; var tables = document.getElementsByTagName("table"); for (var i=0; i<tables.length; i++) { var odd = false; var rows = tables[i].getElementsByTagName("tr"); for (var j=0; j<rows.length; j++) { if (odd == true) { addClass(rows[j],"odd"); odd = false; } else { odd = true; } } } } function addClass(element,value) { if (!element.className) { element.className = value; } else { newClassName = element.className; newClassName+= " "; newClassName+= value; element.className = newClassName; } }
4. 动画
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); } if (!elem.style.left) { elem.style.left = "0px"; } if (!elem.style.top) { elem.style.top = "0px"; } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (xpos == final_x && ypos == final_y) { return true; } if (xpos < final_x) { var dist = Math.ceil((final_x - xpos)/10); xpos = xpos + dist; } if (xpos > final_x) { var dist = Math.ceil((xpos - final_x)/10); xpos = xpos - dist; } if (ypos < final_y) { var dist = Math.ceil((final_y - ypos)/10); ypos = ypos + dist; } if (ypos > final_y) { var dist = Math.ceil((ypos - final_y)/10); ypos = 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); } function positionMessage() { if (!document.getElementById) return false; if (!document.getElementById("message")) return false; var elem = document.getElementById("message"); elem.style.position = "absolute"; elem.style.left = "50px"; elem.style.top = "100px"; moveElement("message",125,25,20); } addLoadEvent(positionMessage);
5. 插入之前
function insertAfter(newElement,targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement,targetElement.nextSibling); } }
6. 添加样式
function addClass(element,value) { if (!element.className) { element.className = value; } else { newClassName = element.className; newClassName+= " "; newClassName+= value; element.className = newClassName; } }
7. 提交
function getHTTPObject() { if (typeof 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(); } function displayAjaxLoading(element) { while (element.hasChildNodes()) { element.removeChild(element.lastChild); } var content = document.createElement("img"); content.setAttribute("src","images/loading.gif"); content.setAttribute("alt","Loading..."); element.appendChild(content); } function submitFormWithAjax( whichform, thetarget ) { var request = getHTTPObject(); if (!request) { return false; } displayAjaxLoading(thetarget); var dataParts = []; var element; for (var i=0; i<whichform.elements.length; i++) { element = whichform.elements[i]; dataParts[i] = element.name + ‘=‘ + encodeURIComponent(element.value); } var data = http://www.mamicode.com/dataParts.join(‘&‘);"action"), true); request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); request.onreadystatechange = function () { if (request.readyState == 4) { if (request.status == 200 || request.status == 0) { var matches = request.responseText.match(/<article>([\s\S]+)<\/article>/); if (matches.length > 0) { thetarget.innerHTML = matches[1]; } else { thetarget.innerHTML = ‘<p>Oops, there was an error. Sorry.</p>‘; } } else { thetarget.innerHTML = ‘<p>‘ + request.statusText + ‘</p>‘; } } }; request.send(data); return true; }; submitFormWithAjax(this, document.getElementsByTagName(‘article‘)[0]);
JavaScript DOM 编程艺术 公用方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。