jQuery绑定事件
1.使用事件函数
.click() .dbclick()..........
2.使用同一的on()函数去绑定事件
on(事件类型,事件函数)
on函数可以一次绑定多个事件类型,多个事件类型用空格隔开
只支持JavaScript原装事件类型
3.使用统一的on函数绑定事件,给未来元素(动态元素)绑定事件
on(事件类型,未来元素选择器,事件函数)
on函数可以一次绑定多个事件类型,多个事件类型用空格隔开
只支持JavaScript原装事件类型
$里放未来元素的父级元素
注意:
dom对象 通过dom找到的对象
jdom对象 通过$获取的元素
dom --> JavaScript
jdom --> JQuery
dom --> jdom $(dom)
jdom --> dom jdom[n]
实例如下:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入在线jQuery库 -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script src="../js/jQuery.js"></script>
<style>
div {
background-color: pink;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
de
</div>
<input type="button" value="生成元素">
</body>
</html>
JavaScript:
$(function() {
$("input").click(function() {
$("body").append("<div>新生成的元素</div>")
})
$("body").on("click", "div", function() {
alert(1)
})
})
运行效果图如下: