問題背景：

目的：通過在他人的網頁也增添jQuery庫來使用自己的jQuery指令碼，

遇到的問題：直接使用$會提示.text is not a function的

var jqueryDOM=document.createElement("script")
 jqueryDOM.src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"
     jqueryDOM.onload=function(){
    $(".a").text("789")
     }
   document.body.append(jqueryDOM);
 

排查：通過setTimeout和sleep函式延時進行呼叫line4的程式碼都無濟於事，後來經過查閱，commendAPI中帶有$和$$這兩個函式，也就是說和控制檯line4的jQuery程式碼和控制檯自帶的api發生了衝突

//以下為$和$$函式的介紹
$(selector) 
//相當於document.getElemenrtById()或是document.getElementByClassName()[0]
$$(selector) //相當於querySelectorAll(),返回一個數組，包含所有選擇到的元素。

解決方法①：

    <script>
        var jqueryDOM = document.createElement("script")
        jqueryDOM.src = "https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"
        jqueryDOM.onload = function () {
            $(".a").text("789")
        }
        window.addEventListener("load", () => { document.body.append(jqueryDOM); });
    </script>
//原理：通過在網頁主體增加onload事件，使其完全載入之後再覆蓋了原有commandAPI函式再呼叫jQuery的$函式

 

解決方法②

    <script>
        var jqueryDOM = document.createElement("script")
        jqueryDOM.src = "https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"
        jqueryDOM.onload = function () {
            jQuery(".a").text("456");
        }
        document.body.append(jqueryDOM);
    </script>
//方法：改用$(jQuery)的別名jQuery代替$(commandAPI),這樣就不需要在網頁剛載入的時候就動態增添我們自己的onload事件了