jQuery里鼠标事件的一些简单实现

自己无聊时写的一些小例子,目的是为了印证一些小细节。。供以后查看【查看时去掉单个是注释就行】

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQueryTest</title>
<style type="text/css">
	.highlight{
		background: #ff3300;
		font-size: 20px;
	}
</style>
<script src="jquery1.9.1.js" ></script> 
</head>

<body>
	<div id="panel">
		<h5 class="head">什么是jQuery</h5>
		<div class="content">
			jquery是继Prototype之后有一个邮箱的JavaScript。。。。。
		</div>
	</div>
	<button id="bt">请点击这里,来切换不同的背景颜色</button>
	<script type="text/javascript">

		/*//鼠标点击事件
		$(function(){
			$("#panel h5.head").bind("click",function(){
				var $content=$(this).next("div.content");
				if($content.is(":visible")){
					//$content.hide();
					$(this).addClass("highlight");

				}else{
					$content.hide();
				}
			});
		});*/


		/*//鼠标移动事件1 mouseover mouseout
		$("#panel h5.head").bind("mouseover",function(){
			$(this).next("div.content").show();
		});
		$("#panel h5.head").bind("mouseout",function(){
			$(this).next("div.content").hide();
		});*/


		/*//鼠标移动事件2 mouseover mouseout
		$("#panel h5.head").mouseover(function(){
			$(this).next("div.content").show();
		});
		$("#panel h5.head").mouseout(function(){
			$(this).next("div.content").hide();
		});
*/

		/*//鼠标的悬停事件 hover(函数1,函数2)
		$(function(){
			$(".head").hover(function(){
				$(this).next(".content").show().css("background-color","red");
			},function(){
				$(this).next(".content").hide();
			})
		});*/


		/*//鼠标连续单击事件 toggle() 这个方法有点诡异。。。
		$(function(){
			$("#panel h5.head").toggle(function(){
				$(this).next(".content").css("background-color","red");
			},function(){
				$(this).next(".content").css("background-color","green");
			});
		});*/



		/*这个方法有点诡异。。。  也可能是jquery的版本有点高  不支持。。
		$(function(){
		    $("#bt").toggle(function(){
		    $("body").css("background-color","green");},
		    function(){
		    $("body").css("background-color","red");},
		    function(){
		    $("body").css("background-color","yellow");}
		  	);
		});*/

	</script>
</body>
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值