<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>16.13jQuery事件的绑定</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1.单个元素绑定单个事件
//bind(事件,方法)
$('#btn1').bind('click',function(){alert("按钮被单击了！");});
//简写为
/*
$('#btn1').click(function(){alert("按钮被单击了！");});
*/
//2.单个元素绑定多个事件
//bind({事件1:方法1,事件2:方法2,事件3:方法3})
$('#div1').bind({
'mouseenter':function(){$(this).css('color','red');},
'mouseleave':function(){$(this).css('color','blue');}
});
//3.多个元素绑定一个事件
$('#h2,#p2').bind('mouseover',function(){$(this).css('color','pink');});
//4.多个元素绑定多个事件
$('#h3,#a3').bind({
'mouseenter':function(){$(this).css('color','red');},
'mouseleave':function(){$(this).css('color','blue');}
});
//5.练习在列表中添加列表项
$('#btn4').bind('click',
function(){
var n = $('#u4 li').length;
var $li4='<li>A'+n+'</li>';
$('#u4').append($li4);
}
);
//移除绑定
$('#btn5').click(function(){
$('#btn4').unbind('click');
});
//6.练习单击列表项，弹出列表内容
$('#u4 li').bind('click',
function(){
alert($(this).html());
}
);
//新添加的元素，不具有行为，怎样解决？
//通过事件委托来完成
});
</script>
</head>
<body>
<button id="btn1">button</button>
<div id="div1">div1元素</div>
<h2 id="h2">h2元素</h2>
<p id="p2">p2元素</p>
<h3 id="h3">h3元素</h3>
<a href="#" id="a3">链接</a>
<hr>
<input type="button" id="btn4" value="添加列表项"><br>
<input type="button" id="btn5" value="移除绑定"><br>
<ul id="u4">
<li>A0</li>
<li>A1</li>
<li>A2</li>
</ul>
</body>
</html>
