标签：
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>
标签：
原文地址：http://www.cnblogs.com/xiaohei1942/p/4440834.html
