1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>基础事件</title> 6 <script type="text/javascript" src="jquery-1.10.1.js"></script> 7 <script type="text/javascript" src="demo.js"></script> 8 <link rel="stylesheet" href="style.css" type="text/css" /> 9 </head> 10 <body> 11 12 <div style="200px;height:200px;background:green;"> 13 14 </div> 15 16 <strong></strong> 17 18 </body> 19 </html>
事件：
1 $(function () { 2 3 /* 4 $('div').mouseover(function () { 5 $(this).css('background', 'red'); 6 }).mouseout(function () { 7 $(this).css('background', 'green'); 8 }); 9 10 $('div').mouseenter(function () { 11 $(this).css('background', 'red'); 12 }).mouseleave(function () { 13 $(this).css('background', 'green'); 14 }); 15 16 $('div').mouseover(function() { //over会触发子节点 17 $('strong').html(function (index, value) { 18 return value + '1'; 19 }); 20 }); 21 22 $('div').mouseenter(function() { //enter不会触发子节点 23 $('strong').html(function (index, value) { 24 return value + '1'; 25 }); 26 }); 27 28 $('div').mouseout(function() { 29 $('strong').html(function (index, value) { 30 return value + '1'; 31 }); 32 }); 33 34 $('div').mouseleave(function() { 35 $('strong').html(function (index, value) { 36 return value + '1'; 37 }); 38 }); 39 40 $('input').keydown(function () { 41 alert('键盘'); 42 }); 43 44 $('input').keyup(function () { 45 alert('键盘'); 46 }); 47 48 $('input').keydown(function (e) { 49 alert(e.keyCode); 50 }); 51 52 $('input').keypress(function (e) { 53 alert(e.charCode); 54 }); 55 56 $('input').focus(function () { 57 alert('光标激活'); 58 }); 59 60 $('input').blur(function () { 61 alert('光标丢失'); 62 }); 63 64 $('input').focusout(function () { 65 alert('光标丢失'); 66 }); 67 68 $('div').focus(function () { //focus和blur必须是当前元素才能激活 69 alert('光标激活'); 70 }); 71 72 $('div').focusin(function () { //focusin和focusout可以是子元素激活 73 alert('光标激活'); 74 }); 75 76 $('div').focusout(function () { 77 alert('光标丢失'); 78 }); 79 80 $('div').hover(function () { 81 $(this).css('background', 'red'); 82 }, function () { 83 $(this).css('background', 'green'); 84 }); 85 86 //$('div').toggle('slow'); 87 88 $('div').toggle(function () { 89 $(this).css('background', 'red'); 90 }, function () { 91 $(this).css('background', 'blue'); 92 }, function () { 93 $(this).css('background', 'green'); 94 }); 95 96 */ 97 98 99 var flag = 1; 100 $('div').click(function () { 101 if (flag == 1) { 102 $(this).css('background', 'red'); 103 flag = 2; 104 } else if (flag == 2) { 105 $(this).css('background', 'blue'); 106 flag = 3; 107 } else if (flag == 3) { 108 $(this).css('background', 'green'); 109 flag = 1; 110 } 111 }); 112 113 114 115 });