使用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 IE 浏览器判定代码
Mar 21 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
JS实现网站吸顶条
Jan 08 Javascript
vue实现购物车列表
Jun 30 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 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
基于MySQL体系结构的分析
2013/05/02 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
python爬虫爬取网页表格数据
2018/03/07 Python
python定时关机小脚本
2018/06/20 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
Jar包的作用是什么
2014/03/30 面试题
银行开业庆典方案
2014/02/06 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
2015年女职工工作总结
2015/05/15 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
一篇文章带你复习java知识点
2021/06/28 Java/Android
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js