实用JavaScript脚本

收集日常实用的JavaScript小脚本

共享load

function addLoadEvent(fun){
   var oldLoad = window.onload;
   if(typeof oldLoad != "function"){
       window.onload = fun;
   }else{
       window.onload = function(){
           oldLoad();
           fun();
       }
   }
}

insertAfter

function insertAfter(newNode,oldNode){
    /*获取父元素*/
    var parent = oldNode.parentNode;
    /*判断oldNode是否为最后一个*/
    if(oldNode == parent.lastChild){
        parent.appendChild(newNode);
    }else{
        parent.insertBefore(newNode,oldNode.nextSibling);
    }
}

删除空白节点

function removeEmpty(node){
    for(var i=0;i<node.length;i++){
    if(node[i].nodeType === 3 && /^\s+$/.test(node[i].nodeValue))
        {
            node[i].parentNode.removeChild(node[i])
        }
    }
    return node;
}

数组去重

function remove(){
   var a = [1,8,5,6,8,7,9,5,2,4,3,1];
    var result = [];
    for(var i=0;i< a.length;i++){
        if(result.indexOf(a[i]) == -1){
            result.push(a[i]);
        }
    }
    alert(result.sort());
}

建立XMLHttpRequest对象

function createNew(){
    if(window.XMLHttpRequest){
        return new XMLHttpRequest();
    }else if(window.ActiveXObject){
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

getELementsByClassName兼容

function getClass(node,className){
    if(node.getElementsByClassName){
        return node.getElementsByClassName(className);
    }else{
        /*获取node下的全部元素节点*/
        var result = [];
        var element = node.getElementsByTagName("*");
        for(var i=0;i<element.length;i++){
             /*判断节点的className属性是否为指定className*/
            if(element[i].className.indexOf(className) != -1){
                result.push(element[i]);
            }
        }
        return result;
    }
}

添加缩略语列表

function addAbbr(){

/*向后兼容*/
if(!document.getElementsByTagName){return false;}
if(!document.createElement){return false;}
if(!document.createTextNode){return false;}

/*遍历文档中的所有abbr标签*/
var abbrs = document.getElementsByTagName("abbr");
var data = [];

/*判断这个文档中是否有缩略语*/
if(abbrs.length < 0){
    return false;
}else{
    for(var i=0;i<abbrs.length;i++){
        /*兼容IE6版本下的IE和其他不支持abbr标签的属性*/
        if(abbrs[i].childNodes.length < 1) continue;

        var title = abbrs[i].getAttribute("title");
        var name = abbrs[i].innerHTML;
        data[name] = title;
    }
}

/*添加HTML文档节点 */
/*建立展示区域*/
var body = document.getElementsByTagName("body")[0];
/*标题*/
var h2 = document.createElement("h2");
var txt = document.createTextNode("定义列表：");
/*建立列表*/
var dl = document.createElement("dl");
/*添加到DOM树*/


/*for-in 循环  遍历数据数组  取出值*/
for(index in data){
    /*获取title*/
    var detail = data[index];
     /*建立dt*/
    var dt = document.createElement("dt");
    var txt1 = document.createTextNode(index);
    dt.appendChild(txt1);
    /*建立dd*/
    var dd = document.createElement("dd");
    var txt2 = document.createTextNode(detail);
    dd.appendChild(txt2);

    /*将这两项添加到dl列表中*/
    dl.appendChild(dt);
    insertAfter(dd,dt);
}

/*浏览器兼容*/
if(dl.childNodes.length < 1) {
    return false;
}else{
    h2.appendChild(txt);
    body.appendChild(h2);
    body.appendChild(dl);
}

添加文献链接

/*默认情况下blockquote标签的cite属性是不会显示的，现在手动在引用字段后面添加引用地址*/
function addLink(){
    /*向后兼容*/
    if(!document.getElementsByTagName) {return false}
    if(!document.createElement) {return false}
    if(!document.createTextNode) {return false}

    /*获取全部blockquote*/
    var quote = document.getElementsByTagName("blockquote");

    /*遍历节点*/
    for(var i=0;i<quote.length;i++){
        if(quote[i].getAttribute("cite")){
            /*获取cite属性*/
            var cite = quote[i].getAttribute("cite");
            /*获取blockquote标签的最后一个有效子节点  去除空白节点*/
            var quoteChild = quote[i].getElementsByTagName("*");
            var elem = quoteChild[quoteChild.length-1];
            /*创建链接*/
            var a = document.createElement("a");
            /*链接标题*/
            var aName = document.createTextNode("source");
            a.appendChild(aName);
            a.setAttribute("href",cite);
            /*创建上标*/
            var sup = document.createElement("sup");
            sup.appendChild(a);
            /*添加到原有子节点之后*/
            elem.appendChild(sup);

        }
    }
}

快捷键清单

function addAccess(){
    /*向后兼容*/
    if(!document.getElementsByTagName || !document.createElement ||!document.createTextNode) return false;

    /*获取文档中的全部链接标签*/
    var link = document.getElementsByTagName("a");
    /*创建一个列表*/
    var ul = document.createElement("ul");
    var h2 = document.createElement("h2");
    var title = document.createTextNode("快捷键清单");
    var body = document.getElementsByTagName("body")[0];
    body.appendChild(ul);
    ul.appendChild(h2);
    h2.appendChild(title);
    /*保存快捷键和页面名称的数组*/
    var result = [];

    for(var i=0;i<link.length;i++){
        /*判断是否有accesskey属性*/
        if(link[i].getAttribute("accesskey")){
            var key = "Alt+"+link[i].getAttribute("accesskey");
            /*获取快捷键跳转的页面名称*/
            var keyName = link[i].innerHTML+":";
            result[keyName] = key;

        }
    }

    /*创建节点*/
    for(name in result){
        /*创建列表项*/
        var li = document.createElement("li");
        /*创建说明*/
        var keyText = document.createTextNode(name+result[name]);
        /*添加内容*/
        li.appendChild(keyText);
        /*添加列表项*/
        ul.appendChild(li);
    }
}

创建网页目录

function addDirectory(){
    /*向后兼容*/
    if(!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;

    /*获取全部h1标签*/
    var h1 = document.getElementsByTagName("h1");
    /*创建目录*/
    var body = document.getElementsByTagName("body")[0];
    var ul = document.createElement("ul");
    var h2 = document.createElement("h2");
    var ulTitle = document.createTextNode("网页目录");
    h2.appendChild(ulTitle);
    ul.appendChild(h2);
    /*获取第一个有效节点   忽略空白*/
    var elem = body.children[0];
    body.insertBefore(ul,elem);

    /*遍历*/
    for(var i=0;i<h1.length;i++){
        /*创建新目录项*/
        var li = document.createElement("li");
        var item = document.createTextNode(h1[i].innerHTML);
        li.appendChild(item);
        ul.appendChild(li);
    }
}

获取紧挨着的元素节点

 /*使用环境：当我们想对一个元素的紧挨着的元素节点设置一些属性时
* 但是浏览器会有空白节点的存在
* 或者这个元素的第一个有效节点是文本节点
* 我们要忽略空白节点和文本节点  直接获取元素节点
* */
function getElement(node){
    /*如果这个节点是元素节点返回*/
    if(node.nodeType == 1){
        return node;
    }
    /*如果这个节点不是元素节点，接着查看下一个节点*/
    if(node.nextSibling) {
        return getElement(node.nextSibling);
    }
    /*如果都不是，返回空*/
    return null;
}

JS实现兼容性斑马线表格

function table(){
    if(!document.getElementsByTagName) return false;
    /*获取tbody*/
    var tbody = document.getElementsByTagName("tbody");
    var odd,rows;
    /*遍历*/
    for(var i=0;i<tbody.length;i++){
        odd = true;
        rows = tbody[i].getElementsByTagName("tr");
        /*遍历每一行*/
        for(var j=0;j<rows.length;j++){
            if(odd == true){
                rows[j].style.backgroundColor = "#e1e1e1";
                odd = false;
            }else{
                odd = true;
            }
        }
    }
}

JS实现表格悬浮高亮

/*表格悬浮高亮显示*/
function highLightTable(){
    if(!document.getElementsByTagName) return false;
    if(!document.getElementsByTagName("tr")) return false;

    /*获取全部的行*/
    var rows = document.getElementsByTagName("tr");
    for(var i=0;i<rows.length;i++){
        /*获取之前的样式  一个对象的属性的作用域是永久存在的
        * 所以oldClass不能使用变量存储
        * */
        rows[i].oldClass = rows[i].className;
        /*添加事件*/
        rows[i].onmouseover = function(){
            addClass(this,"highLightTable");
        };
        /*onmouseover对应onmouseout*/

        rows[i].onmouseout = function(){
            this.className = this.oldClass;
        }
    }
}

导航链接添加样式

大多数都会有导航栏一项，这里这样放置着当前页面能链接的所有同级页面，如下：

<nav>
    <ul>
         <li>
             <a href="index.html">Home</a>
         </li>
         <li>
             <a href="About.html">About</a>
         </li>
         <li>
             <a href="Photos.html">Photos</a>
         </li>
         <li>
             <a href="Live.html">Live</a>
         </li>
         <li>
             <a href="Contact.html">Contact</a>
         </li>
     </ul>
 </nav>

为了增加用户的体验性，通常会突出显示当前页面链接，通常在开发的时候，我们会采用服务器端包含的方法处理（将这一区域单独放在一个文件中，然后在不同页面中引用）如果增加导航栏项目时，只需要在这个文件中多添加一项即可，这一方法 的缺点就是，如果想改变某一个页面的导航栏样式是没法修改的，所以我们可以利用JavaScript代替服务器端包含，既可以突出显示当前页面链接，还可以根据页面的不同自定义设置导航栏的样式。代码如下：

function highLightPage(){
    /*思路：
    * 1、遍历所有nav中的连接
    * 2、比较nav连接的href是否是当前访问页面
    * 3、为匹配项添加样式
    * */

    /*向后兼容*/
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById) return false;

    var header = document.getElementsByTagName("header");
    /*判断当前页面是否有头部*/
    if(header.length == 0) return false;
    /*获取nav导航栏*/
    var nav = header[0].getElementsByTagName("nav");
    /*判断是否有导航栏*/
    if(nav.length == 0) return false;
    /*获取链接*/
    var a = nav[0].getElementsByTagName("a");
    if(a.length == 0) return false;
    /*获取链接地址*/
    var linkURL;
    /*遍历*/
    for(var i=0;i< a.length;i++){
        /*获取地址*/
        linkURL = a[i].getAttribute("href");
        /*获取当前页面地址  使用window.location.href*/
        if(window.location.href.indexOf(linkURL) != -1){
            a[i].className = "here";
        }
    }
 }