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>