第08章基础事件（下）

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基础事件</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<!--
<input type="text" value="" />

<div style="width:200px; height:200px; background:green;">
	<p style=" width:100px; height:100px; background:red;"></p>
</div>

<strong></strong>

<div style="width:200px; height:200px; background:green;">
	<input type="text" value="" />
</div>
-->
<div style="width:200px; height:200px; background:green;">
</div>
</body>
</html>

demo.js

$(function(){
	/*
	$('div').mouseover(function(){
		$(this).css('background','red');	
	}).mouseout(function(){
		$(this).css('background','green');	
	});
	
	$('div').mouseenter(function(){
		$(this).css('background','red');	
	}).mouseleave(function(){
		$(this).css('background','green');	
	});
	
	$('div').mouseover(function(){	//over 会触发子节点
		$('strong').html(function(index,value){
			return value + '1';
		});
	});
	
	$('div').mouseenter(function(){	//enter 不会触发子节点
		$('strong').html(function(index,value){
			return value + '1';
		});
	});
	
	$('div').mouseout(function(){	//out 有层次就会产生问题
		$('strong').html(function(index,value){
			return value + '1';
		});
	});
	
	$('div').mouseleave(function(){	//out 有层次也不会产生问题
		$('strong').html(function(index,value){
			return value + '1';
		});
	});
	
	$('input').keydown(function(){
		alert('键盘')
	});
	
	$('input').keyup(function(){
		alert('键盘')
	});
	
	$('input').keydown(function(e){
		alert(e.keyCode);
	});
	
	$('input').keypress(function(e){
		alert(e.charCode);
	});
	
	$('input').focus(function(){
		alert('光标激活');
	});
	
	$('input').blur(function(){
		alert('光标丢失');
	});
	
	$('input').focusin(function(){
		alert('光标激活');
	});
	
	$('input').focusout(function(){
		alert('光标丢失');
	});
	
	//.focus() 和 .blur() 分别表示光标激活和丢失，事件触发时机是当前元素。而.focusin() 和 .focusout()
	//也表示光标激活和丢失，但事件触发时机可以是子元素。
	
	$('div').focus(function(){//.focus() 和 .blur()必须是当前元素才能激
		alert('光标激活');
	});
	
	$('div').focusin(function(){//.focusin() 和 .focusout()可以是子元素激活
		alert('光标激活');
	});
	
	$('div').focusout(function(){
		alert('光标丢失');
	});
	
	$('div').blur(function(){
		alert('光标丢失');
	});
	
	$('div').hover(function(){
		$(this).css('background','red');	
	},function(){
		$(this).css('background','green');	
	});
	//注意，.hover()方法是结合了.mouseenter()方法和 
	//.mouseleave()方法，并非 .mouseover()和.mouseout()方法
	
	//$('div').toggle('slow');
	
	$('div').toggle(function(){
		$(this).css('background','red');	
	},function(){
		$(this).css('background','blue');	
	},function(){
		$(this).css('background','green');	
	});
	
	var flag = 1;
	$('div').click(function(){
		if(flag == 1){
			$(this).css('background','red');
			flag = 2;	
		}else if(flag == 2){
			$(this).css('background','blue');
			flag = 3;	
		}else{
			$(this).css('background','green');	
			flag = 1;
		}
	})
	*/	
});

第08章 基础事件（下）

猜你喜欢

第08章基础事件（下）