使用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 对象定义方法 简单易学
Mar 22 Javascript
javascript 写类方式之三
Jul 05 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
浅谈JavaScript作用域
Dec 06 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
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
div移动 输入框不能输入的问题
2009/11/19 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
深入解析Python中函数的参数与作用域
2016/03/20 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python 追踪except信息方式
2020/04/25 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
部队领导证婚词
2014/01/12 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
将相和教学反思
2014/02/04 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
班主任寄语2015
2015/02/26 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
食堂卫生管理制度
2015/08/04 职场文书
运动会主持人开幕词
2016/03/04 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
redis lua限流算法实现示例
2022/07/15 Redis