文档章节

jQuery中is和hasClass的用法

Junn
 Junn
发布于 2013/04/11 12:14
字数 622
阅读 12950
收藏 12
在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(); });

效果:

上面两种方法最终效果都是一样的。但从性能的角度来说,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()。

 

本文转载自:http://www.w3cplus.com/jquery/is-vs-hasclass

Junn
粉丝 145
博文 412
码字总数 288918
作品 0
海淀
技术主管
私信 提问
加载中

评论(2)

一个谐星
一个谐星
①is()会遍历调用它的对象,有符合条件的就返回true。hasClass()判断对象是否含有某个css类。如果一个jQuery对象$('ul>li')包含多个dom节点,其中一个节点li含有类.test 则is()方法返回true hasClass方法返回false
②我测试函数执行的耗时,$("body").is(".li1")与$("body").hasClass(".li1")各执行100次取平均值分别为0.02ms和0ms。将每次执行的结果都打印出来,发现只有is()有2次时间为1ms。所以两个函数的执行时间都是小于1ms的。哪个更快我不好判断。
gaubee
gaubee
哦呵呵,意义何在?
js实现css、addClass、removeClass和toggleClass

JQuery中获取CSS样式 css(name):访问第一匹配元素的样式属性 css(name,value):在所有匹配的元素中,设置一个样式属性的值 css(properties):把一个“名/值对”对象设置为所有匹配元素的样式...

freedonn
2014/10/17
0
0
jQuery 1.4 Alpha 1 发布

这是 jQuery 1.4 第一次发布的版本,尽管还是 Alpha 测试阶段,但它已经是稳定的,在所有市面上流行的浏览器中通过了测试。 相比较上一个版本 1.3.2 ,1.4 版本进行了一些扩展,包括: 1. l...

红薯
2009/12/05
1K
0
jQuery 1.4 Alpha 1 发布

红薯 发布于: 2009年12月05日 (0评) 这是 jQuery 1.4 第一次发布的版本,尽管还是 Alpha 测试阶段,但它已经是稳定的,在所有市面上流行的浏览器中通过了测试。 相比较上一个版本 1.3.2 ,1...

kingwrcy
2010/01/20
81
0
Java程序员从笨鸟到菜鸟之(八十八)跟我学jquery(四)JQuery框架操作元素的属性与样式

在前面几篇博客中,我们初步了解了一下jquery的好处,基本语法,还有一些基本函数,这是学习jquery的基础,在这篇博客中,我们一起来学习一下JQuery框架操作元素的属性与样式,在web开发中,...

长平狐
2012/11/12
23
0
jQuery DOM 操作(1) --->>> Class Attribute , 类属性操作

Class Attribute 我又回来了,最近因为在搞一个非常NB的东西。所以没有时间整理技术类的相关文档了。明天端午无心工作,所以抽空来写一些技术文档了。文档也没有什么特别的东西。但是作为技术...

香吉士
2012/06/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

3分钟看懂Activity启动流程

背景介绍 从事开发到了一定阶段,想要提高就必须搞明白系统的一些工作原理。为什么?因为只有明白了这些,你才能针对平台的特性写出优质的代码。当遇到棘手的问题时,你才能更快速的结合系统...

天王盖地虎626
28分钟前
1
0
机器学习算法GPU版本安装配置

##XGBoost for GPU安装https://blog.csdn.net/weixin_30963287/article/details/79145107https://blog.csdn.net/wl2858623940/article/details/80546140https://blog.csdn.net/u01164186......

KYO4321
31分钟前
1
0
微软展开训练AI来推Windows 10 1903版自动更新

Windows 10 May 2019(1903版)正式释出将近一个月,或许已经有用户自主安装更新了,不过微软认为还不够多。微软表示将开始训练机器学习(machine learning)技术,帮助1803版本以前的PC更新...

yisy5566
今天
0
0
前后端分离-前端搭建(Vue)(2)

先安装node.js以及npm 现在基本的node.js都包含有npm,下载安装后, 可以在cmd命令里输入 node -v 和npm -v 分别查看安装的版本 两个都显示了版本就是安装ok 这次我们使用JetBrains WebStor...

咸鱼-李y
今天
0
0
好程序员web前端教程分享三大前端框架相关问题

  好程序员web前端教程分享三大前端框架相关问题,三大前端框架,有没有哪个框架的组件间交互像js的方法传值一样简单? 首先框架组件通信是为了方便组件模块之间进行数据交互的,因为框架的...

好程序员IT
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部