- <!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>
JQuery鼠标 点击显示 隐藏 和 鼠标移入 显示 移出隐藏 效果
猜你喜欢
转载自blog.csdn.net/weixin_41883384/article/details/80266749
今日推荐
周排行