使用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 一些用法小结
Sep 11 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
vue项目中axios使用详解
Feb 07 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 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处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
extjs之去除s.gif的影响
2010/12/25 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
js实现圆盘记速表
2015/08/03 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
Angular封装表单控件及思想总结
2019/12/11 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
详解Django中的过滤器
2015/07/16 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
手写一个python迭代器过程详解
2019/08/27 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
css3 transform属性详解
2014/09/30 HTML / CSS
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
诚信考试倡议书
2014/04/15 职场文书
商场促销活动策划方案
2014/08/18 职场文书
新入职员工工作总结
2015/10/15 职场文书
初二物理教学反思
2016/02/19 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript