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 = dataParts.join('&');request.open('POST', whichform.getAttribute("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]);

  

转载于:https://www.cnblogs.com/floraCnblogs/p/js-dom-methods.html

JavaScript DOM 编程艺术 公用方法相关推荐

  1. 初读JavaScript DOM编程艺术(一)

    JavaScript DOM编程艺术--前三章概念总结 一. 概述 1.什么是JavaScript 2.什么是DOM 二. JavaScript 语法 1. 语句和注释 2. 变量和数组 三. DOM ...

  2. JavaScript DOM编程艺术学习笔记(一)

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

  3. JavaScript DOM编程艺术第一章:JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  4. 重读《JavaScript DOM编程艺术》(第一版)

    今天来了雅兴去图书馆看书.把<JavaScript DOM编程艺术>温习了一遍,平时写js的机会不是特别多,很多知识都有些模糊了. 伴随着身边键盘卡啦卡啦的声音,一位手速不是一般的快的程序 ...

  5. 《JavaScript DOM 编程艺术》读书笔记

    <JavaScript DOM 编程艺术>读书笔记--其一 第二章 1.Javascript代码编写方式: (1)将JavaScript代码放在文档<head>标签中的< ...

  6. JavaScript DOM编程艺术(第二版)

    JavaScript DOM编程艺术简要介绍 第二章: JavaScript语法 语法 语句 注释 变量 数据类型 数组 对象 操作 条件语句 比较操作符 逻辑操作符 循环语句 while循环 for ...

  7. JavaScript DOM 编程艺术 (第二版)学习之5-6章

    JavaScript DOM 编程艺术 (第二版)学习之5-6章 第五章 最佳实践 5.1 过去的错误 5.2 平稳退化 5.2.1 "javascript:"伪协议 5.2.2 ...

  8. JavaScript DOM 编程艺术 (第二版)学习之3-4章

    JavaScript DOM 编程艺术 (第二版)学习之3-4章 第三章 DOM 3.1 文档:DOM中的"D" 3.2 对象:DOM中的"O" 3.3 模型: ...

  9. JavaScript DOM编程艺术简略笔记

    简略目录 1.BOM 2.DHTML 3.数组 4.条件判断的注意点 5.函数中变量的作用域问题 6.几种对象的简介 7.BOM和DOM 8.DOM操作中的一些特别点 9.JS文件与CSS文件的引入方 ...

最新文章

  1. 【camera】基于深度学习的车牌检测与识别系统实现(课程设计)
  2. C#语法基础之第三节
  3. Node中使用mysql模块遇到的问题
  4. ios14的蓝牙弹窗_iOS14来了,总结一下给你带来了哪些最实用的功能
  5. 第六章 参数估计(续)
  6. React 学习之路 (五)事件处理
  7. 抛开 Android 不谈,谁是最受欢迎的 Linux 发行版?
  8. Wampserver_开启CURL
  9. python day33
  10. jar的MANIFEST.MF配置了Class-Path, java -classpath设置无效
  11. mysql 5.7 emoji_MYSQL5.7.25升级兼容微信emoji实操
  12. 安卓软件汉化教程附带汉化工具Android Res Edit V1.5
  13. python 时间序列异常值_干货 :时间序列异常检测
  14. Unity实现鼠标控制摄像机围绕中心点的旋转和缩放
  15. 802.11--802.11n协议 PHY
  16. CSAPP-Lab03 Attack Lab 详细解析
  17. 使用cmd命令行查看Windows系统激活信息
  18. html打开lync客户端,Lync 2013与Exchange 2013--客户端发现响应内容类型为“text/html ”,但应为“text/xml”...
  19. java鬼吹灯搬山法杖_倒斗四大门派卸岭、搬山、摸金、发丘,《鬼吹灯》为何不讲发丘...
  20. IP更新、释放、清除DNS的详细操作方法

热门文章

  1. github pages帮助如何创建个人博客
  2. 2015第16周四自控力
  3. 解决SQLServer事物日志过大的方法
  4. 纯Javascript实现Windows 8 Metro风格实现
  5. 用HTML,CSS和JavaScript创建iPhone/iPad应用程序
  6. java write 去bom_Java处理UTF-8带BOM的文本的读写
  7. java高级之注解详解
  8. 【系统架构设计师】软考高级职称,一次通过,倾尽所有,看完这篇就够了,论软件架构设计的重要性、本篇论文“未通过考试”,供分析参考
  9. Mac终端编c语言,【新手提问】有知道用mac终端编c语言的网络编程的人吗?
  10. 学习笔记--asp.net主题和外观(转自msdn,仅为自己学习存储和有意读者使用)