2019年5月28日 星期二

jQuery 版本升級,多麼痛的領悟


一翻開多年前寫的 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

2019年5月17日 星期五

幫李公公建立侍寢名單


要當個稱職的李公公,除了用心、耐心、費心之外,還要能夠與時俱進,會用 MS Excel 已經不夠看,還要能夠上雲端,學會 Google 的試算表。

最近李公公有個困擾,就是每天要記錄乾隆皇帝翻的牌子,因為老眼昏花外加肥手指,常常打錯字,如果被主子發現,肯定掉腦袋。

小弟不才,只好略盡棉薄之力,教他一個萬全之策。

首先,打開李公公的侍寢名單,哎呀,日期都打好了,就只剩妃嬪名子空著。



這時,我再請李公公把目前可以侍寢的嬪妃,記錄在另一個頁籤。


一看,不錯了。目前有 10 個選擇,每天都不會膩啊~~~

回到【乾隆】這個頁籤,把游標移到 2019/05/01 的右邊,空著的那一格。



點選【資料】->【驗證資料】

裡面的【儲存格範圍】,就寫待會要讓李公公挑選的儲存格。預設就會把目前游標指著的位置。你也可以透過游標,任意指到你想要呈現挑選清單的地方。
接著,【條件】,我選【範圍內的清單】,在他右邊空格,有個【田】字圖示,點下去


然後再到【后宮】頁籤,把嬪妃名單範圍圈起來。


再按【確定】,完整的設定如下,最後再按【儲存】

我們回到【乾隆】頁籤,就會在嬪妃名字下面看到一個下拉清單


點一下那個倒三角形,就會列出所有嬪妃名字讓你挑選了


完成後,我們接著將這個下拉清單複製到後面的每個日子。

可以把游標對準儲存格的右下角,按下後,滑鼠不要放開,往下拉到最後一天,就可以完成複製了。


李公公從今天開始,就可以高整無憂,發大財了。