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>