使用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:void(0)的真正含义实例分析
Aug 20 Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
vuex实现简易计数器
Oct 27 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
php下使用以下代码连接并测试
2008/04/09 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
js实现旋转木马效果
2017/03/17 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
python动态规划算法实例详解
2020/11/22 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
食堂厨师岗位职责
2014/08/25 职场文书
规范化管理年活动总结
2014/08/29 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android