zoukankan      html  css  js  c++  java
  • 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;
        }
    }
  • 相关阅读:
    《JavaScript面向对象的编程指南》--读书笔记
    《高性能JavaScript》--读书笔记
    《高性能网站建设指南》--读书笔记
    vertical-align属性探究
    IP地址.md
    Visual Studio Code.md
    ComboBox
    2017 续办上海居住证和积分办理流程
    希腊字母、拉丁字母、Markdown、拼写与读音中英对照表
    Windows Server 2008 添加 IIS 服务
  • 原文地址:https://www.cnblogs.com/jl29233zx/p/5343226.html
Copyright © 2011-2022 走看看