jQuery--bind()、hover()、toggle()
1、事件绑定
bind()方法调用格式：bind(type,[data],fn)
第一个参数：事件类型，例如：click，blur，focus，mouseover，mouseout等
第二个参数：可选参数，作为event.data属性值传递给事件对象的额外数据对象
第三个参数：绑定处理函数
bind()实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #panel1{ width: 400px; background: #CBC9C9; border:1px solid black; } .content{ display: none; } .head{ margin: 0px; height: 30px; line-height: 30px; } </style> <script type="text/javascript" src='jquery-3.2.1.min.js'></script> <script type="text/javascript"> $(function(){ $('#panel1 h5.head').bind('click',function(){ if($(this).next('div.content').is(':visible')){ $(this).css('background','none').next('div.content').hide(); }else{ $(this).css('background','yellow').next('div.content').show(); } }); }); </script> </head> <body> <div id="panel1"> <h5 class="head">什么是jQuery？</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由JohnResig创建于2006年1月的开源项目。jQuery凭借见解的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式 </div> </div> </body> </html>
2、合成事件
1）、hover()--hover(enter,leave)方法用于模拟光标悬停事件,当光标移动到元素时，会触发指定的第一个函数（enter）；当光标移出这个元素的时候，会触发指定的第2个函数(leave)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #panel1{ width: 400px; background: #CBC9C9; border:1px solid black; } .content{ display: none; } .head{ margin: 0px; height: 30px; line-height: 30px; } </style> <script type="text/javascript" src='jquery-3.2.1.min.js'></script> <script type="text/javascript"> $(function(){ $('#panel1 h5.head').hover(function(){ $(this).css('background','yellow').next('div.content').show(); },function(){ $(this).css('background','none').next('div.content').hide(); }); }); </script> </head> <body> <div id="panel1"> <h5 class="head">什么是jQuery？</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由JohnResig创建于2006年1月的开源项目。jQuery凭借见解的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式 </div> </div> </body> </html>
2）、toggle()--toggle(fn1,fn2....fnN)该方法用于模拟鼠标连续点击事件,第1次单击元素，触发指定的第1个函数（fn1）；当再次单击同一个元素时，则触发指定的第2个函数（fn2）；如果有更多的函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。
