使用 jq／js 判斷一個元素是否含有指定 class

　　利用 jq 來判斷某個元素是否存在指定的 class

　　jq有兩種方法來判斷：

　　1. hasClsaa() 

1 if( $("#div").hasClass(" className1 ") ){
2     
3     // $("#div").hasClass(" className1  className2 ") ;  // 判斷兩個class
4     // $("#div").hasClass(" className1 ") ;     返回true 或 false
5     存在進行下面的操做  
6 }

　　2. is() 用法和 hasClass() 的用法 同樣

 if( $("#div").is(" className1 ")  ){
     
     // $("#div").is(" className1  className2 ") ;  // 判斷兩個class
     // $("#div").is(" className1 ") ;     返回true 或 false
     存在進行下面的操做  
 }

　　那麼這兩個方法有什麼區別呢？從性能來講，hasClass() 方法的性能高於 is() 。 

　　jq 源碼的實現方式　　

var rclass = /[\t\r\n\f]/g;

jQuery.fn.extend({
    hasClass: function(selector) {
        var className = " " + selector + " ",
            i = 0,
            l = this.length;
        for (; i < l; i++) {
            if (this[i].nodeType === 1 &&
                (" " + this[i].className + " ").replace(rclass, " ").indexOf(className) > -1) {
                return true;
            }
        }
        return false;
    }
})

//**
源碼裏面用到了nodeType，nodeType是HTML DOM 的nodeType 屬性，nodeType 屬性返回以數字值返回指定節點的節點類型。經常使用的通常有三種：
若是節點是元素節點（Element），則 nodeType 屬性將返回 1。
若是節點是屬性節點（Attr），則 nodeType 屬性將返回 2。
若是節點是文本節點（Text），則nodeType 屬性將返回 3。
**//
想了解更多：HTML DOM nodeType屬性  http://www.w3school.com.cn/jsref/prop_node_nodetype.asp

　　js 原生的實現方式　　

　方法1:

1 function  hasClassFun( element, cls){
2     return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
3 }
4 
5 hasClassFun( document.querySelector(" 元素名 "), " 存在的className ")；

 

　方法2: 用classList這個H5 API，有兼容性問題 針對class只有一個值的狀況

1  var div = document.getElementsByClassName('div');
2 
3 div.classList.contains('className');return true或false

　 方法3: 用 className 這個屬性 針對class只有一個值的狀況

1 var div = document.getElementsByClassname(" div ");
2 if( div.className == "className "){
3    return turn or false  
4 }