jQuery 事件物件，拷貝物件，多庫共存
阿新 • • 發佈：2020-10-07
1. jQuery 事件物件
jQuery 對DOM中的事件物件 event 進行了封裝，相容性更好，獲取更方便，使用變化不大。事件被觸發，就會有事件物件的產生。
語法
演示程式碼
<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>
注意：jQuery中的 event 物件使用，可以借鑑 API 和 DOM 中的 event 。
2. jQuery 拷貝物件
jQuery中分別為我們提供了兩套快速獲取和設定元素尺寸和位置的API，方便易用，內容如下。
語法
演示程式碼
<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);
var targetObj = {
id: 0,
msg: {
sex: "男"
}
};
var obj = {
id: 1,
name: "andy",
msg: {
age: 18
}
};
////1.淺拷貝把原來物件裡面的複雜資料型別地址拷貝給目標物件
//$.extend(targetObj, obj);
// targetobj .msg.age = 20;
// console.log(target0bj);
// console.1og(obj);
//2.深拷貝把裡面的資料完全複製一份給目標物件如果裡面有不衝突的屬性，會合併到一起
$. extend(true, targetobj, obj);
// console. log(target0bj); //會覆蓋targetobj裡面原來的資料
targetobj .msg.age = 20;
console.log(target0bj); // msg :{sex:"男"，age: 20}
console .1og(obj); //msg: {age: 18}
})
</script>
3. jQuery 多庫共存
實際開發中，很多專案連續開發十多年，jQuery版本不斷更新，最初的 jQuery 版本無法滿足需求，
這時就需要保證在舊有版本正常執行的情況下，新的功能使用新的jQuery版本實現，這種情況被稱為，jQuery 多庫共存。
語法
演示程式碼
<script>
$(function() {
function $(ele) {
return document.querySelector(ele);
}
console.1og($("div"));
// 1.如果$符號衝突我們就使用jQuery
jQuery.each();
// 2.讓jquery 釋放對$控制權，讓使用者自己決定
var suibian = jQuery.noConflict();
console.log( suibian("span"));
suibian.each();
})
</script>