image.png
    image.png
    image.png
    image.png
    image.png
    image.png

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. <title>01-事件处理on</title>
    8. <style>
    9. div {
    10. width: 100px;
    11. height: 100px;
    12. background-color: pink;
    13. }
    14. .current {
    15. background-color: purple;
    16. }
    17. </style>
    18. <script src="./jquery.min.js"></script>
    19. </head>
    20. <body>
    21. <div></div>
    22. <ul>
    23. <li>1</li>
    24. <li>2</li>
    25. <li>3</li>
    26. </ul>
    27. <ol>
    28. </ol>
    29. <script>
    30. $(function () {
    31. // 1. 单个事件注册
    32. // $("div").click(function () {
    33. // $(this).css("backgroundColor", "purple");
    34. // })
    35. // $("div").mouseenter(function () {
    36. // $(this).css("backgroundColor", "blue");
    37. // })
    38. // 2. 事件处理on
    39. // (1) 可以多个事件 一起绑定到同一个元素
    40. // $("div").on({
    41. // mouseenter: function () {
    42. // $(this).css("backgroundColor", "blue");
    43. // },
    44. // click: function () {
    45. // $(this).css("backgroundColor", "purple");
    46. // },
    47. // mouseleave: function () {
    48. // $(this).css("background", "skyblue");
    49. // }
    50. // })
    51. // 注意事件中间 用空格隔开
    52. // $("div").on("mouseenter mouseleave", function () {
    53. // $(this).toggleClass("current");
    54. // })
    55. // (2) on 可以实现事件委托 (委派)
    56. // click绑定在ul身上 触发对象是小li
    57. $("ul").on("click", "li", function () {
    58. console.log($(this), $(this).text()); //$(this) 依次指向每个小li
    59. alert(11);
    60. })
    61. // (3) on可以给未来动态创建的元素 绑定事件
    62. // $("ol li").click(function () { //这种方式不可以给未来动态创建的元素 绑定事件
    63. // alert(11);
    64. // })
    65. $("ol").on("click", "li", function () { //这样可以给未来元素 绑定事件
    66. alert(11);
    67. })
    68. var li = $("<li>我是后来创建的</li>");
    69. $("ol").append(li);
    70. })
    71. </script>
    72. </body>
    73. </html>

    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. <title>Document</title>
    8. <script src="jquery.min.js"></script>
    9. <script>
    10. $(function () {
    11. // var targetObj = {};
    12. // var obj = {
    13. // id: 1,
    14. // name: "andy"
    15. // };
    16. // // $.extend(target, obj);
    17. // $.extend(targetObj, obj);
    18. // console.log(targetObj);
    19. // var targetObj = {
    20. // id: 0
    21. // };
    22. // var obj = {
    23. // id: 1,
    24. // name: "andy"
    25. // };
    26. // // $.extend(target, obj);
    27. // $.extend(targetObj, obj);
    28. // console.log(targetObj); // 会覆盖targetObj 里面原来的数据
    29. var targetObj = {
    30. id: 0,
    31. msg: {
    32. sex: '男'
    33. }
    34. };
    35. var obj = {
    36. id: 1,
    37. name: "andy",
    38. msg: {
    39. age: 18
    40. }
    41. };
    42. // // $.extend(target, obj);
    43. // $.extend(targetObj, obj);
    44. // console.log(targetObj); // 会覆盖targetObj 里面原来的数据
    45. // // 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
    46. // targetObj.msg.age = 20;
    47. // console.log(targetObj);
    48. // console.log(obj); // age = 20
    49. // 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起
    50. $.extend(true, targetObj, obj);
    51. // console.log(targetObj); // 会覆盖targetObj 里面原来的数据
    52. targetObj.msg.age = 20;
    53. console.log(targetObj); // msg :{sex: "男", age: 20}
    54. console.log(obj);
    55. })
    56. </script>
    57. </head>
    58. <body>
    59. </body>
    60. </html>

    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png