js 中class选择器，addClass，removeClass，hasClass，toggleClass，getByClass 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>

<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.js"></script>
<script>

function getByClass(oParent,sClass){
    
    var ret = [];
    // test
    var re = new RegExp("\\b" + sClass + "\\b");
    //var re = /\bbtn\b/;
    var aEle = oParent.getElementsByTagName("*");
    for(var i = 0; i < aEle.length; i++){
    
        if(re.test(aEle[i].className)){
            ret.push(aEle[i]);
        }
    }
    return ret;
}

function addClass(obj,sClass){
    
    var re = new RegExp("\\b"+sClass+"\\b");
    
    if(!re.test(obj.className)){
        
        if(obj.className){
            obj.className += " " + sClass;
        } else {
            obj.className = sClass     
        }
    }
}

function removeClass(obj,sClass){
    
    var re = new RegExp("\\b"+sClass+"\\b","g");
    
    obj.className = obj.className.replace(re,"").replace(/^\s+|\s+$/g,"").replace(/\s+/g," ");
    
    if(!obj.className){
        obj.removeAttribute("class");
    }
    
}


function hasClass(obj,sClass){
    var re = new RegExp("\\b"+sClass+"\\b");
    return re.test(obj.className);
}

function toggleClass(obj,sClass){
    
    if(hasClass(obj,sClass)){
        removeClass(obj,sClass)
    } else {
        addClass(obj,sClass)
    } 
}



window.onload = function(){
    var oBtn = document.getElementById("btn1");
    
    oBtn.onclick = function(){
        
        $(oBtn).toggleClass("active");
        
        //toggleClass(this,"active")
  
    };
};



</script>
</head>

<body>

<input id="btn1" class="box add btn active active active" type="button" value="toggleClass" />
 

</body>
</html>

 

posted @ 2015-08-22 14:44  高尔础础  阅读(437)  评论(0)    收藏  举报