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类

　　　　}

巴特西

javascript的一些有用函数记录，不断更新。。。

最新文章

热门文章