Jquery(十一)事件

xiaoxiao2021-02-27  348

☆ 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>
转载请注明原文地址: https://www.6miu.com/read-4622.html

最新回复(0)