JQuery学习20篇(jquery特有的绑定函数)
程序员文章站
2024-03-19 20:28:04
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习20篇(jquery特有的绑定函数)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
</head>
<body style="background-color: #CCE8CF;">
<h3 style="color: #cd1636;">JQuery学习20篇(jquery特有的绑定函数)</h3>
<input style="width: 150px;" id="input1" type="button" value="添加事件" οnclick="add_Event();">
<input style="width: 150px;" id="input2" type="button" value="解除/取消1个绑定" οnclick="relieve_bind();">
<input style="width: 150px;" id="input3" type="button" value="解除/取消多个绑定" οnclick="relieveMultipleBind();">
<br/><br/>
<div id="div1" style="width: 25%; height: 100px;">
(请点击我)
<br/>
<font size="6" color="red">江西省赣州市于都县</font>
</div>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function fn1(){
console.log('天若有情天亦老');
}
function fn2(){
console.log('一万年太久只争朝夕');
}
//绑定
function add_Event(){
$('#div1').bind('click', function(){
console.log('乘风破浪会有时，直挂云帆济沧海');
});
$('#div1').bind('click', fn1);
$('#div1').bind('click', function(){
console.log('人间正道是沧桑');
});
}
//绑定
$('#input1').click(function() {
$('#div1').bind('click', fn2);
$('#div1').bind('click', function(){
console.log('天生我材必有用');
});
});
//解除绑定
function relieve_bind(){
$('#div1').unbind('click', fn1);
}
//解除绑定
$('#input2').click(function() {
$('#div1').unbind('click', fn2);
});
//解除多个绑定
function relieveMultipleBind(){
$('#div1').unbind('click');
}
</script>
</html>