基础事件（下）

来源：互联网发布：大数据运营平台编辑：程序博客网时间：2024/06/16 22:51

 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="width: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 });

0 0