![image.png](/uploads/projects/qingfeng-patf3@tn12x1/df29d70495811148a885ebc894cabba2.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/54b6b0ca9f01818263edb7523bd5e12c.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/09a9ac301394a8071995a3c743000508.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/9e90c6b4055354dfd31416c26657e10c.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/605b1976b0885cc2194a8b9b2814912e.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/39ef2e6559bccd668c31017bb7e4708a.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-事件处理on</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.current {
background-color: purple;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<div></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
</ol>
<script>
$(function () {
// 1. 单个事件注册
// $("div").click(function () {
// $(this).css("backgroundColor", "purple");
// })
// $("div").mouseenter(function () {
// $(this).css("backgroundColor", "blue");
// })
// 2. 事件处理on
// (1) 可以多个事件 一起绑定到同一个元素
// $("div").on({
// mouseenter: function () {
// $(this).css("backgroundColor", "blue");
// },
// click: function () {
// $(this).css("backgroundColor", "purple");
// },
// mouseleave: function () {
// $(this).css("background", "skyblue");
// }
// })
// 注意事件中间 用空格隔开
// $("div").on("mouseenter mouseleave", function () {
// $(this).toggleClass("current");
// })
// (2) on 可以实现事件委托 (委派)
// click绑定在ul身上 触发对象是小li
$("ul").on("click", "li", function () {
console.log($(this), $(this).text()); //$(this) 依次指向每个小li
alert(11);
})
// (3) on可以给未来动态创建的元素 绑定事件
// $("ol li").click(function () { //这种方式不可以给未来动态创建的元素 绑定事件
// alert(11);
// })
$("ol").on("click", "li", function () { //这样可以给未来元素 绑定事件
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
})
</script>
</body>
</html>
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/560c3285d5429e827c47574b153f2313.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/10b5ffd2be479d70b4812bf8766baa86.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/6ad69d9b1c685d8d72409b738b61ea48.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/84256c449a912ac749a2b821616c5da7.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/cd961c7a1899f1aad2431ef4303849f6.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/cd8e92360dc0a32ecf7b63fb04cf14d3.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/a8e7fc246cfa6301fcc3cd7850bc5851.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/4e6448c2a7d396db4bf0ac705fab5836.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/93a29502ff47f2173572d2d2a90ac74f.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/2c9f48c3d7135d69e158e4678839f35e.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.min.js"></script>
<script>
$(function () {
// var targetObj = {};
// var obj = {
// id: 1,
// name: "andy"
// };
// // $.extend(target, obj);
// $.extend(targetObj, obj);
// console.log(targetObj);
// var targetObj = {
// id: 0
// };
// var obj = {
// id: 1,
// name: "andy"
// };
// // $.extend(target, obj);
// $.extend(targetObj, obj);
// console.log(targetObj); // 会覆盖targetObj 里面原来的数据
var targetObj = {
id: 0,
msg: {
sex: '男'
}
};
var obj = {
id: 1,
name: "andy",
msg: {
age: 18
}
};
// // $.extend(target, obj);
// $.extend(targetObj, obj);
// console.log(targetObj); // 会覆盖targetObj 里面原来的数据
// // 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
// targetObj.msg.age = 20;
// console.log(targetObj);
// console.log(obj); // age = 20
// 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起
$.extend(true, targetObj, obj);
// console.log(targetObj); // 会覆盖targetObj 里面原来的数据
targetObj.msg.age = 20;
console.log(targetObj); // msg :{sex: "男", age: 20}
console.log(obj);
})
</script>
</head>
<body>
</body>
</html>
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/1faa3c04d8c74dc0e310b97243563646.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/3321e4f10376cb1b157ee253183c2672.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/2c5300498282c7d758def4db28be2a6d.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/2cfafed0f10ebe9b4975b0f6165da871.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/afaa2613fa9daeb4146c252beabc7096.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/0dd5f62e1f8d21eea0a38e45ce499859.png)
![image.png](/uploads/projects/qingfeng-patf3@tn12x1/916ae440f51070bb4bd5dad25baf3eb7.png)