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>