[Jquery]事件的切换和删除

来源：互联网发布：java qq2007.jar 编辑：程序博客网时间：2024/04/29 23:18

1.事件的切换问题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>切换事件hover</title>    <script type="text/javascript"             src="Jscript/jquery-1.4.2-vsdoc.js">    </script>    <script type="text/javascript"             src="Jscript/jquery-1.4.2.js">    </script>    <style type="text/css">           body{font-size:13px}            .clsFrame{border:solid 1px #666;width:220px}           .clsFrame .clsTitle{background-color:#eee;padding:5px;font-weight:bold}           .clsFrame .clsContent{padding:5px;display:none}    </style>    <script type="text/javascript">        $(function() {            $(".clsTitle").hover(function() {                $(".clsContent").show();            }, function() {                $(".clsContent").hide();            })        })    </script></head><body>     <div class="clsFrame">          <div class="clsTitle">jQuery简介</div>          <div class="clsContent">  jQuery是由美国人John Resig于2006年创建的一个开源项目，它的主旨是：以更少的代码，实现更多的功能（Write less，do more）。</div>        </div></body></html>

2.事件的删除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>移除事件unbind</title>    <script type="text/javascript"             src="Jscript/jquery-1.4.2-vsdoc.js">    </script>    <script type="text/javascript"             src="Jscript/jquery-1.4.2.js">    </script>    <style type="text/css">           body{font-size:13px}            .btn {border:#666 1px solid;padding:2px;width:80px;           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}           div{line-height:1.8em}    </style>    <script type="text/javascript">        $(function() {            //自定义事件            function oClick() {                 $("#divTip").append("<div>按钮一的单击事件</div>");            }            //绑定单击事件            $("input:eq(0)").bind("click", oClick);            //绑定自定义事件            $("input:eq(1)").bind("click", function() {                 $("#divTip").append("<div>按钮二的单击事件</div>");            });             $("input:eq(2)").bind("click", function() { //移除全部单击事件                $("input").unbind("click",oClick);            });        })    </script></head><body>     <div>         <input id="Button1" type="button" value="按钮一" class="btn" />         <input id="Button2" type="button" value="按钮二" class="btn"/>         <input id="Button3" type="button" value="删除事件" class="btn"/>     </div>     <div id="divTip" style="padding-top:10px"></div></body></html>

0 0