在jQuery中可以使用2种方法来判断一个元素是否包含一个确定的类(class)。两种方法有着相同的功能。2种方法如下：（个人喜欢用hasClass()）

1.           hasClass(‘classname’)

2.           is(‘.classname’)

以下是一个div元素是否包含一个redColor的例子：

1. 使用is(‘.classname’)的方法

$('div').is('.redColor')

2. 使用hasClass(‘classname’)的方法(注意jquery的低版本可能是hasClass(‘.classname’))

$('div').hasClass('redColor')

以下是检测一个元素是否含有一个redColor类的例子，含有时，则把其类变为blueColor。

<html>
<head>
<styletype="text/css">
  .redColor { 
        background:red;
  }
  .blueColor { 
        background:blue;
  }
</style>
<scripttype="text/javascript"src="jquery-1.3.2.min.js"></script>
</head>
<body>
  <h1>jQuery check if an element has a certain class</h1>
 
  <divclass="redColor">This is a div tag with class name of "redColor"</div>
 
  <p>
  <buttonid="isTest">is('.redColor')</button>
  <buttonid="hasClassTest">hasClass('.redColor')</button>
  <buttonid="reset">reset</button>
  </p>
<scripttype="text/javascript">
 
    $("#isTest").click(function () {
 
          if($('div').is('.redColor')){
                $('div').addClass('blueColor');
          }
 
    });
 
    $("#hasClassTest").click(function () {
 
          if($('div').hasClass('redColor')){
                $('div').addClass('blueColor');
          }
 
    });
 
        $("#reset").click(function () {
          location.reload();
    });
 
 
</script>
</body>
</html>

初始效果：

点击is('.redColor')后的效果：

点击hasClass('redColor')的效果与点击is('.redColor')后的效果相同，点击reset的效果与初始效果相同。

怎么使用jquery判断一个元素是否含有一个指定的类（class）的更多相关文章

  1. 如何使用jquery判断一个元素是否含有一个指定的类（class）

    如何使用jquery判断一个元素是否含有一个指定的类(class) 一.总结 一句话总结:可以用hasClass方法(专用)和is方法 1.is(expr|obj|ele|fn)的方法几个参数表示什么 ...

  2. js和jquery判断该元素中是否有指定class

    <div class="test">test</div> var t = document.getElementsByClassName('test'); ...

  3. jQuery判断当前元素是第几个元素&获取第N个元素

    假设有下面这样一段HTML代码: <ul> <li>jQuery判断当前元素是第几个元素示例</li> <li>jQuery获取第N个元素示例</ ...

  4. javascript判断一个元素是另外一个元素的子元素

    javascript判断一个元素是另外一个元素的子元素用途有很多,最常用的就是当点击页面的空白处去执行某些操作,比如弹出层等. function isParent (obj,parentObj){ w ...

  5. js jquery 判断匹配元素是否存在

    jQuery 判断页面元素是否存在的代码 在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: 复制代码 ...

  6. [ jquery 过滤器 hasClass(class) ] 此方法用于在选择器的基础之上检查当前的元素是否含有某个特定的类，如果有，则返回true

    此方法用于在选择器的基础之上检查当前的元素是否含有某个特定的类,如果有,则返回true 实例: <!DOCTYPE html> <html lang='zh-cn'> < ...

  7. js 获取任意一个元素的任意一个样式属性的值

    //谷歌,火狐支持console.log(window.getComputedStyle(my$("dv"),null).left);//IE8支持console.log(my$( ...

  8. jQuery 判断页面元素是否存在的代码

    在原生的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

  9. jQuery判断当前元素显示状态并控制元素的显示与隐藏

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id") ...

随机推荐

  1. 内部类 & 泛型

    内部类 主要作用 1. 内部类, 主要用于事件监听的方法实现.2. 用于多继承 注: 主要还是 1 用的比较多. 参考 : head first java (第12章) 泛型 head first j ...

  2. hdu2243考研路茫茫——单词情结（ac+二分矩阵）

    链接 跟2778差不多,解决了那道题这道也不成问题如果做过基本的矩阵问题. 数比较大,需要用unsigned longlong 就不需要mod了 溢出就相当于取余 #include <iostr ...

  3. 关于php语言的使用！ ------php语言与JavaScript的使用 方法是相似

    <script type="text/javascript"> </script>--js与PHP同是一种弱类型语言 弱类型语言只是不显示表现  定义变量时 ...

  4. cube定时器延时不准确原因

    昨天晚上测试32cube配置好定时器,以1ms为一次中断,然后在程序中做了一个1s的延时,结果发现实际延时5s左右,百思不得其解,仔细查看cube配置也没问题.最后我打开生成工程文件夹里面的ioc文件 ...

  5. CentOS6.8下部署Zabbix3.0

    Centos6.8下部署安装zabbix3.0: 环境要求 PHP >= 5.4  (CentOS6默认为5.3.3,需要更新) curl >= 7.20 (如需支持SMTP认证,需更新) ...

  6. Chinese culture

      文房四宝 笔墨纸砚是中国古代文人书房中必备的宝贝,被称为“文房四宝”.用笔墨书写绘画在 中国可追溯到五千年前.秦(前221---前206)时已用不同硬度的毛和竹管制笔:汉代(前206—公元220) ...

  7. oracle中如何创建dblink

    当用户要跨本地数据库,访问另外一个数据库表中的数据时,本地数据库中必须创建了远程数据库的dblink,通过dblink本地数据库可以像访问本地数据库一样访问远程数据库表中的数据.下面讲介绍如何在本地数 ...

  8. Nginx reopen reload作用及工作过程

    http://www.iigrowing.cn/nginx-reopen-reload-zuo-yong-ji-gong-zuo-guo-cheng.html Nginx reopen reload作 ...

  9. wheel和staff分组

    1.只有属于wheel组的用户才可以用su登录为root 2. 具体设置步骤如下: 1)修改 /etc/pam.d/su 文件,找到"#auth required /lib/security ...

  10. 快消零售行业怎么用K2做开关店管理？

    提起迪卡侬,想到的便是它汇聚所有运动于同一个屋檐下的盛况.从来没有一家体育用品零售店可以像迪卡侬一样,涵盖几乎所有级别的运动产品.从入门级到最专业的运动产品,应有尽有,不仅产品质量有保证,价格也平易近 ...