2010.01.07——jquery之合成事件

2010.01.07——jquery之合成事件
1.hover()方法
hover(enter,leave)
用于模拟光标悬停事件，当光标移动到元素上时，会触发指定的第一个函数，当光标离开元素时，会触发第二个函数

例如：当点击按钮时，来切换显示隐藏下面的div

方法1：

$(funtion(){
	$('#bn').bind('mouseover',function(){
		$(this).next('div.content').show();
	});
	$('#bn').bind('mouseove',function(){
		$(this).next('div.content').hide();
	});
})

方法2：

$(function(){
	$('#bn').mouseover(function(){
		$(this).next('div.content').show();
	});
	$('#bn').mouseover(function(){
		$(this).next('div.content').hide();
	});
});

方法3:

$(function(){
	$('#bn').hover(function(){
		$(this).next('div.content').show();
	},function(){
		$(this).next('div.content').hide();
	});
});

2.toggle()方法
toggle(fn1,fn2,fn3...)
用于模拟鼠标连续单击事件，第一次单击元素，执行fn1,第二次单击元素,执行fn2。。。。。

例如：还是上面的例子，可以简写
方法1：

$(function(){
	$('#bn').bind("click",function(){
		var $content = $(this).next("div.content");
		if($content.is(":visible"){
			$content.hide();
		}else{
			$content.show();
		}
	});
})

方法2：

$(function(){
	$('#bn').toggle(function(){
		$(this).next("div.content").show();
	},function(){
		$(this).next("div.content").hide();
	});
});

toggle()方法在jquery中还有另外的一个作用：切换元素状态，如果元素时显示的，单击切换后就为隐藏，如果是隐藏，单击切换后就为可见的。
方法3：

$(function(){
	$('#bn').toggle(function(){
		$(this).next('div.content').toggle();
	},function(){
		$(this).next('div.content').toggle();
	});
})