//jQuery绑定事件
// 1 使用事件函数 .click() .dbclick()..........
// 2 使用同一的on()函数去绑定事件 on(事件类型,事件函数)
// on函数可以一次绑定多个事件类型,多个事件类型用空格隔开
// 只支持JavaScript原装事件类型
// 3 使用统一的on函数绑定事件,给未来元素(动态元素)绑定事件 on(事件类型,未来元素选择器,事件函数)
// on函数可以一次绑定多个事件类型,多个事件类型用空格隔开
// 只支持JavaScript原装事件类型
// $里放未来元素的父级元素
$(function() {
$("input").click(function() {
$("body").append("<div>新生成的元素</div>")
})
$("body").on("click", "div", function() {
alert(1)
})
})
// 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>
运行出来的结果: