JQUERY总结（四）

对象拷贝：

在这里插入图片描述

<script src="jQuery.min.js"></script>
<script>$(function(){// var targetObj={};// var obj={//     id:0,//     name:"xinyi",//     location:"henan"// };// //覆盖以前的相同key值对应的数据// $.extend(targetObj,obj);// console.log(targetObj);var targetObj={};var obj={id:0,name:"xinyi",location:"henan",msg:{age:18,}};//覆盖以前的相同key值对应的数据$.extend(targetObj,obj);console.log(targetObj);})

在这里插入图片描述

绑定多个事件：

<style>div{margin:200px auto;width: 200px;height: 200px;background-color: pink;}.current{background-color: purple;}
</style>
<body><div></div>
</body>
<script src="jQuery.min.js"></script>
<script>
// $('div').on({
//     mouseover: function(e) {
//         $(this).css('background',"skyblue");
//     },
//     click: function(e) {
//         $(this).css("background","purple");
//     },
//     mouseleave: function(e) {
//         $(this).css("background", "blue")
//     }
// })
$("div").on("mouseenter mouseleave",function(){$("div").toggleClass("current")
})
</script>

事件委托和动态绑定以及解除绑定

<!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>Document</title></head><style>ul li {list-style: none;cursor: pointer;}</style><script src="jQuery.min.js"></script><body><div></div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ol></ol><p>世界我来了</p></body><script>// 这样会造成全选// $("ul li").click(function() {// })//事件委托，每一个li都可以触发，给父元素绑定事件，点击子元素时触发$("ul").on("click", "li", function () {alert("11");});// 解除绑定：off// $("ul").off("click", "li")// 后来创建的元素也能继承之前的方法$("ol").on("click", "li", function () {alert("你好");});var li = $("<li>后来</li>");$("ol").append(li);$("ol").off("click", "li");// one：只触发一次$("p").one("click", function () {alert("22");});</script>
</html>

微博发布案例：

<!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>Document</title>
</head>
<style>body{display: flex;justify-content: center;align-items:center ;}.box{margin-top: 200px;border:1px solid black;width: 800px;height: 400px;}textarea{margin-top:50px;width: 600px;height: 200px;}span {font-weight: 700;font-size: 20px;font-family: Arial, Helvetica, sans-serif;}button{font-weight: 700;font-size: 20px;font-family: Arial, Helvetica, sans-serif;}li{font-size: 20px;list-style: none;}a{font-size: 20px;text-decoration: none;color: black;}a:hover{color:red;}
</style>
<body><div class="box" id="weibo"><span>微博</span><textarea name="" id="" cols="30" rows="10" class="txt"></textarea><button class="btn">发布</button><ul></ul></div>
</body>
<script src="jQuery.min.js"></script>
<script>$(".btn").on("click",function() {var li=$("<li></lil>");li.html($(".txt").val()+"<a href='javascript:;'>删除</a>");$("ul").prepend(li); li.slideDown();// 发布后清空$(".txt").val("");
})
// 事件委托 on 动态创建的元素绑定事件
$("ul ").on("click", "a",function() {
$(this).parent().slideUp(function() {$(this).remove();
})
})
</script>
</html>