• 关于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

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

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

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

    /************************************************************************************************************************
     * 九:给某个元素后面插入一条子元素
     * insertAfter(obj,ele,type)
     * 思路:
     *      1、首先获取第一个兄弟节点,调用之前的getNext(obj, type)函数;
     *      2、看是否有下一个兄弟节点,如果有,往下一个兄弟节点的前面插入元素。如果没有,直接插入到父元素的后面;
     * 参数说明:
     *      1、obj:要插入的位置;
     *      2、ele:要插入的元素;
     *      3、type:
     *          true:忽略文本(元素节点和false是getNext(obj, type)返回的值)
     *          false:不能忽略文本;
     * */
    function insertAfter(obj, ele, type) {
        // 初始化参数
        var type = type == undefined ? true : type,
            next = getNext(obj, true),
            parent = obj.parentNode;
        if(next) {
            // next == true时,将ele插入到next后面;
            parent.insertBefore(ele, next);
        } else {
            // next == false时,将ele直接插入到parent即可;
            parent.appendChild(ele);
        }
    }

    10、获取上一个兄弟节点;与获取下一个兄弟节点类似。

    /************************************************************************************************
     * 十、获取上一个兄弟节点;
     * getPrevious(obj, type);
     * */
    function getPrevious(obj, type) {
        var type = type == undefined ? true : type,
            next = obj.previousSibling;
        checkNext(next);
        if(type) {
            // 忽略文本
            // 当next的类型是一个注释或是文本时,继续往下循环;
            while(next.nodeType == 8 || next.nodeType == 3) {
                next = next.previousSibling;
                checkNext(next);
            }
            return next;
        } else {
            // 不忽略文本
            // 当next的类型是一个注释或是文本时,继续往下循环;
            while(next.nodeType == 8 || (next.nodeType == 3 && !(next.nodeValue.replace(/^s+|s+$/g, '')))) {
                next = next.previousSibling;
                checkNext(next);
            }
            return next;
        }
        // 判断next的函数
        function checkNext(nextObj) {
            if(nextObj = null) {
                return false;
            }
        };
    }

    11、

  • 相关阅读:
    Vue-发布订阅机制(bus)实现非父子组件的传值
    01. jupyter环境安装
    人工智能
    Javascript
    JavaScript
    MongoDB
    MongoDB
    人工智能
    Flask
    Flask
  • 原文地址:https://www.cnblogs.com/tanxiang6690/p/6891936.html
Copyright © 2020-2023  润新知