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

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

　　jq有兩種方法來判斷：

　　1. hasClsaa() 

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

　　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:

function  hasClassFun( element, cls){
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

hasClassFun( document.querySelector(" 元素名 "), " 存在的className ")；

 

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

 var div = document.getElementsByClassName('div');

div.classList.contains('className');return true或false

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

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