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;
}
})
*/
});