使用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 相关文章推荐
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
javascript语言结构小记(一)
Sep 10 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
javascript实现五星评分功能
Nov 10 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
利用js实现简单开关灯代码
Nov 23 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中二维数组排序问题方法详解
2015/08/28 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
js实现简单的秒表
2020/01/16 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
python实现图片批量剪切示例
2014/03/25 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
基于Python的PIL库学习详解
2019/05/10 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
出纳工作岗位责任制
2014/02/02 职场文书
保研推荐信格式
2015/03/25 职场文书
box-shadow单边阴影的实现
2023/05/21 HTML / CSS