jQuery事件-div的显示隐藏及鼠标的移入移出http://www.cnblogs.com/liuyanmin/p/5146544.html

来源：互联网发布：生死狙击m1911伤害数据编辑：程序博客网时间：2024/05/22 06:43
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <title>jQuery事件-div的显示隐藏及鼠标的移入移出</title>  <style>  .header{      width:302px;      height:40px;      background:green;      font-size:20px;      margin-bottom: 0px;  }  .content{      width:300px;      border:1px solid #333;      background:#CCC;      display: none;      margin-top:0px;  }  </style>  </head>  <script type="text/javascript" src="jquery-1.11.1.js"></script>  <script type="text/javascript">      $(function (){          //显示隐藏          $(".header").click(function (){              var flag = $(".content").is(":hidden");              if(flag){                  $(".content").show();              }else{                  $(".content").hide();              }          });                    /*          //使用bind的绑定事件,跟上上面的效果是一样的          $(".header").bind("click", function (){              var flag = $(".content").is(":hidden");              if(flag){                  $(".content").show();              }else{                  $(".content").hide();              }          });          */          /*          //鼠标的移入移出          $(".header").mouseover(function (){              $(".content").show();          }).mouseout(function (){              $(".content").hide();          });          */          /*          //合成事件 hover()          $(".header").hover(function (){              $(".content").show();          },function (){              $(".content").hide();          });          */                });  </script>  <body>      <h5 class="header" align="center">什么是jQuery？</h5>      <div class="content">          Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，          它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），          jQuery2.0及后续版本将不再支持IE6/7/8浏览器。          jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，          并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，          而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。          jQuery能够使用户的html页面保持代码和html内容分离，也就是说，          不用再在html里面插入一堆js来调用命令了，只需要定义id即可。      </div>  </body>  </html>
阅读全文
0 0