使用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 相关文章推荐
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
浅谈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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
php session安全问题分析
2011/06/24 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
vue mounted组件的使用
2018/06/18 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
用Python给文本创立向量空间模型的教程
2015/04/23 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
Tornado 多进程实现分析详解
2018/01/12 Python
python实现飞机大战
2018/09/11 Python
python 实现两个npy档案合并
2020/07/01 Python
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
拖鞋店创业计划书
2014/01/15 职场文书
垃圾桶标语
2014/06/24 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
公务员政审个人总结
2015/02/12 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
详解nodejs内置模块
2021/05/06 NodeJs
Nginx实现负载均衡的项目实践
2022/03/18 Servers