jQuery中事件的学习
Posted Arther_J
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery中事件的学习相关的知识，希望对你有一定的参考价值。
刚学习了jQuery中的事件，主要通过bind(),toggle(),hover()来主要实现，下面先说一说关于bind的想关要点。
1、bind方法。
bind方法的主要参数为bind(type,fn).自我感觉参数的传入形式有点像java的反射机制（自我感觉，不知道是否严谨）。
当然相关实现比较麻烦自我感觉。示例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>bind</title> 8 <meta name="author" content="Administrator" /> 9 <script src="script/jquery-1.12.2.js"></script> 10 <style type="text/css"> 11 .content { 12 display: none; 13 } 14 </style> 15 <!-- Date: 2016-03-25 --> 16 </head> 17 <body> 18 <div id="panel"> 19 <h2 class="head">什么是jQuery？</h2> 20 <div class="content"> 21 JQuery是继prototype之后又一个优秀的javascript库。它是轻量级的js库 ，它兼容CSS3， 22 还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及 23 后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用） 24 、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是， 25 它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 26 jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了， 27 只需要定义id即可。 28 </div> 29 </div> 30 <script type="text/javascript"> 31 $(function() { 32 $("#panel h2.head").bind("mouseover",function() { 33 $(this).next().show(); 34 }).bind("mouseout", function() { 35 $(this).next().hide(); 36 }); 37 }); 38 </script> 39 </body> 40 </html>
这个例子主要是鼠标悬停和离开后不同的效果。
2、toggle方法
toggle方法的主要形式为toggle(fn1,fn2,fn3.....fnn);可以这么理解，这个方法是模拟鼠标的点击动作，当鼠标点一下，就会触发fn1函数的相关动作，当鼠标点第二下，就会触发fn2函数的x相关动作以此类推。如果参数列表中只有两个函数，那么当用户点击第三下时，这时还是会重新触发第一个动作（类似于循环来进行）。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>bind</title> 8 <meta name="author" content="Administrator" /> 9 <script src="script/jquery-1.12.2.js"></script> 10 <style type="text/css"> 11 .content { 12 display: none; 13 } 14 </style> 15 <!-- Date: 2016-03-25 --> 16 </head> 17 <body> 18 <div id="panel"> 19 <h2 class="head">什么是jQuery？</h2> 20 <div class="content"> 21 JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3， 22 还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及 23 后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用） 24 、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是， 25 它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 26 jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了， 27 只需要定义id即可。 28 </div> 29 </div> 30 <script type="text/javascript"> 31 $(function() { 32 $("#panel h2.head").click(function() { 33 $(this).toggle(function() { 34 $(this).next().show(); 35 }); 36 }); 37 }); 38 </script> 39 </body> 40 </html>
3、hover方法
hover方法的形式为hover(enter,leave);可以理解为当鼠标悬停时运行enter所在的函数，当鼠标离开时运行leave所在的函数。代码演示如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>bind</title> 8 <meta name="author" content="Administrator" /> 9 <script src="script/jquery-1.12.2.js"></script> 10 <style type="text/css"> 11 .content { 12 display: none; 13 } 14 </style> 15 <!-- Date: 2016-03-25 --> 16 </head> 17 <body> 18 <div id="panel"> 19 <h2 class="head">什么是jQuery？</h2> 20 <div class="content"> 21 JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3， 22 还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及 23 后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用） 24 、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是， 25 它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 26 jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了， 27 只需要定义id即可。 28 </div> 29 </div> 30 <script type="text/javascript"> 31 $(function() { 32 $("#panel h2.head").hover(function() { 33 $(this).next().show(); 34 }, function() { 35 $(this).next().hide(); 36 }); 37 }); 38 </script> 39 </body> 40 </html>
以上是关于jQuery中事件的学习的主要内容，如果未能解决你的问题，请参考以下文章