如何使用jquery判断一个元素是否含有一个指定的类(class)

一、总结

一句话总结:可以用hasClass方法(专用)和is方法

1、is(expr|obj|ele|fn)的方法几个参数表示什么?

参数可以是表达式,可以是jquery对象,可以是元素,可以是函数

2、hasClass()和is()的关系是什么?

hasclass()

检查当前的元素是否含有某个特定的类,如果有,则返回true。

这其实就是 is("." + class)。

二、使用jquery判断一个元素是否含有一个指定的类(class)

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。


<html>
<head>
<styletype="text/css">
.redColor {
background:red;
}
.blueColor {
background:blue;
}
</style>
<scripttype="text/javascript"src="jquery-1.3.2.min.js"></script>
</head>
<body>
<h1>jQuery check if an element has a certain class</h1> <divclass="redColor">This is a div tag with class name of "redColor"</div> <p>
<buttonid="isTest">is('.redColor')</button>
<buttonid="hasClassTest">hasClass('.redColor')</button>
<buttonid="reset">reset</button>
</p>
<scripttype="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>

初始效果:

点击is('.redColor')后的效果:

点击hasClass('redColor')的效果与点击is('.redColor')后的效果相同,点击reset的效果与初始效果相同。

 
参考:使用jquery判断一个元素是否含有一个指定的类(class) - CSDN博客
https://blog.csdn.net/sunqian_happy/article/details/54409531
 
 

三、jquery的hasclass()和is()简介

1、hasclass()

检查当前的元素是否含有某个特定的类,如果有,则返回true。

这其实就是 is("." + class)。

描述:

给包含有某个类的元素进行一个动画。

HTML 代码:
<div class="protected"></div><div></div>
jQuery 代码:
$("div").click(function(){
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});

2、is()

is(expr|obj|ele|fn)

根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。

如果没有元素符合,或者表达式无效,都返回'false'。 '''注意:'''在jQuery 1.3中才对所有表达式提供了支持。在先前版本中,如果提供了复杂的表达式,比如层级选择器(比如 + , ~ 和 > ),始终会返回true

exprStringV1.0

字符串值,包含供匹配当前元素集合的选择器表达式。

jQuery objectobjectV1.6

现有的jQuery对象,以匹配当前的元素。

elementExpressionV1.6

一个用于匹配元素的DOM元素。

function(index)FunctionV1.6

一个函数用来作为测试元素的集合。它接受一个参数index,这是元素在jQuery集合的索引。在函数, this指的是当前的DOM元素。

参数expr 描述:

由于input元素的父元素是一个表单元素,所以返回true。

HTML 代码:
<form><input type="checkbox" /></form>
jQuery 代码:
$("input[type='checkbox']").parent().is("form")
结果:
true
 

如何使用jquery判断一个元素是否含有一个指定的类(class)的更多相关文章

  1. 怎么使用jquery判断一个元素是否含有一个指定的类(class)

    在jQuery中可以使用2种方法来判断一个元素是否包含一个确定的类(class).两种方法有着相同的功能.2种方法如下:(个人喜欢用hasClass()) 1.           hasClass( ...

  2. js和jquery判断该元素中是否有指定class

    <div class="test">test</div> var t = document.getElementsByClassName('test'); ...

  3. jQuery判断当前元素是第几个元素&获取第N个元素

    假设有下面这样一段HTML代码: <ul> <li>jQuery判断当前元素是第几个元素示例</li> <li>jQuery获取第N个元素示例</ ...

  4. javascript判断一个元素是另外一个元素的子元素

    javascript判断一个元素是另外一个元素的子元素用途有很多,最常用的就是当点击页面的空白处去执行某些操作,比如弹出层等. function isParent (obj,parentObj){ w ...

  5. js jquery 判断匹配元素是否存在

    jQuery 判断页面元素是否存在的代码 在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: 复制代码 ...

  6. [ jquery 过滤器 hasClass(class) ] 此方法用于在选择器的基础之上检查当前的元素是否含有某个特定的类,如果有,则返回true

    此方法用于在选择器的基础之上检查当前的元素是否含有某个特定的类,如果有,则返回true 实例: <!DOCTYPE html> <html lang='zh-cn'> < ...

  7. js 获取任意一个元素的任意一个样式属性的值

    //谷歌,火狐支持console.log(window.getComputedStyle(my$("dv"),null).left);//IE8支持console.log(my$( ...

  8. jQuery 判断页面元素是否存在的代码

    在原生的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

  9. jQuery判断当前元素显示状态并控制元素的显示与隐藏

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id") ...

随机推荐

  1. 5.QT制作编译器,可以简单支持中文编程

    学习了文件操作,那么先做一个自制的IDE吧,就是简单的读取,修改,保存文件,使用QT语言,附上github的代码:QT基本文件操作实现中文编程 截图: 运行效果

  2. 2.LINUX常用命令

    Linux 必备指令摘要一般用户指令/bin 指令 功能说明 范例 bash GNU Bouren-Again Shell bash shell_script cat 观看一般文本文件 cat fil ...

  3. POJ 3273 二分答案

    思路:二分答案经典题吧....注意边界就OK了 //By SiriusRen #include <cstdio> #include <algorithm> using name ...

  4. 【DotNetNuke介绍】

    简介 DotNetNuke(以下简称DNN)的最终目的是创建一个门户的框架平台,这个平台可以为开发者增添模块搭建应用程序提供坚实的可靠的支持.应用程序的一个关键的功能就是数据存取..NET Frame ...

  5. js thousand separator and change td content

    js thousand seprator and change TD content // integer function addCommas(n){ })/; return String(n).r ...

  6. dedecms后台登录,与后台界面去除多于的样式

    http://jingyan.baidu.com/article/597035520f4edc8fc00740f7.html

  7. vue下载模板、导出excle

    1.下载模板是 下载模版比较简单,就是跳一个新的页面 2.导出excle 就是get请求,把自己要导出的参数一一拼接起来 }

  8. 洛谷1073 NOIP2009 最优贸易

    题目大意 C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一部分为双向通行的道路,双 ...

  9. PHP -Casbin: 支持 ACL、RBAC、ABAC 多种模型的 PHP 权限管理框架

    PHP-Casbin 是一个用 PHP 语言打造的轻量级开源访问控制框架( https://github.com/php-casbin... ),目前在 GitHub 开源.PHP-Casbin 采用 ...

  10. 104.virtual虚函数多态与异构数据结构

    #include "mainwindow.h" #include <QApplication> #include <list> #include <Q ...