使用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 获取表单file全路径
Dec 31 Javascript
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
js跳转页面方法总结
Jan 29 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
JS实现的缓冲运动效果示例
Apr 30 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
关于python的list相关知识(推荐)
2017/08/30 Python
pandas string转dataframe的方法
2018/04/11 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
英语演讲稿范文
2014/01/03 职场文书
后备干部培训方案
2014/05/22 职场文书
五好家庭事迹材料
2014/12/20 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
投资合作意向书范本
2015/05/08 职场文书
郭明义电影观后感
2015/06/08 职场文书
初三英语教学反思
2016/02/15 职场文书
小学音乐课教学反思
2016/02/18 职场文书
你会写请假条吗?
2019/06/26 职场文书
MySQL基础(一)
2021/04/05 MySQL
python之json文件转xml文件案例讲解
2021/08/07 Python
JavaScript实现音乐播放器
2022/08/14 Javascript