使用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获取data-的自定义属性
Nov 10 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 Javascript
JavaScript中遍历的十种方法总结
Dec 15 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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的memory_limit限制的方法分享
2012/02/21 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
Vue波纹按钮组件制作
2018/04/30 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
如何在Python中编写并发程序
2016/02/27 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
Python接口测试文件上传实例解析
2020/05/22 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
文员个人求职自荐信
2013/09/21 职场文书
高校辅导员推荐信范文
2013/12/25 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
html5调用摄像头截图功能
2022/01/18 Javascript