javascript的一些有用函数记录,不断更新。。。
addLoadEvent函数:
众所周知,html文档加载完后会立即执行一个onload函数。但是onload函数只能包含一个被执行的函数,也就是你需要在加载完文档后执行的一个自己的函数。在实际中html加载完成后需要执行很多预先执行的函数,那么怎样才能让html文档加载完后执行很多自己的函数呢?
1. 最简单的方法:回调
window.onload = function(){ function1(); function2(); }
2.另一种解决办法:
function addLoadEvent(func){ var oldonload = window.onload; if(typeof oldonload != 'function'){ window.onload = func(); }else{ window.onload = function(){ oldonload(); func(); } } }
然后再js脚本里执行:
addLoadEvent(function1);
addLoadEvent(function2);
......
它就会在html加载完成后自动的执行window.onload。 其实这个函数和上一个简化版本的功能是一样的。 只不过简化版本需要修改函数内部数据,在需要预加载函数过多的情况下容易写错函数名,造成加载错误。而第二个函数只需要调用函数并传参就可以了。不必动用函数内部造成不必要的错误。
--------------------------------------------------------分割线-------------------------------------------------------------------------
insertAfter函数:
DOM虽然提供了insertBefore函数,用于在已有元素前插入一个新元素,但是DOM没有提供相应的方法在已有元素后插入一个新元素的方法。 所以需要自己编写一个函数,来处理这项工作:
函数如下:
function insertAfter(newElement,targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appentChild(newElement); }else{ parent.insertBefore(newElement,targetElement.nextSibling); } }
这个函数不用过多解释了,一目了然!
--------------------------------------------------------分割线-------------------------------------------------------------------------
用js为html表格设置跨行颜色
function setTablesColor(){ var tables = document.getElementsByTagName("table"); var odd,rows; for(var i = 0; i < tables.length; i++){ odd = false; rows = tables[i].getElementsByTagName("tr"); for(var j = 0; j < rows.length; j++){ if(odd == true){ rows[j].style.backgroundColor = "#ffc"; odd = false; }else{ odd = true; } } } }
这个函数无论页面中有多少个表格,都可以统一进行颜色的跨行设置,而不必通过对每个table元素设置class来设置颜色。特别是表格数据量很大的情况下,用js函数设置省时省力。
--------------------------------------------------------分割线-------------------------------------------------------------------------
接下来这个函数,比较当前链接的URL与当前页面的URL是否相同,如果相同,则给当前链接的a元素添加一个类,css依靠这个类设置了一个背景颜色,使其突出显示。 或者也可以这样,如果当前链接URL和当前页面URL相同,则css用display:none;不显示当前元素。
函数如下:
function highlightPage(){ if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; //nav元素包含在header元素中,先找到header元素 var headers = document.getElementsByTagname('header'); if(headers.length == 0) return false; //再找到nav元素里的a元素 var navs = headers[0].getElementsByTagName('nav'); if(navs.length == 0) return false; //取得导航链接,然后循环它们 var links = navs[0].getElementsByTagName('a'); var linkurl; for(var i=0; i<navs.length; i++){ //要比较当前链接的URL与当前页面的URL。要取得链接的URL,用getAttribute('href') //而要取得当前页面的URL,则可以使用window.location.href //用indexOf方法,查找子字符串在字符串中的位置,如果没有匹配到,则indexOf方法返回-1 linkurl = links[i].getAttribute('href'); if(window.location.href.indexOf(linkurl) != -1){ links[i].className = 'here'; //给每一个链接添加一个here类 } } }