jquery-11 jquery中的事件切换如何实现
一、总结
一句话总结：事件切换hover()和toggle()函数。参数两个，都是函数，依次执行两个函数。
1、如何实现单击切换图片？
用toggle()方法，参数为两函数
26 $('img').toggle( 27 function(){ 28 this.src='b.png'; 29 }, 30 function(){ 31 this.src='a.png'; 32 } 33 );
2、如何实现谋元素鼠标移入和移出执行不同的函数？
用hover()方法
26 $('img').hover( 27 function(){ 28 this.src='b.png'; 29 }, 30 function(){ 31 this.src='a.png'; 32 } 33 );
3、如何实现某个元素交替执行不同的方法？
用toggle()方法，参数为两函数
26 $('img').toggle( 27 function(){ 28 this.src='b.png'; 29 }, 30 function(){ 31 this.src='a.png'; 32 } 33 );
二、jquery中的事件切换如何实现
4.事件切换
hover();
toggle();
toggle循环单击
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>index</title>
6 <style>
7 #div1{
8 position: absolute;
9 top:0px;
10 left:0px;
11 border-radius:256px;
12 width:256px;
13 height:256px;
14 background: #ccc;
15 overflow: hidden;
16 }
17 </style>
18 <script src="jquery.js"></script>
19 </head>
20 <body>
21 <div id="div1">
22 <img src="a.png">
23 </div>
24 </body>
25 <script>
26 $('img').toggle(
27 function(){
28 this.src='b.png';
29 },
30 function(){
31 this.src='a.png';
32 }
33 );
34 </script>
35 </html>
循环移入和移出
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>index</title>
6 <style>
7 #div1{
8 position: absolute;
9 top:0px;
10 left:0px;
11 border-radius:256px;
12 width:256px;
13 height:256px;
14 background: #ccc;
15 overflow: hidden;
16 }
17 </style>
18 <script src="jquery.js"></script>
19 </head>
20 <body>
21 <div id="div1">
22 <img src="a.png">
23 </div>
24 </body>
25 <script>
26 $('img').hover(
27 function(){
28 this.src='b.png';
29 },
30 function(){
31 this.src='a.png';
32 }
33 );
34 </script>
35 </html>
