使用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+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
JavaScript日历实现代码
Sep 12 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 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无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
input 高级限制级用法
2009/03/26 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
原生js实现分页效果
2020/09/23 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
Python help()函数用法详解
2014/03/11 Python
Python ftp上传文件
2016/02/13 Python
git进行版本控制心得详谈
2017/12/10 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
python实现单链表的方法示例
2019/09/03 Python
python打开使用的方法
2019/09/30 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
Python内置函数property()如何使用
2020/09/01 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
如何进行Linux分区优化
2016/09/13 面试题
单位人事专员介绍信
2014/01/11 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers