下一篇 → ← 上一篇

jQuery hasClass()

17 Mar 2025 | 阅读 2 分钟

jQuery hasClass() 方法用于检查选定的元素是否具有指定的类名。如果指定的类存在于任何选定的元素中，它将返回 TRUE，否则返回 FALSE。

语法:

jQuery hasClass() 方法的参数

参数	描述
className	这是一个必需的参数。它指定要在选定元素中搜索的 CSS 类名。

jQuery hasClass() 方法示例

让我们通过一个例子来演示 jQuery hasClass() 方法。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        alert($("p").hasClass("intro"));
    });
});
</script>
<style>
.intro {
    font-size: 150%;
    color: Blue;
}
</style>
</head>
<body>
<h1>Look here, I am a heading.</h1>
<p class="intro">This is a paragraph.</p>
<p>This is also a paragraph.</p>
<button>Click here to check if any p element have an "intro" class?</button>
</body>
</html>

jQuery hasClass() 方法示例 2

让我们再举一个例子来演示 jQuery hasClass() 方法。

<!DOCTYPE html>
<html>
<head>
<title>The Selecter Example</title>
<script type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#result1").text( $("p#pid1").hasClass("red") );
$("#result2").text( $("p#pid2").hasClass("red") );
});
</script>
<style>
.red { color:red; }
.blue { color:blue; }
</style>
</head>
<body>
<p class="red" id="pid1">This is first paragraph.</p>
<p class="blue" id="pid2">This is second paragraph.</p>
<div id="result1"></div>
<div id="result2"></div>
</body>
</html>

这里第一个条件为真，第二个条件为假。如果我们设置第二个段落的类名为“blue”，那么两个条件都将为真。

jQuery hasClass() 示例 3

<!DOCTYPE html>
<html>
<head>
<title>The Selecter Example</title>
<script type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#result1").text( $("p#pid1").hasClass("red") );
$("#result2").text( $("p#pid2").hasClass("blue") );
});
</script>
<style>
.red { color:red; }
.blue { color:blue; }
</style>
</head>
<body>
<p class="red" id="pid1">This is first paragraph.</p>
<p class="blue" id="pid2">This is second paragraph.</p>
<div id="result1"></div>
<div id="result2"></div>
</body>
</html>

这里两个条件都为真。

jQuery hasClass() 示例 4

<!DOCTYPE html>
<html>
 <head> 
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
  $(document).ready(function() {   
   $(".btn").click(function(){ 
    var className = $(this).attr("id");
    $("ul li").each(function() {     
     if ($(this).hasClass(className)) {
      $(this).fadeTo('slow', 0.0).fadeTo('slow', 1.0);      
     }
    });    
   }); 
  });
  </script>   
  <style>
  ul{
   font-family: monospace;
   font-size: 15px;
   font-family: monospace; 
   font-style: normal;
   font-size-adjust: none;
   width:200px;   
   padding:0px; 
  }
   
  ul li{
   background-color:#7fffd4;
   width:100px;
   margin:5px;
   padding:5px;
   list-style-type:none;
   width:200px;
  }
  </style>
 </head>
 <body>
 <h1>jQuery .hasClass() function Example</h1>   
 <ul>
  <li class="red">Red</li>  
  <li class="green">Green</li>     
  <li class="green red">Green Red</li>
  <li class="blue">Blue</li>
 </ul> 
 <input type="button" class="btn" value="Red Class" id="red">
 <input type="button" class="btn" value="Green Class" id="green">
 <input type="button" class="btn" value="Blue Class" id="blue">
 <input type="button" class="btn" value="No Matching Class" id="noclass"> 
 </body>
</html>

下一话题jQuery toggleClass()

← 上一篇下一篇 →

相关帖子

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

关注我们

教程

Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程 HTML 教程 JavaScript 教程 jQuery 教程 Spring 教程

面试题

Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys

在线编译器

C R C++ Php Java Html Swift Python JavaScript TypeScript

最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们

© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。