Jquery(十一)事件

来源：互联网发布：防止刷短信验证码 php 编辑：程序博客网时间：2024/06/05 16:27

☆ window.on和$(document).ready()的区别

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title>window.on和$(document).ready()的区别</title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content=""><!--window.onload的测试--><!--  <script type="text/javascript">    function demo(){        alert("我是函数demo");    }    function demo2(){        alert("我是函数demo2");    }    window.onload=demo;    window.onload=demo2;  </script>  -->    <!--jQuery测试-->    <script type="text/javascript" src="jquery-1.6.4.min.js"></script>    <script type="text/javascript">        function abc(){            alert("函数abc");        }        function abc2(){            alert("函数abc2");        }        $(document).ready(abc);        $(document).ready(abc2);    </script> </head> <body> </body></html>

☆ 事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style type="text/css">    #dpanl{        width:300px;        height:300px;    }    .he{        background:orange;        font-size:30px;    }    #cen{        background:green;        display:none;    }  </style>  <script type="text/javascript" src="jquery-1.6.4.min.js"></script>  <!--  <script type="text/javascript">    $(document).ready(function(){        $(".he").bind("click",function(){            $(this).next().show();        });    });  </script>  --><!-- <script type="text/javascript">    $(document).ready(function(){        $(".he").bind("click",function(){            var a=$(this).next();            if(a.is(":visible")){                a.hide();            }else{                a.show();            }        });    });  </script>  --><!--<script type="text/javascript">    $(document).ready(function(){        $(".he").bind("mouseover",function(){            $(this).next().show();        });        $(".he").bind("mouseout",function(){            $(this).next().hide();        });    });  </script>  --><script type="text/javascript">    $(document).ready(function(){        $(".he").mouseover(function(){            $(this).next().show();        });        $(".he").mouseout(function(){            $(this).next().hide();        });    });  </script> </head> <body>    <div id="dpanl">        <div class="he">jQuery是什么?</div>        <div id="cen">         随着JavaScript、CSS、Ajax等技术的进步，越来越多的开发者将丰富多彩的程序及其功能进行封装，供其他人可以调用这些封装好的程序组件（框架）        jQuery是优秀的JavaScript框架，能方便的处理html文档、事件、动画以及Ajax交互</div>    </div> </body></html>

☆ 事件2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style type="text/css">    #dpanl{        width:300px;        height:300px;    }    .he{        background:orange;        font-size:30px;    }    #cen{        background:green;        display:none;    }    .abc{        background:#aaa;    }  </style><script type="text/javascript" src="jquery-1.6.4.min.js"></script><!--hover事件--><!--<script type="text/javascript">    $(document).ready(function(){        $(".he").hover(function(){            $(this).next().show();        },function(){            $(this).next().hide();        });    });</script>--><!--<script type="text/javascript">    $(document).ready(function(){        $(".he").toggle(function(){            $(this).next().show();        },function(){            $(this).next().hide();        });    });</script>--><!--<script type="text/javascript">    $(document).ready(function(){        $("#cen").slideToggle("slow");    });</script>--> <script type="text/javascript">    $(document).ready(function(){        $(".he").bind("click",function(){            var a=$(this).next();            if(a.is(":visible")){                a.hide();                $(".he").removeClass("abc");            }else{                a.show();                $(".he").addClass("abc");            }            //移除事件            $("#but").click(function(){                $(".he").unbind("click");            });        });    });  </script> </head> <body> <input type="button" id="but" value="移除事件"/>  <div id="dpanl">        <div class="he">jQuery是什么?</div>        <div id="cen">         随着JavaScript、CSS、Ajax等技术的进步，越来越多的开发者将丰富多彩的程序及其功能进行封装，供其他人可以调用这些封装好的程序组件（框架）        jQuery是优秀的JavaScript框架，能方便的处理html文档、事件、动画以及Ajax交互</div>    </div> </body></html>

0 0