在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. 【转载】协同过滤 & Spark机器学习实战

    因为协同过滤内容比较多,就新开一篇文章啦~~ 聚类和线性回归的实战,可以看:http://www.cnblogs.com/charlesblc/p/6159187.html 协同过滤实战,仍然参考:h ...

  2. java.lang.OutOfMemoryError: PermGen space异常处理（内存溢出）

    楼主刚接触到这个问题,问度娘,直接查到的都是让 在tomcat>bin>catalina.sh文件的“echo "Using CATALINA_BASE: $CATALINA_B ...

  3. Windows2012安装IIS和FTP

    Windows2012安装IIS和FTP  1.打开Windows 2012的服务器管理器,选择 管理→添加角色和功能  2.进入 添加角色和功能向导,选择 “Web服务器(IIS)” 3.根据情况选 ...

  4. zabbix3.0.4 部署之五 （LNMP > nginx1.9.9）

    1 wget http://nginx.org/download/nginx-1.9.9.tar.gz cd /opt/pcre-8.35 autoreconf -ivf Installing sha ...

  5. 用 python 实现各种排序算法（转）

    常见几种排序的算法: 归并排序 归并排序也称合并排序,是分治法的典型应用.分治思想是将每个问题分解成个个小问题,将每个小问题解决,然后合并. 具体的归并排序就是,将一组无序数按n/2递归分解成只有一个 ...

  6. Centos7 搭建 Keepalived+LVS 备注

    NAT模型需要RealServer gateway设定为,DR模式需要执行 RealServer.sh.需要先安装network-tools. #!/bin/bash#description : st ...

  7. Debian添加raw裸设备

    一.检查系统是否已经启用了raw模块 root@frog:~# lsmod|grep raw 如果系统没有启用raw模块! 二. 设置系统自动启用raw root@frog:~# echo raw & ...

  8. ASP.NET jquery.uploadify上传控件中文乱码解决办法(转)

    原文地址:http://blog.csdn.net/ningxi_/article/details/6234725 在一般处理程序上加上这几句话: context.Response.ContentTy ...

  9. Android开发--RadioButton的应用

    1.简介 RadioButton为单选按钮,当一个按钮被选中后,点击其他按钮无法使上一个按钮变为未选中状态.RadioGroup是可以容纳多个RadioButton的容器, 通过使用RadioGrou ...

  10. C#将字符串中间部分替换为*号

    在做商城评价的时候,为了显示评价的真实性同时保护客户的隐私,我们将用户昵称中间部分替换为*(如果是单字则替换为* 两个字符串第二位字符串替换为*)如下图 方法如下: /// <summary&g ...