2020年9月22日 星期二

jQuery Mobile 學習筆記 (一) : 環境配置與頁面結構

第一次學習 jQuery Mobile 是在 2013 年時, 但當時卻只開了個頭就忙別的學習科目去了. 最近因為阿正學弟的詢問, Web app 又重新進入眼簾, 但睽違了七年之後行動網頁前端技術面貌已大大改變, React/Angular/Vue 引領風騷, jQuery/jQuery Mobile 似乎已黯然失色. 雖曾求新學過一些 Vue, 但是時間有限, 我又不是做大專案, 用 jQuery 能做到的功能為何還要花時間去學新的前端技術? 所以還是回來重溫 jQuery/jQuery Mobile 較實在.

首先須釐清的是, jQuery Mobile 只是行動網頁的 UI (使用者介面) 框架, 負責生成與原生 App 類似之行動網頁介面. 如果要存取手機的照相, 訊息, 簡訊等功能則需依靠 Cordova (舊名 PhoneGap), 將 jQuery Mobile 所設計的 Web App 轉成手機原生 App. 其次, jQuery Mobile 依賴 jQuery 才能運作.

以下測試參考了這幾本書 (都很舊了 2014~2017 年的) :
  1. jQuery Mobile 智慧型手機程式開發 (博碩, 岡本隆史)
  2. HTML5+CSS3+jQuery Mobile 輕鬆打造 App 與行動網站 (博碩, 陳婉凌)
  3. PhoneGap 跨平台手機程式開發實戰 (上奇, 張亞飛)
  4. 徹底研究 jQuery Mobile + PHP 手機程式及網站開發 (上奇, 張亞飛)
  5. jQuery Mobile 跨平台開發寶典 (上奇, 陶國榮)
  6. PHP+MySQL+jQuery Mobile 跨行動裝置網站開發 (碁峰, 陳會安)
  7. Visual Studio 2015 X Cordova跨平台App實戰特訓班 (碁峰, 文淵閣工作室)
  8. Javascript + jQuery Mobile + Node.js 跨平台網頁設計範例教本 (碁峰, 陳會安) 
  9. 錢沾計畫啟動:jQuery Mobile 跨平台賺錢 App 錢途無量 (佳魁, 李科泉) 
其中第一本岡本隆史寫的很好, 適合初學者自學.

jQuery Mobile 教學文件參考 :

https://demos.jquerymobile.com/1.4.5/
https://www.tutorialspoint.com/jquery_mobile/index.htm
CHAPTER 12 - jQuery Mobile 教學 ( 基礎 )

之前的 jQuery Mobile 筆記參考 (2013 年) :

jQuery Mobile 測試 (一) : 環境佈置與頁面控制

以下測試程式放在 GitHub 上, 可用手機瀏覽器測試.


1. 環境配置 :

jQuery Mobile 最新版本為 v1.4.5, 而 jQuery 最新版為 v3.5.1, 但根據官網資料, jQuery Mobile v1.4.5 支援 jQuery v1.8~v1.11 與 v2.1 :




下載頁建議使用 jQuery v1.11.1 :

https://jquerymobile.com/download/

解壓縮後將 jQuery, jQuery Mobile 之 js 程式碼與 css 樣式檔分別複製到專案資料夾的 js 與 css 子目錄下 :
  • jquery-1.11.1.min.js (94KB)
  • jquery.mobile-1.4.5.min.js (196KB)
  • jquery.mobile-1.4.5.min.css (203KB)
另外 images 資料夾也要複製到專案資料夾下.

本地端供檔的網頁範本如下 :

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet">
  </head>
  <body>
    <script>
      $(function(){
        }); 
    </script>
  </body>
</html>

利用 CDN 供檔即無需準備執行環境, CDN 的網頁模板如下 :

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
  </head>
  <body>
    <script>
      $(function(){
        }); 
    </script>
  </body>
</html>

注意, 如果是 HTTPS 網站, 則 CDN 的 URL 也要改成 https 開頭.


2. 網頁架構: 

jQuery Mobile 的 Web App 網頁是以兩層 div 元素搭配 data-role 屬性建立行動網頁之頁面結構, 行動網頁內容可分散在不同 HTML 檔, 也可以整合在一個 HTML 檔案內, 透過超連結 a 元素之 href 屬性切換不同之瀏覽頁面, 幾乎不用寫一行程式碼即可建立漂亮的行動網頁使用者介面.

jQuery Mobile 依據 HTML5 制定了 data-role 屬性, 其值如下表所示 :


 data-role 屬性 說明
 page 建立一個瀏覽頁面 (page view)
 header 建立瀏覽頁面的標題列
 content 建立瀏覽頁面的內容列
 footer 建立瀏覽頁面的註解
 dialog 建立一個對話框
 navbar 建立一個導覽工具列
 button 建立一個按鈕
 controlgroup 建立一個控制群組
 listview 建立列表 (list view)
 slider 建立一個滑桿
 fieldcontain 建立一個表單欄位容器
 collapsible 建立一個可折疊容器
 collapsible-set 建立一個折疊選單


關於 jQueryMobile 的 data-xxx 屬性參考 :

https://api.jquerymobile.com/data-attribute/


基本的頁面結構分成 header (頁首或標題), content (內容), 以及 footer (頁尾或註腳) 三個部分 :

<div data-role="page">
  <div data-role="header">
    <h1>頁首</h1>
  </div>
  <div data-role="content">
    <p>內容</p>
  </div>
  <div data-role="footer">
    <h3>頁尾</h3>
  </div>
</div>

目前手機瀏覽器都已支援 HTML5, 故可將上面的 div 改成 HTML5 如下的語意標籤 :

<section data-role="page">
  <header data-role="header">
    <h1>頁首</h1>
  </header>
  <article data-role="content">
    <p>內容</p>
  </article>
  <footer data-role="footer">
    <h3>頁尾</h3>
  </footer>
</section>

其中 content 是必要的部分, header 與 footer 則是可有可無. header 用來放置頁面標題, 通常用 h1~h6 元素來包覆標題文字, 如果文字太長, 則後面無法顯示的部分會以 "..." 縮略. content 用來呈現文字, 圖片, 視訊等主體資訊, footer 部分通常用來放置作者, 公司, 或版權資訊.


(1). 多檔案架構 : 

如果網頁內容太多, 可分割放在多個 HTML 檔案頁中, 以 a 元素的 href 屬性切換 :

<a href="page2.htm" data-ajax="false">第二頁</a>

注意, 因為 jQuery Mobile 預設是以 Ajax 方式載入網頁, 而 Ajax 不支援載入本地檔案, 因此這裡超連結必須加入 data-ajax 屬性並將其設為 false (預設為 true), 否則會出現 "error loading page" 錯誤訊息, 參考 :

使用 JQueryMobile 點選超連結提示“error loading page” 錯誤

超連結 a 元素在 jQuery Mobile 中扮演了關鍵的頁面切換角色, jQuery Mobile 為其定義了一些 data- 開頭之屬性, 如下表所示 :


 a 的 data-xxx 屬性 說明
 data-ajax 是否要以 Ajax 方式載入網頁, 值="true" (預設), "false"
 data-rel 超連結的行為, 值="back" (上一頁), "dialog" (對話框), "external" (外部) 等
 data-icon 超連結按鈕上的小圖示, 值="home" (首頁), "back" (上一頁) 等
 data-transition 頁面轉換特效, 值="fade" (預設), "pop", "slide", "flip" 等六種


例如下面測試 1 有三個網頁檔 :


測試 1 : 多檔案換頁 [看原始碼 1_1看原始碼 1_2看原始碼 1_3]

第一頁 : jqueryuimobile_test_1_1.htm

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
  </head>
  <body>
    <section data-role="page">
      <header data-role="header">
        <h1>第一頁</h1>
      </header>
      <article data-role="content">
        <a href="jqueryuimobile_test_1_2.htm" data-ajax="false">第二頁</a><br>
        <a href="jqueryuimobile_test_1_3.htm" data-ajax="false">第三頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script>
      $(function(){
        });
    </script>
  </body>
</html>

第二頁 : jqueryuimobile_test_1_2.htm

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
  </head>
  <body>
    <section data-role="page">
      <header data-role="header">
        <h1>第二頁</h1>
      </header>
      <article data-role="content">
        <a href="jqueryuimobile_test_1_1.htm" data-ajax="false">第一頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script>
      $(function(){
        });
    </script>
  </body>
</html>

第三頁 : jqueryuimobile_test_1_3.htm

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
  </head>
  <body>
    <section data-role="page">
      <header data-role="header">
        <h1>第三頁</h1>
      </header>
      <article data-role="content">
        <a href="jqueryuimobile_test_1_1.htm" data-ajax="false">第一頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script>
      $(function(){
        });
    </script>
  </body>
</html>

瀏覽首頁 jqueryuimobile_test_1_1.htm 按內容區的 "第二頁", "第三頁" 超連結會分別載入 jqueryuimobile_test_1_2.htm 與 jqueryuimobile_test_1_3.htm, 結果如下 :






此範例網址可用 Quick Mark 線上轉換為 QR code, 方便用手機直接掃描測試 :

http://www.quickmark.com.tw/cht/qrcode-datamatrix-generator/default.asp?qrLink





注意, 這種多檔方式有三個限制 :
  • 不可連結至其它網域之檔案
  • 連結之檔案只能有單一頁面
  • a 元素不可以有 target 屬性
也可將多頁內容整合於單一檔案中方便管理, 每一個頁面的 div 都需指定 id 屬性值, jQuery Mobile 就是以頁面的 id 屬性作為錨點, 利用 a 元素的 href 切換不同之錨點 id 達到頁面切換之效果.

例如在第一頁的超連結中設定 href 指向第二頁頁面的 (id=page2) :

<a href="#page2">第二頁</a><br>

則按此超連結就會切換到第二頁 :

<section data-role="page" id="page2">

例如上面的三檔案範例可以整合於下面範例的單一檔案中 : 


測試 2 : 單檔案換頁 [看原始碼]

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
  </head>
  <body>
    <!-- 第一頁頁面 -->
    <section data-role="page" id="page1">
      <header data-role="header">
        <h1>第一頁</h1>
      </header>
      <article data-role="content">
        <a href="#page2">第二頁</a><br>
        <a href="#page3">第三頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <!-- 第二頁頁面 -->
    <section data-role="page" id="page2">
      <header data-role="header">
        <h1>第二頁</h1>
      </header>
      <article data-role="content">
        <a href="#page1">第一頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <!-- 第三頁頁面 -->
    <section data-role="page" id="page3">
      <header data-role="header">
        <h1>第三頁</h1>
      </header>
      <article data-role="content">
        <a href="#page1">第一頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script>
      $(function(){
        });
    </script>
  </body>
</html>

此例中三個頁面的 div 都必須指定 id 屬性, 以便 a 元素利用此 id 屬性值當作錨點以 href 屬性進行換頁, 結果與上面測試一完全相同. 此範例測試網址 QR code 如下 :




參考 :


2020年9月21日 星期一

奇怪的高鐵付費網頁

晚上幫姊姊支付中秋節回程高鐵票時又遇到這個問題, 實在不吐不快. 在查詢訂票後按信用卡付費鈕, 正要輸入卡號才想到剛剛的班次資訊沒核對, 就按上一頁回去看, 核對沒問題再按付費鈕結果出現 "請再等 15 分鐘" 訊息, 即使關掉網頁重來也一樣 :




之前曾有一次因為這樣等啊等就忘記了, 過了 12 點姊姊好不容易訂到的大學生優惠票被取消, 真的好棒棒! 造成的不便我是要怎要見諒? 請問這是委託哪家公司設計的系統?

2020年9月20日 星期日

2020 年第 38 周記事

上個月鄉下家一隻常出現在豬舍的野貓生了一隻小花貓, 大概一個月大母貓就跑了, 小貓每天喵喵叫, 爸就拿肉鬆拌飯給它吃, 居然住下來了, 由於睫毛下垂, 看起來像是衰尾道人模樣, 上上次菁菁回鄉下時給它起名 "小雖貓", 最近睫毛不再明顯下垂, 所以我都叫它 "小貓貓". 晚上我在晒穀場散步, 它也會跟前跟後找我玩, 尖牙利爪但都不伸爪.





至於養在高雄的萬萬與小咪, 只要我在房間寫程式, 這兩隻在客廳窮極無聊就會進來窩在床頭櫃陪我, 嗯, 我覺得養貓蠻療癒的, 我應該不會得精神病, 哈 !





本周因為買的 Mac mini 寄來了, 所以花了點時間玩 macOS, 並開始學習 Swift 程式設計. 每一種程式語言其實都差不多, 有資料型態, 分支, 迴圈, 函數, 類別等等, 學一種新語言只要弄清楚這些基本語法的格式就差不多了.

最近在愛奇藝看的韓劇是林秀香主演的 "我最漂亮的時候", 目前看到第 10 集, 但在預告時似乎看到後面哥哥會出意外 (賽車?), 這讓我有點不想往下看. Line TV 也可看 :

https://www.linetv.tw/drama/11506/eps/1

明天是 921, 也是母親仙遊六周年紀念.


2020年9月19日 星期六

蘋果 macOS Catalina 操作心得整理

在露天買的 Mac Min 2012 late 昨天到貨後, 我將它放在輝達的 Jetson Nano 下面, 插上鍵鼠組的 USB 與壁掛螢幕的 HDMI 馬上就能使用了. 這台雖然已經是七年前的機器了, 但 16GB DRAM 加上 512GB SSD 效能超好, 而且 SSD 靜悄悄又不發燙. 




不過 macOS 操作介面與 Win10 差異很大, 一開始比較讓人抓狂的是例如中英文輸入切換, 在 Windows 是用 SHIFT 鍵切換, 但在 macOS 則是 STRL+SPACE, 書上說大概需要兩周學習才會熟悉. 茲將學習心得記錄如下 : 

  1. 切換中英文輸入 : CTRL + SPACE 會在英文與注音之間切換. 
  2. Safari 瀏覽器將網站加入我的最愛 :
    (1). 滑鼠移到網址列最前方的 + 圖示, 按右鍵點選 "喜好項目" (最快).
    (2). 按 Safari 左上角 < > 右邊的按鈕開啟左側邊欄, 將網址列拉到側邊欄內, 若要網站修改名稱, 點選後選 "重新命名" 加以修改. 
  3. 更改螢幕字型大小 : 
    從底下 Docker 進入 "系統偏好設定" (齒輪圖示), 點選 "選示器", 點選 "解析度" 項下的 "縮放", 選擇一個解析度較小的設定即可. 
  4. 關閉英文大小寫 Caps Lock 的輸入法切換功能 : macOS 預設把 Caps Lock 鍵當成輸入法切換鍵 (用 CTRL+SPACE 就好了啊), 結果在輸入大寫英文字母時按此鍵卻進入注音輸入法, 解決方式是由 Docker 進入 "系統偏好設定" (齒輪圖示), 點選 "鍵盤/輸入方式/ABC", 取消勾選第二項 "使用大寫鎖定鍵來切換 ABC 及目前輸入方式". 


~進行中~


2020年9月18日 星期五

momo 買書兩本 (數學 & 貝氏統計學)

 今天是 momo 買書 68 折截止日, 我又買了兩本數學的書 : 

機器學習的數學:用數學引領你走進AI的神秘世界 $580 元折後 395 元

寫給大家的統計學|秒懂機率與統計,你也可以是人生勝利組 $480 元折後 327 元



總定價 1060 元,  折後 722 元, 約 68 折. 本來想加購 399 元的 MK220 羅技鍵鼠組, 但又覺得目前不需要 (Mac Mini 已經用明誠路燦坤開幕買的那組 mk235 了), 所以就沒加購了. 

市圖還書 3 本

本周市圖還書 3 本 :
  1. jQuery最強圖解實戰講座 =Lectures and exercises
  2. Make:一讀就懂micro:bit : 給程式新手的開發板入門指南 
  3. 經濟與財務數學 :使用R語言
第一本書有許多 jQuery 實用範例, 我已大致看完, 因有人預約故須先還. 第二本也是 MicroPython 版的, 以後再借; 第三本值得買起來 (但五南的書很貴).

Javascript 函數傳回 return false 的問題

在 Javascrip/jQuery 的事件處理函數中常看到最後用 return false 結尾的用法, 常令人疑惑其用意是甚麼, 其實這是不要讓 HTML 元素執行其預設動作的方法, 例如超連結 a 元素的預設動作是將網頁導向 href 所指之位置; 而 form 元素的預設動作是提交表單 :
  • href="#" : 表示導向該網頁中的一個錨點 (anchor)
  • href="hello.htm" : 表示導向此網站的另一個網頁 hello.htm
  • href="http://www.foo.com/bar.htm" : 表示導向另一個網站之網頁
如果在 a 元素的 click 事件處理函數中最後傳回 false, 則 a 元素預設的連結導向動作會被取消, 例如下面範例中的兩個 a 元素都連結到本網頁之錨點 "#" :

  <a href="#" id="a1">a1</a>
  <a href="#" id="a2">a2</a>

其中的 id=a2 的超連結有特別掛上 click 事件處理器, 並且傳回 false, 而 id=a1 則沒有 : 

$("#a2").on("click", function(){
  return false;
  });

按 a1 超連結後網址列最後會多出一個 "#" 表示網頁會回到網頁的最上方, 但按 a2 超連結則不會, 參考 :


測試 1 : 超連結導向本網頁錨點 href="#" [看原始碼]

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="cache-control" content="no-cache">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>jQuery test</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <a href="#" id="a1">a1</a>
  <a href="#" id="a2">a2</a>
  <script>
    $(function(){
      $("#a2").on("click", function(){
        return false;
        });
      });    
  </script>
</body>
</html>

傳回 false 常見於將 a 元素當作按鈕用時, 當按下按鈕會執行事件處理函數, 如果不禁止其執行預設之網頁重導向動作, 事件處理函數執行完後網頁會回到網頁最上方 (href="#" 的預設動作), 造成網頁移動的不好觀感, 例如 : 


測試 2 : 超連結當作按鈕時使用 return false 停止預設動作 [看原始碼]

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="cache-control" content="no-cache">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>jQuery test</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
  <style>
    body {font-family: Arial, Helvetica, sans-serif;}
    .ui-widget {font-size:80%;}
  </style>
</head>
<body>
  <div style="height: 1000px;"></div>
  <a href="#" id="a1">a1</a>
  <a href="#" id="a2">a2</a>
  <script>
    $(function(){
      $("#a1").button();
      $("#a2").button();
      $("#a1").on("click", function(){
        alert("你按了 a1");
        });
      $("#a2").on("click", function(){
        alert("你按了 a2");
        return false;
        });
      });    
  </script>
</body>
</html>

此例中使用一個高度為 1000px 的 div 元素將按鈕推到網頁底下, 可見按 a1 按鈕後因為沒有垂回 false 導致執行 href="#" 的預設動作 (回到網頁最上方), 但按 a2 按鈕則網頁不會移動

但是在 "jQuery 應用程式設計極速上手" (Jay Blanchard, 上奇) 這本書裡的第 1-15 頁提到, 使用 return false 來停止預設動作可能會有問題, 因為 return false 實際上會先後呼叫事件物件 e 的e.preventDefault() 與 e.stopPropogation() 函數, 前者會停止預設動作, 後者會停止事件上升 (bubble up) 功能, 因此會把之後加入之超連結的 click 事件給阻擋掉, 使得預期的功能沒有出現.

比較妥當的做法應該是呼叫 preventDefault() 即可而不是 return false :

$("#a2").on("click", function(e){
   e.preventDefault();
  });

參考下面這篇文章, 作者清楚描述了 return false 的作用, 如果只是要停掉預設動作, 那就呼叫事件物件 e 的 preventDefault() 就好, 不要使用 return false : 


jQuery 中的 this 與 $(this)

在許多 jQuery 範例中常出現 this 與 $(this), 甚麼時候該用 this, 甚麼時候該用 $(this), 很多人時常會被搞混,  在 jQuery 語法中 this 是被選取器選取的 DOM 物件, 而 $(this) 才是此 DOM 物件經過包裹後的 jQuery 物件, 因此如果要存取 DOM 物件的屬性或方法時須用 this; 而要存取 jQuery 物件之屬性與方法時則須用 $(this), 參考 :

淺談jQuery this和$(this)的區別及獲取$(this)子元素物件的方法

在 jQuery 敘述中可以用 $(this) 來避免重複使用選擇器選取元素, 例如對於按鈕元素 button :

&lt;button id="btn"&gt;OK&lt;/button&gt;

用 jQuery 監聽 click 事件, 每按一次顯示已按次數 :

var cnt=0;
$("#btn").on("click", function(){
  $("#btn").html("你按了" + (++cnt) + "次");
  });

此例中的事件處理函式需要再一次存取按鈕之 jQuery 物件, 若用 $("#btn") 就重複使用選擇器兩次, 應該改為 :

var cnt=0;
$("#btn").on("click", function(){
  $(this).html("你按了" + (++cnt) + "次");
  });

完整程式碼參考 :

測試 1 : this 與 $(this) [看原始碼]

一般常犯的錯誤例如在存取表單時, this.val() 是錯誤的, 因為 DOM 物件沒有 val() 方法, 要 jQuery 物件才有, 即應該是 $(this).val() 才對. 

Blogger 新版上線

 昨天關掉 blogger 視窗重開後發現 Google 強制使用新版編輯器了, 底下原先有的切回舊版超連結已消失, 所以舊版 Blogger 編輯器一關掉就回不去了, 這熟悉的舊介面很好用啊為啥要換?  舊版的網址列格式如下 :

# https://www.blogger.com/blogger.g?blogID=yourID&useLegacyBlogger=true#allposts




新版 Blogger 介面最令人討厭的缺點是超連結編輯視窗, 你必須多按幾次 Enter 把超連結往上頂, 這樣才能按到底下的套用按鈕, 沒按套用鈕根本就編輯無效. 但新版的優點是可以直接將 HTML 碼貼進去, 它會自動轉成 Entity, 以前舊版必須先在記事本進行人工轉換. 

momo 買 iOS 13 書籍兩本

 因為買了二手的 Mac mini, 想要開始學習很久以前就想涉獵的 Apple Swift 語言, 所以上 momo 找 iOS 13 的書, 發現 Apple 真的是小眾耶, 市面上 iOS 的書真的不多, 只找到下面兩本還不錯的 : 

iOS 13程式設計實戰- Swift 5.1/SwiftUI框架|快速上手的開發技巧200+ $580 折後 $395

iOS 13 App程式開發實務心法:30個製作專業級iOS App完全實戰攻略 $850 折後 $578



兩本定價共 1430 元, 折後 973 元, 相當於 68 折, 扣掉 momo 幣 183 元, 實付 790 元, 相當於 55 折, 真是太划算了! 所以在 momo 買書還是要刷 momo 卡才能加速累積 momo 幣.