原生js的一些兼容封装

获取Dom元素

/**
@selector:类似jq的$，但是不能识别派生选择器。
@parent:父类元素（可选）
*/
//封装一个$函数，可以通过id，标签，还可以类名。
function $(selector,parent){
    //判断是否输入对象。
    parent = parent ||document;
    //截取字符串第一个字符。
    var firstChar = selector.charAt(0);
    if(firstChar =="#"){//判断是否是通过id
        return document.getElementById(str.substring(1));
    }else if(firstChar =="."){//判断是否是通过类名
        var newStr = selector.substring(1);//截取第一个之后的所有字符
        var arrNew = [];//声明一个数组
        var arrNew1 = [];//声明一个数组
        var arr = parent.getElementsByTagName("*");//获取在对象下的所有标签。
        for(var i = 0; i

获取样式表里的样式

/*
@obj:要获取样式的元素
@attr:要获取的样式
*/
//获取样式表里的样式，全兼容。
function getStyle(obj,attr){
    //因为currentStyle火狐和谷歌不支持会显示Undefined的，所以放前面，而getComputedStyle这个ie低版本不支持会直接报错。
    return obj.currentStyle?obj.currentStyle[attr]:obj.getComputedStyle[attr];
}

添加和移除类名

• 添加(优化原生防止重复添加)

/*
@obj:要添加类的元素
@myClass:要添加的类。
*/
//封装一个添加类的函数
function addClass(obj,myClass){
    if(obj.className=="" ){//判断class是否为空
        obj.className = myClass;//是，直接给class赋值
    }else{
        var str = obj.className;//获取class
        var arr = str.split(" ");//将class按空格切割，然后装如数组。
        if(arr.indexof(myClass) ==-1){//判断是否存有相同的
            obj.className += " "+myClass;//没有，就将新的类名 重新赋值给class（类）
        }
    }
}

• 移除类(优化原生防止重复添加)

/*
@obj:要添加类的元素
@myClass:要添加的类。
*/
//封装一个删除类的函数。
function removeClass(obj,myClass){
    if(obj.className != ""){
        var str = obj.className;//获取class
        var arr = str.split(" ");//将class按空格切割，然后装如数组。
        if(arr.indexof(myClass) !=-1){//判断是否存有相同的
            arr.splice(arr.indexof(myClass),1);//将存在的删除
            obj.className = arr.join(" ");//将删除后数组的值重新赋值给class（类）
        }
    }
}

阻止事件冒泡

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

组件事件冒泡.gif