jQuery 事件对象、 jQuery 拷贝对象、jQuery 多库共存
梨涡浅笑
发布于 2020-10-27 07:27:35
发布于 2020-10-27 07:27:35
代码可运行
运行总次数：0
代码可运行
1. jQuery 事件对象
jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。
语法
element.on(events,[selector],function(event) {}) 阻止默认行为：event.preventDefault() 或者 return false 阻止冒泡： event.stopPropagation()
演示代码
<body>
<div></div>
<script>
$(function() {
$(document).on("click", function() {
console.log("点击了document");
})
$("div").on("click", function(event) {
// console.log(event);
console.log("点击了div");
event.stopPropagation();
})
})
</script>
</body>2. jQuery 拷贝对象
jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。
语法
$.extend([deep], target, object1, [objectN]) 1. deep: 如果设为true 为深拷贝， 默认为false 浅拷贝 2. target: 要拷贝的目标对象 3. object1:待拷贝到第一个对象的对象。 4. objectN:待拷贝到第N个对象的对象。 5. 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。 6. 深拷贝，前面加true， 完全克隆，修改目标对象不会影响被拷贝对象。
演示代码
<script>
$(function() {
// 1.合并数据
var targetObj = {};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);
// 2. 会覆盖 targetObj 里面原来的数据
var targetObj = {
id: 0
};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);
})
</script>3. jQuery 多库共存
实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存。
语法
jQuery 解决方案： 1. 把里面的 符号统一改为jQuery。比如jQuery(′′div′′)2.jQuery变量规定新的名称：.noConflict() var xx =
演示代码
<script>
$(function() {
// 让jquery 释放对$ 控制权 让用自己决定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
})
</script>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-10-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
相关讨论
相关推荐
jQuery 事件对象，拷贝对象，多库共存
更多 >
腾讯云开发者
