各类兼容函数封装

原创 2018年04月17日 21:23:03
获取某节点的兼容函数封装
/**
 * 获取父级元素中的第一个子元素
 * @param element 父级元素
 * @returns {*} 父级元素中的子级元素
 */
function getFirstElement(element) {
    if (element.firstElementChild) {
        return element.firstElementChild;
    } else {
        var node = element.firstChild;
        while (node && node.nodeType != 1) {
            node = node.nextSibling;
        }
        return node;
    }
}
/**
 * 获取父级元素中的最后一个子元素
 * @param element 父级元素
 * @returns {*} 最后一个子元素
 */
function getLastElement(element) {
    if (element.lastElementChild) {
        return element.lastElementChild;
    } else {
        var node = element.lastChild;
        while (node && node.nodeType != 1) {
            node = node.previousSibling;
        }
        return node;
    }
}
/**
 * 获取某个元素的前一个兄弟元素
 * @param element 某个元素
 * @returns {*} 前一个兄弟元素
 */
function getPreviousElement(element) {
    if (element.previousElementSibling) {
        return element.previousElementSibling
    } else {
        var node = element.previousSibling;
        while (node && node.nodeType != 1) {
            node = node.previousSibling;
        }
        return node;
    }
}
/**
 * 获取某个元素的后一个兄弟元素
 * @param element 某个元素
 * @returns {*} 后一个兄弟元素
 */
function getNextElement(element) {
    if (element.nextElementSibling) {
        return element.nextElementSibling
    } else {
        var node = element.nextSibling;
        while (node && node.nodeType != 1) {
            node = node.nextSibling;
        }
        return node;
    }
}
/**
 * 获取某个元素的所有兄弟元素
 * @param element 某个元素
 * @returns {Array} 兄弟元素
 */
function getSiblings(element) {
    if (!element)return;
    var elements = [];
    var ele = element.previousSibling;
    while (ele) {
        if (ele.nodeType === 1) {
            elements.push(ele);
        }
        ele = ele.previousSibling;
    }
    ele = element.nextSibling;
    while (ele) {
        if (ele.nodeType === 1) {
            elements.push(ele);

        }
        ele = ele.nextSibling;
    }
    return elements;
}
绑定函数和解绑函数兼容封装
//为任意一个元素绑定事件:元素,事件类型,事件处理函数
function addEventListener(element,type,fn) {
    if(element.addEventListener){
        //支持
        element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
        element.attachEvent("on"+type,fn);
    }else{
        element["on"+type]=fn;
    }
}
//为任意的一个元素解绑某个事件:元素,事件类型,事件处理函数
function removeEventListener(element,type,fn) {
    if(element.removeEventListener){
        element.removeEventListener(type,fn,false);
    }else if(element.detachEvent){
        element.detachEvent("on"+type,fn);
    }else{
        element["on"+type]=null;
    }
}
封装getScroll函数
/**
 * 获取的是页面向上或者向左卷曲出去的距离的值,返回的是对象
 * @returns {{top: (Number|number), left: (Number|number)}}
 */
function getScroll() {
    return {
        top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0,
        left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft||0
    };
}




封装事件监听兼容

封装事件监听函数
  • smiple9102
  • smiple9102
  • 2017-04-09 11:31:39
  • 353

Js基础学习之 -- DOM兼容 根据标签、类名获取节点函数封装

Js基础学习之 --  DOM兼容 根据标签、类名获取节点函数封装                  1.    作用:所有类选择器名为cName的标签       参数:类选择器的名(cl...
  • b1244154318
  • b1244154318
  • 2016-07-17 23:24:33
  • 2012

js函数封装,使一个obj的透明度渐变,淡入淡出(兼容IE)

无标题文档 *{padding:0; margin:0;} li{ list-style:none;} #main{ width:580px; height:400px; margin:0 a...
  • jingshui1234
  • jingshui1234
  • 2015-05-12 07:49:40
  • 2430

添加和移除事件处理兼容各浏览器的封装(带详细注释)

//事件处理兼容各种浏览器,采用能力检测方法,所谓能力检测,就是有能力就做,没有能力就不做 //定义一个处理事件的对象,兼容各种浏览器,dom2级事件处理和ie事件,如果这两个事件都不兼容,就采...
  • topwqp
  • topwqp
  • 2014-12-04 21:50:36
  • 1628

JavaScript封装跨浏览器的class、id选择器函数

用原生js封装一个通用的选择器函数,选择class或者id元素,类型jQuery的id选择器、class选择器。...
  • qq_37268201
  • qq_37268201
  • 2017-04-28 10:51:08
  • 636

js封装 - ajax兼容处理

  • 2018年03月09日 10:27
  • 143B
  • 下载

js封装一个函数用于提取具有相同className的元素

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...
  • u010114513
  • u010114513
  • 2016-03-16 14:32:29
  • 628

Javascript获取innerText,对IE和FF的兼容性问题

ssssssssssssss     var one=document.getElementById("one");   function show(){    alert(one.inn...
  • zunguitiancheng
  • zunguitiancheng
  • 2014-07-09 11:52:33
  • 509

封装兼容的Ajax请求

XMLHttpRequest对象XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。 XMLHttpRequ...
  • Ted_Rui
  • Ted_Rui
  • 2017-05-17 00:32:40
  • 221
收藏助手
不良信息举报
您举报文章:各类兼容函数封装
举报原因:
原因补充:

(最多只允许输入30个字)