zoukankan      html  css  js  c++  java
  • jQuery事件-div的显示隐藏及鼠标的移入移出

    <!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{
    	302px;
    	height:40px;
    	background:green;
    	font-size:20px;
    	margin-bottom: 0px;
    }
    .content{
    	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>

  • 相关阅读:
    PayPal(贝宝)支付接口、文档、IPN
    C# LiveUpdate.exe实现文件在线更新升级
    C# 邮件发送
    VisualStudio11预览
    zen coding for visual studio 2010(vs2010)
    淘宝API开发系列淘宝API相关了解
    多年积累
    专业淘友必不可少的资料,教你如何玩转淘宝!
    极速理解设计模式系列
    ASP.NET开发人员经常使用的三十三种代码
  • 原文地址:https://www.cnblogs.com/liuyanmin/p/5146544.html
Copyright © 2011-2022 走看看