一翻開多年前寫的 Code,當時為了趕流行用了 jQuery 1.6,時光荏苒,現在只是為了安全性而將版本升級到 jQuery 3.4.1,沒想到並不是只有複製貼上這麼簡單,還遇到下面幾個升級過程中所遇到的問題。
我主要是以 Chrome 瀏覽器,F12 打開「開發人員工具」裡的 Console 頁籤,檢視是否有 javascript 錯誤。
一:TypeError: $(...).parents(...).size is not a function
因為 .size() 這語法,在 jQuery 1.8 以後就不再支援了(Ref 01),必須改成用 .length 來取代,所以原先
$(".color").size()
要改成
$(".color").length
注意,一個是有括號(),屬於方法;一個沒有括號,是屬性。而且使用 .length 的數度還要比 .size() 快上1/3。官網上指出他的差異關鍵,在於 .length 少了 .size() 的函數呼叫的效能消耗(Ref 02)。
其他說明,可參考 Ref 03。
二:Uncaught Error: Syntax error, unrecognized expression: a[href=#]
原來我之前用 jQuery 語法抓取超連結時,使用了類似 $("a[id=#element]") 語法,
現在遇到這種特殊字元需要用括號把它們刮起來。可參考 Ref 04。
$("a[id='#element']")
三:Uncaught TypeError: Cannot read property 'msie' of undefined
早期 jQuery 有提供 jQuery.browser() 這語法,可用來取得使用者目前使用的瀏覽器相關資訊。但在 1.9 版本之後,正式被移除了(Ref 05)。但如果你還是有不得不使用他的情況下,可以自己手動加回去。只要在引用 jQuery 3.4.1 後的位置加上就可以。
<script src="jquery-3.4.1.js"></script>
<script type="text/javascript">
jQuery.browser = {};
(function () {
jQuery.browser.msie = false;
jQuery.browser.version = 0;
if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
jQuery.browser.msie = true;
jQuery.browser.version = RegExp.$1;
}
})();
</script>
你可能會想更懶一點,這時可以去下載 jquery-migrate js 來使用,
依據上述情況,就只需改寫成
<script src="jquery-3.4.1.js"></script>
<script src="jquery-migrate-3.0.1.js"></script>
因為我有使用 colorbox ,而 colorbox 使用的 jQuery 版本很舊,目前也沒有更新版。所以直接使用最新版本的 jquery-migrate-3.0.1.js 並無法解決 'msie'的問題。只好退而求其次的使用 jquery-migrate-1.2.1.min.js。
參考:
Ref 01:jQuery length 和 size()區別總結
Ref 02:.size()
Ref 03:TypeError: $(…).parents(…).size is not a function
Ref 04:Syntax error, unrecognized expression for href
Ref 05:jQuery.browser