jq中的toggle和toggleClass

最近用到元素类的切换和div的显示与隐藏，用愚蠢的方法做完了项目，才发现有更简洁的方法。

下面是css和html部分：

<style>        div{            background-color: black;            width:300px;            height: 300px;        }        .one{            background-color: red;        }    </style>

 <div></div>    <button id='but'>click me</button>

（1）原始情况下我们如果要想触发事件隐藏一个div，应该是这样的:：

 $('#but').click(function(){        if($('div').css('display')=='block'){            $('div').css('display','none');        }else{            $('div').css('display','block');        }    });

有了toggle方法之后，简化成如下：

$('#but').click(function(){        $('div').toggle('slow');  //隐藏或显示元素，如果当前div元素是隐藏的，则显示，如果是显示的，则隐藏（可设置隐藏显示的快慢变化）    });

（2）原始情况下我们如果想通过事件触发给元素一个class，再次触发时删除该类，应该是这样的：

$('#but').click(function(){        if($('div').hasClass('one')){            $('div').removeClass('one');        }else{            $('div').addClass('one');        }    });

有了toggleClass方法之后，简化成如下：

 $('#but').click(function(){        $('div').toggleClass('one');  //类切换，如有当前div元素有one这个类，则去掉，没有则加上    });

（3）在jQ框架的1.9版本之前（不包括1.9），toggle还有一个能力，就是顺序执行其参数（函数）的能力，如下：

$('#but').toggle(   //千万注意，这个方法只有1.9版本之前的jq才支持，1.9及其之后的版本jq插件取消了此方法和live方法        function(){            $('div').css('background-color','green');},        function(){            $('div').css('background-color','red');},        function(){            $('div').css('background-color','yellow');        }    );

当#but按钮被点击第一次时，div的背景色变为green，被点击第二次时背景色变为red，被点击第三次时背景色变为yellow，被点击第四次时又重新轮回，变为green，如此循环。