jQuery hasClass() jQueryhasClass()|jQuery

本文概述

jQuery hasClass()方法的参数
jQuery hasClass()方法的示例
jQuery hasClass()方法示例2
jQuery hasClass()示例3
jQuery hasClass()示例4

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

$(selector).hasClass(classname)

jQuery hasClass()方法的参数

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

jQuery hasClass()方法的示例让我们以一个示例来演示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()】立即测试
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>

立即测试
在这里, 第一个条件为true, 第二个条件为false。如果我们设置第二段的类名是“ 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="http://www.srcmini.com/Red Class" id="red"> < input type="button" class="btn" value="http://www.srcmini.com/Green Class" id="green"> < input type="button" class="btn" value="http://www.srcmini.com/Blue Class" id="blue"> < input type="button" class="btn" value="http://www.srcmini.com/No Matching Class" id="noclass"> < /body> < /html>

立即测试