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>