使用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 相关文章推荐
js技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
微信小程序的引导页实现代码
Jun 24 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 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中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
Python中标准模块importlib详解
2017/04/16 Python
python matlibplot绘制3D图形
2018/07/02 Python
利用Python计算KS的实例详解
2020/03/03 Python
python实现简单俄罗斯方块
2020/03/13 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
中海讯通笔试题
2015/09/15 面试题
建议书的格式
2014/05/12 职场文书
开工典礼策划方案
2014/05/23 职场文书
企业公益活动策划方案
2014/08/24 职场文书
工资收入证明
2014/10/07 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
教师工作能力自我评价
2015/03/04 职场文书
军训新闻稿范文
2015/07/17 职场文书
大学开学感言
2015/08/01 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL