jquery-10 jquery中的绑定事件和解绑事件的方法是什么

一、总结

一句话总结：bind(); unbind(); one();

1、 jquery中的绑定事件和解绑事件的方法是什么？

bind(); unbind();

24 i=0;
25 $('button').eq(0).click(function(){
26     $('img').bind('click',function(){
27         if(i%2==0){
28             this.src='b.png';
29         }else{
30             this.src='a.png';
31         }
32         i++;
33     });
34 });
35 
36 $('button').eq(1).click(function(){
37     // $('img').unbind('click');
38     $('img').unbind();
39 });

2、one()方法是什么意思？

给元素绑定事件，但是这个事件执行一次就消失

26     $('img').one('click',function(){

3、bind(); unbind(); one();方法的参数是什么？

第一个参数是事件的字符串，第二个参数是匿名函数

26     $('img').one('click',function(){

26     $('img').bind('click',function(){

4、点赞功能有什么注意事项？

前端和后端都要实现点赞了就不能再点了的效果

23 i=0;
24 $('button').click(function(){
25     if(i==0){
26         val=parseInt($('span').html())+1;
27         $('span').html(val);
28         $(this).css({'background':'#00f','color':'#fff'});
29     }else{
30         alert('您已经点过赞了，不要贪杯噢!');    
31     }
32     i++;
33 });

二、jquery中的绑定事件和解绑事件的方法是什么

1、相关知识

2.事件处理
bind();
unbind();
one();

[实例:点赞功能]
[实例:鼠标拖动功能]

2、代码

只绑定一次事件

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9             margin:0px;
10             padding:0px;
11         }
12     </style>
13     <script src="jquery.js"></script>
14 </head>
15 <body>
16     <div>
17         <img src="a.png" alt="">
18     </div>    
19     <br>
20     <button>添加单击事件</button>
21     <button>删除单击事件</button>
22 </body>
23 <script>
24 i=0;
25 $('button').eq(0).click(function(){
26     $('img').one('click',function(){
27         if(i%2==0){
28             this.src='b.png';
29         }else{
30             this.src='a.png';
31         }
32         i++;
33     });
34 });
35 </script>
36 </html>

绑定事件和解除绑定事件

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9             margin:0px;
10             padding:0px;
11         }
12     </style>
13     <script src="jquery.js"></script>
14 </head>
15 <body>
16     <div>
17         <img src="a.png" alt="">
18     </div>    
19     <br>
20     <button>添加单击事件</button>
21     <button>删除单击事件</button>
22 </body>
23 <script>
24 i=0;
25 $('button').eq(0).click(function(){
26     $('img').bind('click',function(){
27         if(i%2==0){
28             this.src='b.png';
29         }else{
30             this.src='a.png';
31         }
32         i++;
33     });
34 });
35 
36 $('button').eq(1).click(function(){
37     // $('img').unbind('click');
38     $('img').unbind();
39 });
40 </script>
41 </html>

click实现点赞功能

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9             margin:0px;
10             padding:0px;
11         }
12     </style>
13     <script src="jquery.js"></script>
14 </head>
15 <body>
16     <div>
17         <img src="a.png">
18     </div>    
19     <br>
20     <button>点赞(<span>50</span>)</button>    
21 </body>
22 <script>
23 i=0;
24 $('button').click(function(){
25     if(i==0){
26         val=parseInt($('span').html())+1;
27         $('span').html(val);
28         $(this).css({'background':'#00f','color':'#fff'});
29     }else{
30         alert('您已经点过赞了，不要贪杯噢!');    
31     }
32     i++;
33 });
34 </script>
35 </html>

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>index</title>
   <style>
       *{
           font-family: 微软雅黑;
           margin:0px;
           padding:0px;
       }
   </style>
   <script src="jquery.js"></script>
</head>
<body>
   <div>
       <img src="a.png" alt="">
   </div>
   <br>
   <button>添加单击事件</button>
   <button>删除单击事件</button>
</body>
<script>
i=0;
$('button').eq(0).click(function(){
   $('img').one('click',function(){
       if(i%2==0){
           this.src='b.png';
       }else{
           this.src='a.png';
       }
       i++;
   });
});
</script>
</html>