一翻開多年前寫的 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
沒有留言:
張貼留言