jQuery hasClass()

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

语法:

$(selector).hasClass(classname)

jQuery hasClass()方法的参数

参数	说明
className	这是强制性参数。它指定要在所选元素中搜索的CSS类的名称。

jQuery hasClass()方法的示例

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

<!DOCTYPE html>
<html>
<head>
<script src="/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>

输出:

Look here, I am a heading.

This is a paragraph.

This is also a paragraph.

jQuery hasClass()方法示例2

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

<!DOCTYPE html>
<html>
<head>
<title>The Selecter Example</title>
<script type="text/javascript" src="/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>

输出:

This is first paragraph.

This is second paragraph.

注意:第一个条件为true，第二个条件为false。如果我们设置第二段的类名是" blue"？那么这两个条件都将成立。

jQuery hasClass()示例3

<!DOCTYPE html>
<html>
<head>
<title>The Selecter Example</title>
<script type="text/javascript" src="/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>

输出:

This is first paragraph.

This is second paragraph.

这两个条件都成立。

jQuery hasClass()示例4

<!DOCTYPE html>
<html>
<head>
  <script src="/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 .hasClass() function Example

Red
Green
Green Red
Blue

找工作要求35岁以下，35岁以上的程序员都干什么去了？

长久以来，一直有一个问题困扰着技术人——如何打破“程序员的35岁职业魔咒”，这一天迟早会到来，或早或晚。

或许是选错了行业，程序员薪水虽高，但光鲜的外表下，背后的苦衷只有自己知道。三十多岁本该是一个人事业的黄金期，但技术变化日新月异，行业竞争异常残酷，对一个企业来说，永远有比你更年轻、劳动成本更低的人可以选择，这让你的中年危机提前到来。破局的智慧可以看看这本书！>>

<< jQuery addClass() jQuery toggleClass() >>

昵称：邮箱：