使用jquery判断一个元素是否含有一个指定的类(class)实例


Posted in Javascript onFebruary 12, 2017

在jquery中可以使用2种方法来判断一个元素是否包含一个确定的类(class)。两种方法有着相同的功能。

2 种方法如下:

 1. is(‘.classname')

2. hasClass(‘classname')

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

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

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

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

$('div').hasClass('redColor')以下是检测一个元素是否含有一个redColor类的例子,含有时,则把其类变为blueColor。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.redColor { 
background:red;
}
.blueColor { 
background:blue;
}
</style>
<script type="text/javascript"src="jquery-1.8.1.min.js"></script>
</head>
<body>
<h1>jQuery check if an element has a certain class</h1>
<div class="redColor">This is a div tag with class name of "redColor"</div>
<p>
<button id="isTest">is('.redColor')</button>
<button id="hasClassTest">hasClass('.redColor')</button>
<button id="reset">reset</button>
</p>
<script type="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>

以上这篇使用jquery判断一个元素是否含有一个指定的类(class)实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 方法大全方便学习参考
Feb 25 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 #Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 #Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 #Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 #Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 #Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 #Javascript
超全面的vue.js使用总结
Feb 12 #Javascript
You might like
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
Python函数式编程指南(二):从函数开始
2015/06/24 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
python mysql中in参数化说明
2020/06/05 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
求职简历中个人的自我评价
2013/12/01 职场文书
服务生自我鉴定
2014/01/22 职场文书
优秀教师事迹简介
2014/02/02 职场文书
2014年创卫实施方案
2014/02/18 职场文书
环保口号大全
2014/06/12 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
教师自查自纠材料
2014/10/14 职场文书
2014年党务工作总结
2014/11/25 职场文书
模范教师材料大全
2014/12/16 职场文书
锅炉工岗位职责
2015/02/13 职场文书
运输公司工作总结
2015/08/11 职场文书