jQuery之toggleClass解析

toggleClass(classname[,boolean]),其中第二个参数是可选的。当只传递一个参数时,toggleClass的原理如下:首先判断选择器是否有classname,如果有则动用removeClass(classname);否则动用addClass。当传递第二个参数(true)时,相当于调用addClass(classname);第二个参数传递(false)时,相当于调用removeClass(classname)。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 demo1
  $("button").click(function(){
    $("p").toggleClass("main");
    alert($("p").hasClass("main"));
  });

  demo2
  $("button").click(function(){
    var $p = $("p");
    var is_main_class = $p.hasClass("main");
    if(is_main_class == true){
       $p.removeClass("main");
    }else{
       $p.addClass("main");
   }
  });

  demo3
  $("button").click(function(){
    $("p").toggleClass("main");
  });


});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head>

<body>
<h1 id="h1">This is a heading</h1>
<p class="main">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
</body>
</html>





你可能感兴趣的:(jquery)