JS脚本收藏(一些实用的函数)

一、共享onload事件

  这个函数的名字是addLoadEvent,它是由Simon Willison 编写的。它只有一个参数:打算在页面加载完毕时执行的函数的名字。

  下面是addLoadEvent函数将要完成的操作。

  ·把现有的window.onload事件处理函数的值存入变量oldonload。

  ·如果在这个处理函数上还没有绑定任何函数,就像平时那样把新函数添加给它。

  ·如果在这个处理函数上已经绑定了一些函数,就把新函数追加到现有指令的末尾。

  下面是addLoadEvent函数的代码清单:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

  这将把那些在页面加载完毕时执行的函数创建为一个队列。当代码变得越来越复杂时,无论打算在页面加载完毕时执行多少个函数,只要多写一条语句就OK啦!

  addLoadEvent(firstFunction);

  addLoadEvent(secondFunction);

  ……

二、在现有的元素后插入一个新元素

  DOM中提供了insertBefore()方法,但是并没有相应的insertAfter()方法。故我们可以自己编写一个

  代码如下:

function insertAfter(newElement,targetElement){
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSubling)
  }
}

  先检查目标元素是不是parent的最后一个子元素。如果是,就直接用appendChild()方法添加新子元素;如果不是,就将新子元素插入到目标元素和目标元素的下一个兄弟元素之间。

三、查找下一个元素节点

  代码如下:

function getNextElement(node){
    if (node.nodeType == 1) {
        return node ;
    }
    if (node.nextSibling) {
        return getNextElement(node.nextSibling);
    }
    return null ;
}

 四、利用JS去更新某个元素的class属性

  直接使用DOM设置或者修改样式并不理想,如果能直接在样式表里修改就更好了。

  当需要给一个元素追加新的class时,可以按照以下步骤操作:

  1、检查className属性的值是否为null;

  2、如果是,把新的class设置值直接赋值给className属性;

  3、如果不是,把一个空格和新的class设置值追加到className属性上去。

  现在我们把以上步骤封装为一个函数addClass。这个函数需要两个参数:第一个是需要添加新class的元素(element),第二个是新的class设置值(value)。

  代码如下:

function addClass(element,value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName+= " ";
        newClassName+= value;
        element.className = newClassName;
    }
}
原文地址:https://www.cnblogs.com/jl29233zx/p/5343226.html