jQuery 事件對象、 jQuery 拷貝對象、jQuery 多庫共存

時間 2020-10-09

標籤 jquery spa code 對象 blog 事件 element 開發欄目 JQuery 简体版

原文原文鏈接

1. jQuery 事件對象

jQuery 對DOM中的事件對象 event 進行了封裝，兼容性更好，獲取更方便，使用變化不大。事件被觸發，就會有事件對象的產生。jquery

語法ui

element.on(events,[selector],function(event) {})

阻止默認行爲：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation() spa

演示代碼code

<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，方便易用，內容以下。對象

語法blog

 $.extend([deep], target, object1, [objectN])

1. deep: 若是設爲true 爲深拷貝，默認爲false 淺拷貝
2. target: 要拷貝的目標對象
3. object1:待拷貝到第一個對象的對象。
4. objectN:待拷貝到第N個對象的對象。
5. 淺拷貝目標對象引用的被拷貝的對象地址，修改目標對象會影響被拷貝對象。
6. 深拷貝，前面加true，徹底克隆，修改目標對象不會影響被拷貝對象。事件

演示代碼ip

 <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 多庫共存。element

語法開發

jQuery 解決方案：

1. 把裏面的 $ 符號統一改成 jQuery。好比 jQuery(''div'')
2. jQuery 變量規定新的名稱：$.noConflict() var xx = $.noConflict();

演示代碼

<script>
    $(function() {
          // 讓jquery 釋放對$ 控制權 讓用本身決定
          var suibian = jQuery.noConflict();
          console.log(suibian("span"));
    })
</script>