学jQuery第四天
事件处理
- 单个事件注册
$("div").click(function() { $(this).css("background", "purple"); }); $("div").mouseenter(function() { $(this).css("background", "skyblue"); });
- 事件处理on
- (1) on可以绑定1个或者多个事件处理程序
$("div").on({ mouseenter: function() { $(this).css("background", "skyblue"); }, click: function() { $(this).css("background", "purple"); }, mouseleave: function() { $(this).css("background", "blue"); } });
例如：
$("div").on("mouseenter mouseleave", function() { $(this).toggleClass("current"); });
- (2) on可以实现事件委托（委派）
// $("ul li").click(); $("ul").on("click", "li", function() { alert(11); }); // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
- (3) on可以给未来动态创建的元素绑定事件
// $("ol li").click(function() { // alert(11); // }) $("ol").on("click", "li", function() { alert(11); }) var li = $("<li>我是后来创建的</li>"); $("ol").append(li); })
解绑事件
- 事件解绑
off
$("div").off(); // 这个是解除了div身上的所有事件 $("div").off("click"); // 这个是解除了div身上的点击事件 $("ul").off("click", "li");
one()但是它只能触发事件一次
$("p").one("click", function() { alert(11); })
自动触发事件
// 自动触发事件 // 1. 元素.事件() // $("div").click();会触发元素的默认行为 // 2. 元素.trigger("事件") // $("div").trigger("click");会触发元素的默认行为 $("input").trigger("focus"); // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为 $("div").triggerHandler("click"); $("input").on("focus", function() { $(this).val("你好吗"); }); // $("input").triggerHandler("focus");
jQuery对象拷贝
<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); // 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起 $.extend(true, targetObj, obj); // console.log(targetObj); // 会覆盖targetObj 里面原来的数据 targetObj.msg.age = 20; console.log(targetObj); // msg :{sex: "男", age: 20} console.log(obj); }) </script>
jQuery多库共存
