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>
时间： 2024-10-29 19:05:51