jQuery hasClass()方法

jQuery hasClass()方法用于检查指定元素是否具有指定的类名。如果所选元素中的任何一个包含指定的类，则返回TRUE，否则返回FALSE。

语法 :

$(selector).hasClass(classname)

JQuery hasClass()方法的参数

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

jQuery hasClass()方法示例1

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

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/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="http://ajax.googleapis.com/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="http://ajax.googleapis.com/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="http://ajax.googleapis.com/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>