使用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 相关文章推荐
学习jquery之一
Apr 27 Javascript
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
详解Node.js开发中的express-session
May 19 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 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实现今天是星期几的几种写法
2013/09/26 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
php浏览历史记录的方法
2015/03/10 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
vue 项目常用加载器及配置详解
2018/01/22 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
Python3 Random模块代码详解
2017/12/04 Python
基于python实现简单日历
2018/07/28 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
如何将字串String转换成整数int
2015/02/21 面试题
小学阳光体育活动总结
2014/07/05 职场文书
商场促销活动策划方案
2014/08/18 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
python Polars库的使用简介
2021/04/21 Python
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby