使用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 面向对象编程(2) 定义类
May 18 Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
js尾调用优化的实现
May 23 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
PHP pear安装配置教程
2016/05/14 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
TensorFlow损失函数专题详解
2018/04/26 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
python线性插值解析
2020/07/05 Python
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
大学校园毕业自我鉴定
2014/01/15 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
春节晚会主持词
2014/03/24 职场文书
食品安全责任书
2014/04/15 职场文书
高中教师个人工作总结
2015/02/10 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫