无标题文档

jQuery 中 is 和 hasClass 的用法

在 jQuery 中，我们可以使用两种方法来检查一个元素是否具有某些类名，这两种方法都具有相同的功能。
.hasClass("className"): 有关.hasClass () 方法可以查阅 jQuery API——hasClass()
.is(".className"): 有关.is () 方法可以查阅 jQuery API——is() 下面我们先来简单看一下他们的用法一、.hasClass ()
hasClass () 方法是用来检查被选择的元素是否包含指定的 class 名，其语法：$(selector).hasClass("className");//其中class是必须的值，规定需要在指定元素中查找的类名。
hasClass () 也可以同时写多个 class 但他们之前用空格隔开，如下：
$(selector).hasClass("className1 className2");
二、.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();
});