jQuery中is和hasClass的用法

在jQuery中，咱們可使用兩種方法來檢查一個元素是否具備某些類名，這兩種方法都具備相同的功能。

.hasClass("className"):有關.hasClass()方法能夠查閱jQuery API——hasClass()
.is(".className"):有關.is()方法能夠查閱jQuery API——is()

下面咱們先來簡單看一下他們的用法

1、.hasClass()

hasClass()方法是用來檢查被選擇的元素是否包含指定的class名，其語法：

$(selector).hasClass("className");//其中class是必須的值，規定須要在指定元素中查找的類名。

hasClass()也能夠同時寫多個class但他們以前用空格隔開，以下：

$(selector).hasClass("className1 className2");

2、.is()

is()方法也是用來檢查被選擇的元素是否包含指定的class名，其用法爲：

$(selector).is(".className");

一樣is()也能夠有多個類名的寫法，如：

$(selector).is(".className,.className");  

有關於他們更詳細的用法，你們能夠查看這裏：jQuery API——hasClass()、jQuery API——is()。下面咱們一塊兒來看一個實例：

若是div元素有一個類名叫"bgRed",那麼咱們給其加上背景色爲紅色，如明沒有這個類名，我將背景色設置爲藍色，咱們一塊兒來看代碼：

HTML Code:

<div class="bgRed">有類名"bgRed"</div>
<div>無類名「bgRed」</div>
<div>無類名「bgRed」</div>
<div class="bgRed">有類名"bgRed"</div>
<p>
 <button id="isTest">is('.bgRed')</button>
 <button id="hasClassTest">hasClass('.bgRed')</button>
 <button id="reset">reset</button>
</p>

jQuery Code:

 //.is() $("#isTest").click(function(){     var $divTest = $(".demoTest div");     $divTest.each(function(){         if($(this).is(".bgRed")){             $(this).css("background-color","red");         } else {             $(this).css("background-color","blue");         }     }); }); 

 //.hasClass() $("#hasClassTest").click(function(){     var $divTest = $(".demoTest div");     $divTest.each(function(){         if($(this).hasClass("bgRed")){             $(this).css("background-color","red");         } else {             $(this).css("background-color","blue");         }     }); }); 

 //reset $("#reset").click(function(){     location.reload(); }); 

效果：

上面兩種方法最終效果都是同樣的。但從性能的角度來講，hasClass()要比is()更快，咱們來作一個測試：

 function usingIs(){     for(var i=0; i<10000;i++){         $("div#testDiv").is(".test");     } } function usingHasClass(){     for(var i=0; i<10000;i++){         $("div#testDiv").hasClass("test");     } } 

 usingIs(); usingHasClass(); 

結果是：usingIs()用時3191.663ms,而usingHasClass()用時2362.523ms。你也能夠在 這裏改變測試條件進行測試。

最後在總結一下：

雖然.is()和.hasClass()兩種方法都能用來檢查一個元素是否具備某些特定的類名，但性能上來講，.hasClass()方法要更強，因此在實際運用中咱們能夠儘可能使用.hasClass()方法來檢查一個元素是否具備某些特定的類名。換句簡單的話說：.is()和.hasClass()功能同樣，但.hasClass()性能方面強於.is()。