使用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事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
浅谈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递归算法和应用方法介绍
2013/04/15 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
Python3基础之输入和输出实例分析
2014/08/18 Python
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python字符串处理函数简明总结
2015/04/13 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
python机器学习之神经网络(二)
2017/12/20 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
浅析matlab中imadjust函数
2020/02/27 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
英文版区域经理求职信
2013/10/23 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
老公保证书怎么写
2015/02/26 职场文书
2016新年年会主持词
2015/07/06 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
Python实现仓库管理系统
2022/05/30 Python