在前端某些个逻辑中,我们需要判断某个元素是否具有某个class的值,并对其挂载相应的事件。这篇文章就说说利用JQ中的hasClass方法来判断某个元素是否具有某个类

hasClass定义与用法

hasClass() 方法检查被选元素是否包含指定的 class。

如果被选元素包含指定的类,该方法返回 "true"。

语法:

$(selector).hasClass(class)

class:为要查找的类,不可省略

JQ判断某个元素中是否具体某个类

例1:

代码

<div id="mochu" class="aa bb">飞鸟慕鱼博客</div>
<button>点我测试</button>
<script>
    $('button').click(function(){
        alert($('#mochu').hasClass('aa'));
    });
</script>

弹出结果:true;

JQ判断某个元素是否具有类,jq hasClass用法

例2:

<div id="mochu" class="aa bb">飞鸟慕鱼博客</div>
<button>点我测试</button>
<script>
    $('button').click(function(){
        alert($('#mochu').hasClass('aa bb'));
    });
</script>

弹出结果:true

例3:

<div id="mochu" class="aa bb">飞鸟慕鱼博客</div>
<button>点我测试</button>
<script>
    $('button').click(function(){
        alert($('#mochu').hasClass('aa cc'));
    });
</script>

弹出结果:false

JQ判断某个元素是否具有类,jq hasClass用法

总结:

通过上面的三个例子相比较,我们不难发现hasClass()方法可以同时写多个class,但他们之前用空格隔开。只有所填写的类全部存在才会返回true,否则返回false