jQuery hasClass()
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