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

一、总结

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

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

bind(); unbind();

 i=0;

 $('button').eq(0).click(function(){

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

         if(i%2==0){

             this.src='b.png';

         }else{

             this.src='a.png';

         }

         i++;

     });

 });

 $('button').eq(1).click(function(){

     // $('img').unbind('click');

     $('img').unbind();

 });

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

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

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

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

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

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

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

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

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

 i=0;

 $('button').click(function(){

     if(i==0){

         val=parseInt($('span').html())+1;

         $('span').html(val);

         $(this).css({'background':'#00f','color':'#fff'});

     }else{

         alert('您已经点过赞了，不要贪杯噢!');

     }

     i++;

 });

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

1、相关知识

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

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

2、代码

只绑定一次事件

 <!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>

绑定事件和解除绑定事件

 <!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').bind('click',function(){

         if(i%2==0){

             this.src='b.png';

         }else{

             this.src='a.png';

         }

         i++;

     });

 });

 $('button').eq(1).click(function(){

     // $('img').unbind('click');

     $('img').unbind();

 });

 </script>

 </html>

click实现点赞功能

 <!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">

     </div>

     <br>

     <button>点赞(<span>50</span>)</button>

 </body>

 <script>

 i=0;

 $('button').click(function(){

     if(i==0){

         val=parseInt($('span').html())+1;

         $('span').html(val);

         $(this).css({'background':'#00f','color':'#fff'});

     }else{

         alert('您已经点过赞了，不要贪杯噢!');

     }

     i++;

 });

 </script>

 </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>