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()。