jQuery事件处理（一）

浏览数：55 / 时间：2015年06月09日

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>jQuery 事件处理(一)</title>
  6     <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
  7     <script type="text/javascript">
  8     /*
  9     |——————————————————————————————————————
 10     1.ready()
 11         $(document).ready(function(){});
 12     2.ready()和window.load的区别
 13       （1）.ready()在DOM结构加载完成之后马上执行
 14         window.load在网页上所有元素全部加载ok后才会执行
 15         例如：一个图片网站有css，js，html和大量图片文件，建议使用ready方法。而不是使用window.load。会有更好的用户体验。
 16       （2）同一个网页，可以多个ready(),但是只能有一个生效的window.
 17         load方法。
 18     3.ready()方法的简写方法
 19         $(function(){});
 20     |——————————————————————————————————————
 21     jQuery事件处理方法
 22         blur([[data],fn])触发失去焦点
 23             $(function(){
 24                 $(‘:text‘).blur(function(){
 25                     alert("####");
 26                 });
 27             });
 28         change([[data],fn])当元素的值发生改变的时候会发生change事件
 29 
 30         click([[data],fn])
 31             $(‘div:eq(1)‘).click(function(){
 32                 $(this).css(‘background‘,‘red‘);
 33             });
 34         dblclick([[data],fn])
 35         error([[data],fn])
 36         focus([[data],fn])
 37         focusin([data],fn)
 38         focusout([data],fn)
 39         keydown([[data],fn])
 40         keypress([[data],fn])
 41         keyup([[data],fn])
 42            $(‘:text‘).change(function(){
 43                 $(‘#out‘).text($(this).val());
 44             });
 45         mousedown([[data],fn])
 46         mouseenter([[data],fn])
 47         mouseleave([[data],fn])
 48         mousemove([[data],fn])
 49         mouseout([[data],fn])
 50         mouseover([[data],fn])
 51         mouseup([[data],fn])
 52         resize([[data],fn])
 53         scroll([[data],fn])
 54         select([[data],fn])
 55         submit([[data],fn])
 56         unload([[data],fn])
 57     |--------------------------------
 58     事件切换
 59     hover([over,]out)
 60         一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
 61         $(‘div:last‘).hover(function(){
 62                 $(this).css(‘background‘,‘red‘);
 63             },function(){
 64                 $(this).css(‘background‘,‘green‘);
 65             });
 66     toggle(fn, fn2, [fn3, fn4, ...])
 67         用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。注意：必须绑定的是click事件！！！！！
 68         $(‘#out‘).toggle(function(){
 69                 $(this).css(‘background‘,‘red‘);
 70             },function(){
 71                 $(this).css(‘background‘,‘green‘);
 72             },function(){
 73                 $(this).css(‘background‘,‘white‘);
 74             },function(){
 75                 $(this).css(‘background‘,‘yellow‘);
 76             });
 77 
 78 
 79     |________________________________
 80 
 81     */
 82         $(function(){
 83             /*$(‘:text‘).keyup(function(){
 84                 var value = $.trim($(this).val());
 85                 if(value == ‘111‘){
 86                     $(‘#out‘).text(‘########‘);
 87                 }else{
 88                     $(‘#out‘).text(‘&&&&&&&&‘);
 89                 }
 90             });*/
 91             // $(‘div:last‘).mouseover(function(){
 92             //     $(this).css(‘background‘,‘red‘);
 93             // });
 94             
 95 
 96         });
 97     </script>
 98     <style type="text/css">
 99         #out{width:300px;height:400px;background:#c0c0c0;}
100         input{
101             width:250px;
102         }
103     </style>
104 </head>
105 <body>
106     <div id="in"><input type="text" name="in" value="请输入用户名">
107     <button>按钮</button>
108     </div>
109     <div id="out"></div>
110 </body>
111 </html>