使用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 相关文章推荐
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 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
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
JQuery autocomplete 使用手册
2010/04/01 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
Underscore源码分析
2015/12/30 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python中join和split用法实例
2015/04/14 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Python 串口读写的实现方法
2019/06/12 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
函授毕业自我鉴定
2013/12/19 职场文书
《老王》教学反思
2014/02/23 职场文书
项目合作意向书范本
2014/04/01 职场文书
求职信格式要求
2014/05/23 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
国际贸易实训报告
2014/11/05 职场文书
西双版纳导游词
2015/02/03 职场文书
人事任命通知书
2015/04/21 职场文书
党支部审查意见
2015/06/02 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python