首页 > 代码库 > 关于js的函数

关于js的函数

1、获取内容的兼容函数

/*
 * 一: 获取内容的兼容函数
 * setText(obj, str)
 * 思路:
 *  1、首先判断浏览器;
 *  2、如果是IE浏览器,就用innerText;
 *  3、如果是非IE浏览器,就用textContent;
 * 参数说明:
 *  1、如果是一个参数,这个函数将会用来获取内容
 *  2、如果是两个参数,这个函数将会用来设置内容
 * */
function getText(obj, str) {
    // 判断是否是IE浏览器,如果obj.innerText == ture,则是IE浏览器,否则是非IE浏览器
    if(obj.innerText) {
        // 判断是否传入str,如果传入,就将传入的参数赋值给对象;如果没有传入,就直接返回对象的内容,
        if(str) {
            obj.innerText = str;
        } else {
            return obj.innerText;
        }
    } else {
        if(str) {
            obj.textContent = str;
        } else {
            return obj.textContent;
        }
    }
}

 

2、获取样式的兼容函数;

/*************************************************************************************************************
 * 二:获取样式的兼容函数
 * getStyle(obj, attr);
 * 思路:
 *  1,首先判断浏览器,
 *  2,如果是IE浏览器,就用obj.currentStyle[attr];
 *  3,如果是非IE浏览器,就用document.defaultView.getComputedStyle(obj, null)[attr];
 * 参数说明:
 *  参数1:是要获得样式的对象;
 *  参数2:要从对象里面获取的样式,要以字符串的形式传入;
 * */
function getStyle(obj, attr) {
    // 判断是不是IE浏览器,如果obj.currentStyle == true,说明是IE浏览器,否则是非IE浏览器
    if(obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return document.defaultView.getComputedStyle(obj, null)[attr];
    }
};

 

3、获取指定元素的子元素的集合和有意义的文本,默认情况为获取元素的节点;

/*************************************************************************************************************
 * 三:获取指定元素的子元素的集合和有意义的文本,默认情况为获取元素的节点;
 * getChild(obj, type);
 * 思路:
 *   获取obj的所有的子元素
 *   挑选:obj.nodeType == 1说明就是元素集合,否则就是文本元素的集合
 * 参数说明:
 *   参数1:指定的元素;
 *   参数2:指定获取元素的类型;
 *   true:只获取元素的节点;
 *   false:获取元素的节点和有意义的文本节点;
 * */
function getChild(obj, type) {
    var type = type == undefined ? true : false,
        arr = [];
    var child = obj.childNodes;
    if(type) { //type==true||undefined的时候执行;
        for(var i = 0; i < child.length; i++) {
            if(child[i].nodeType == 1) {
                arr.push(child[i]);
            };
        };
        return arr;
    } else {
        for(var i = 0; i < child.length; i++) {
            //replace.();把空白替换掉:str="a b c"-------str=["a","b","c"]
            if(child[i].nodeType == 1 || (child[i].nodeType == 3 && child[i].nodeValue.replace(/^\s+|\s+$/g, "") != "")) {
                arr.push(child[i]);
            };
        };
        return arr;
    };
};

 

4、获取第一个子元素

/************************************************************************************************************
 * 四:获取第一个子元素;
 * */
function getFirstChild(obj) {
    return getChild(obj)[0];
};

 

5、获取最后一个子元素

/***********************************************************************************************************
 * 五:获取最后一个子元素;
 * */
function getLastChild(obj) {
    var length = getChild(obj).length;
    return getChild(obj)[length - 1];
}

 

6、获取任意的子元素

/**********************************************************************************************************************
 * 六:获取任意的子元素;
 * */
function getRandomChild(obj, num){
    return getChild(obj)[num-1];
}

 

7、获得目标对象的下一个兄弟节点,如果有下一个兄弟节点的话,如果没有,返回false;

技术分享
/***************************************************************************************************************
 * 七:获得目标对象的下一个兄弟节点,如果有下一个兄弟节点的话
 * getNext(obj, type);
 * 思路:
 *      1、判断是否有下一个兄弟节点,如果没有的话,返回false,如果有的话,继续往下进行;
 *      2、判读next是否是一个有意思的文本节点或者元素节点;
 *      3、更新next,即给next赋值。继续往下寻找下一个兄弟节点;
 *      4、判断next是否是一个空值,如果为空,返回false,如果不为空,继续进行第二步;
 * 参数说明:
 *      1、obj:指定的对象;
 *      2、type为true时:忽略文本,也是默认值;type为false时,不能忽略文本;
 * */
function getNext(obj, type) {
    var type = type == undefined ? true : type;
    var next = obj.nextSibling;
    checkNext(next);
    if(type) {
        // 忽略文本
        // 当next是一个注释节点或者文本节点时,继续往下循环;
        while(next.nodeType == 3 || next.nodeType == 8) {
            next = next.nextSibling;
            checkNext(next);
        }
        return next;
    } else {
        // 不能忽略文本
        // 当next的类型是一个注释或是文本时,继续往下循环;
        while(next.nodeType == 8 || (next.nodeType == 3 && next.nodeValue.replace(/^\s+|\s+$/g, ‘‘) != ‘‘)) {
            next = next.nextSibling;
            checkNext(next);
        }
    }

    // 返回false封装成方法
    function checkNext(nextObj) {
        if(nextObj == null) {
            return false;
        }
    }
}
View Code

 

7、给最前面的元素插入一条元素

/*****************************************************************************************************************
 * 七:给最前面的元素插入一条元素
 * beforeChild(obj, ele)
 * 思路:
 *      1、获取第一个子元素firstChild
 *      2、父元素.insertBefore(要插入的元素,firstChild);
 * 参数说明:
 *      1、obj:父元素;
 *      2、ele:要插入的元素
 * */
function beforeChild(obj, ele) {
    var first = getFirstChild(obj);
    obj.insertBefore(ele, first);
};

 

8、给某个元素后面插入一条子元素

 

关于js的函数