用 Express + nodemon 建一個乾淨的 nodeJS 樣板
最近因為工作關係,開始學用 nodeJS 了,我使用的是非常知名的 Express framework,他也有提供 APP 產生器快速建構一個基本的 nodeJS 網站,為了避免每次都要重新查資料,所以就記錄在自己的 BLOG 裡囉!
安裝 Express 產生器
第一次使用要先安裝他的產生器:
安裝完後可以執行 express -h
看到產生器的選項:
建立 Express 專案
Express 可以選擇要使用的「樣版引擎」以及「CSS 預處理器」,如果都沒有指定,預設就是:
- 樣版引擎:jade
- CSS 預處理器:原生的 css
我自己是習慣使用 ejs 跟 scss,所以我會下這樣的指令新建專案:
接著請輸入以下指令:
預設的 port 是 3000,所以啟動後請在網址輸入 http://localhost:3000,如果安裝正常會看到 Express 的歡迎畫面:

使用 nodemon 自動重啟伺服器
這個就跟前端的 livereload 類似。
nodemon 可以讓我們更改 server 的程式碼之後,不用重新關閉伺服器再打開,直接到網頁重新整理即可。
安裝 nodemon
你可以選擇全域安裝(推薦全域安裝,因為他真的很好用XD):
也可以選擇只安裝在特定的資料夾:
正常情況下,安裝完之後輸入以下指令,就可以正常使用了:
搭配 Express,自動重啟伺服器
但如果我們有使用 Express 的話,他的啟動方式是 npm start
,所以我們需要做一點小修改,才可以使用 nodemon 這個好用的服務!
請打開你的首頁(預設會是 app.js),將最後一行註釋起來
然後加入以下程式碼:
接著再啟動 nodemon:
這樣每次改完程式碼存檔之後,就能直接到網頁重新整理看結果囉!
下載 Express-Clean-APP
最後我也將這份 Express Clean 的專案資料夾放到 Github 上面,有需要的朋友可以自行 Clone 或是 Fork 唷。
Express Clean repo:https://github.com/mukiwu/clean-express
jQuery Ajax API 實作以及 Template 介紹
前陣子在上前端基礎課,有教大家怎麼利用 jQuery AJAX 實現簡單的 CRUD 效果,後來覺得這對初學者來說,應該是個需要反覆思考才能融會貫通的小門檻,剛好最近也有學生對此表示不懂😱,所以就借這篇文章簡單跟大家介紹囉!
我會用在課堂上的教材跟大家拆解語法,但為了避免大家練習時灌爆我的 API,所以我不會透露 API 網址,一律用變數 ajax_url
代替。
什麼是 API
用程式介面(英語:Application Programming Interface,簡稱:API),又稱為應用編程介面,就是軟體系統不同組成部分銜接的約定。
維基百科
對網站開發人員而言,API 就是前後端溝通的一個接口。後端可以透過各種方法操作資料庫裡的資料;但對前端來說,我們該怎麼操作資料呢?我們可以利用後端人員提供的 API(通常是一串網址)去操作資料,只要有了 API,我們就可以用 JavaScript 搭配 AJAX 實現 CRUD 。
如果還是霧煞煞也沒關係,接下來會用程式碼讓大家加深印象,原理神馬的,可以透過實作去了解 😊。
什麼是 CRUD
CRUD 是四個單字的簡稱,就像我們在學 CSS 時一定要會使用選擇器(selector),而後端在學操作資料庫時,一定要先會 CRUD。
這四個單字分別意思為:
- C:Create (新建資料)
- R:Read (讀取資料)
- U:Update (更新資料)
- D:Delete (刪除資料)
實作留言板的 CRUD
接下來要跟大家分享的是,如何透過前端實作一個留言板,這個留言板要有 CRUD 的功能,就是我們常說的:新增、刪除、修改 留言。
那因為新增留言是我這期學生的期末考題,所以等他們考完試,我會再把新增留言的程式碼放上來,現在我們先來學習刪除、修改,以及顯示留言吧😋
在此先用 Bootstrap 做了一個非常簡單的留言版,你可以在 HTML 裡面看到要放留言的區塊,只有一行 <div class="result"></div>
,其他什麼都沒有。
在沒有樣板輔助的情況下,我們需要透過 jQuery 語法將 HTML 的字串組出來,因此所有的留言資料、排版,都必須寫在 jQuery 檔案裡。
顯示留言(Read)
顯示留言的邏輯大概是這樣:
- 讀取網頁
- 透過 jQuery 語法 (AJAX) 得知現在要撈出該 API 裡的資料
- 使用 GET 方法撈出資料
- 將撈出來的資料,利用 jQuery 改變 DOM 之後,秀在網頁上
轉換成語法則是:
$.ajax
是 jQuery 包裝後的函式,因此他的格式都是固定的,我們只要把對應的資料寫進去,如果 url 跟 type(method) 正確,基本上資料都讀得到。
最後再透過 success 偵測資料成功被讀取後,應該要做的事情:
因此留言的資料非常多,所以我們要利用迴圈,將e
物件的所有資料顯示出來,並透過append()
把資料一筆一筆的接在後面。
組字串時把握兩個原則:
- 當變數碰到 html 時,需要用
+
串接 - 單引號用來包變數與 jQuery 語法,雙引號用來包 HTML 語法
組字串需要耐心跟細心,如果還是看不太懂他們的規則,我會建議先實作再透過開發者工具看 render 出來的 HTML 程式碼,相互對照會更加清楚他們的邏輯。
更新留言(Update)
更新留言的邏輯比較繁瑣一些,如果寫成文字大致如下:
- 點擊更新留言的按鈕
- 該篇留言會自動變成可編輯的表單,而且表單預設值是原本留言的內容
- 輸入完要更新的資料後,按下送出,表單會變回更新後的資料
- 如果按下取消,表單會變成原始資料,不會更新
因為有點複雜,所以我錄了一個 GIF 表示整個流程
轉為程式碼,也可以感受到他比 READ 還複雜許多,而且重點是這個程式碼我還沒寫完 哈哈哈 XDDDD
雖然沒有寫完,但是的確可以成功將留言更新,但更新後的樣式如果要用組字串的方式來寫,會太過於繁瑣,所以我後來採用 jQuery Template 實作(後面會再提到如何用 Template 改寫)。
但我們還是要簡單說一下這段程式碼,之後再把樣板加進來會比較好懂。
上述程式碼 highlight 的第 3 ~ 8 行(以下簡稱 A 段),以及 19 ~ 24 行(以下簡稱 B 段),乍看之下其實很類似,但兩個功能大不相同。
A 段代表的是上述邏輯的第二句話:留言會自動變成可編輯的表單,而且表單預設值是原本留言的內容。所以當我點下「更新按鈕」的時候,會利用 A 段將作者、標題、網址 … 等資料存到變數裡,這邊利用的是 DOM 的 text()
方法,接下來在updateTemplate
裡塞入表單元件,可以用 value=""
讓元件預設出現內容,所以在裡面塞入了各個變數。
而 B 段表示的,是當我更新完留言送出之後,會傳至 API 的實際內容。以name
變數為例:name = fullMsg.find('.name').val();
,將該表單元件的值存了起來,如果要得到元件的值,可以用 val()
方法。
最後再利用 $.ajax
加上 put
這個 type(method),將資料一個一個的傳回去。你可以利用 sucess 印出結果,如果傳送的物件是更新後的結果,表示程式正確。
如果參考我上面寫的文字流程,成功之後應該要讓畫面回到「顯示留言」的樣子,但是如果用這種方法寫,程式碼可能會又臭又長,所以才想用 template 改寫,因此斷尾了 XDDD。但大家有興趣,也可以試著想一下該怎麼把這個功能寫出來唷 🙂
刪除留言(Delete)
相較於更新,刪除真的是簡單許多,我們的 API 設計,是只要得到該留言的 ID 值,就能透過 ID 將留言刪除。
但根據我的 HTML 結構,我是將 ID 寫在最外面,刪除留言則是放在裡面:
所以點擊「刪除留言」之後,該如何利用 jQuery 找到這一篇文章的 ID 呢?我使用了closest()
方法,以「刪除留言」為中心點,找到離他最近的.full-msg
。
如果成功刪除留言,必須要有一些簡單的回饋,讓使用者知道留言被刪除了 (就和更新留言是一樣的道理)。
只不過刪除比較簡單,我直接讓這一篇留言 fadeOut(),再秀出「留言已刪除」的字即可。
以上就是簡單的 CRUD 操作,希望對大家有所幫助。雖然語法看上去有點複雜,但其實觀念只有兩個,一是利用$.ajax
操作 API,二是利用 jQuery 操作 DOM 讓使用者感受到回饋。
有時間會再更新如何使用樣板。我會以「更新留言」為例子,將他改寫成 template 的樣式,因為我們要的功能非常單純,所以我使用的是 jQuery Template,有興趣的朋友可以先閱讀他的官方文件。
超級初心者適用的 JavaScript 觀念 (暫停更新)
最近除了跳級研究 jQuery 之外,也從基礎開始認識 JavaScript,不得不說,歐萊禮真是個恐怖且強大的出版社阿(膜拜),我最近在看歐萊禮出版的「深入淺出 JavaScript」,其實一開始去書店翻找這本書的時候,還對他的排版嗤之以鼻,想說怎麼搞得那麼亂,還用一堆裝可愛的外國人來作對話式教學。
但,事實證明我錯了,利用這種情境 & 對話式的教學,還有摘要的重點,真的是可以讓初學者快速上手啊!!! 所以歐萊禮,請容我深深地跟你道歉,以及至上我最高的敬意 <(_ _)>
那麼以下分享我看了這本書之後導正 & 瞭解的一些觀念,分享給跟我一樣的超級初心者。希望能讓你們在學習 JavaScript 的路上有所幫助!! (高手別來阿 XD )
閱讀進度 CH1 ~ 2
CH1:互動性網站
CH2:儲存資料
alert()
也是函數的一種,他是 JavaScript 的內置函數。每個 JavaScript 函數都會用()
包住要傳給函數的訊息。- 事件 = 告訴 JavaScript 當使用者在網頁上「做了某件事情」,才會觸發裡面的程式碼。例如
onclick
(點擊了某個按鈕)就是一種事件。 - 函數 = 可以重複執行的程式碼。
if(userName)
表示當userName
這個變數有值(可以被取得),就執行以下的動作。var userName = prompt("What is your name?" , "Enter your name here"); if (typeof(userName) !== 'undefined' ) { alert("welcome, " + userName); }
原本在取得變數的部分我是寫if(userName)
,不過這樣寫很容易讓程式無法執行(感謝 Kuro 指正),如果userName
是空值,或是未定義…等一些特殊狀態,裡面的alert()
就不會被執行。
所以改用if typeof(userName)
就可以避免這種狀況,以下是另一種範例參考://or you can change userName as null, undefined var userName = ''; if (typeof(userName) !== 'undefined') { // if(userName){ alert("OK"); } }
- JavaScript 的數據類型有變數(variable)以及常數(constant)兩種。變數呼叫方式
var test
,常數呼叫方式const test
。常數的值一旦被定義了,就永遠無法被改變。 - 變數、常數的標示符 (identifier) 命名須注意事項:
- 不能重複,是唯一性。
- 開頭只能用英文字母、下底線
_
以及錢號$
。 - 第二個字母之後可用數字、下底線
_
以及錢號$
- 不能使用空格以及其他特殊符號
- 變數、常數的標示符 (identifier) 可用「小寫駝峰」作為命名規則:
– 當有兩個以上的字母組合為標示符時,為了方便識別,可以用大小寫作為區分。例如用flyNumberDate
取代fly_number_date
NaN
= Not a Number,所以如果為 true,表示他不是數字;為 false,表示是數字。因為一開始就是否定狀態,所以請用負負得正的觀念。- 另外一種用
NaN
來檢索值是否為數字的寫法:if (isNaN(document.getElementById("xxxxxid").value)) alert("this is not a number");
alert()
函數只能儲存string
,不能儲存number
型態的數字,所以我們會先將數字轉成string
再儲存之。- 常數的宣告範例:
//常數名稱為全部大寫,以跟變數區分 const TAX = 9;
toFixed(X)
用來四捨五入到小數點後 X 位getElementById
是方法,並非函數。parseFloat()
和parseInt()
都可以幫忙將字串轉成數字
閱讀進度 CH3 ~ 5
CH3:探索用戶端
CH4:決策 (if / else…)
CH5:迴圈
setTimeout()
是單次計時器,setInterval()
是會一直重複的間歇計時器。- 使用
clearInterval()
清除重複計時器,使用方法為clearInterval(timerID)
- 可以利用
document.body.clentHeight
取得用戶端視窗的高度。 - cookie 會存在同個地方,並用「;」分隔。
- readCookie():讀取 Cookie
- writeCookie():寫入 Cookie
- eraseCookie():清除 cookie
- 如須嚴謹判斷瀏覽器是否支援 cookie,可使用
navigator.cookieEnabled
- 大括號不需分號結尾,分號只用在單一敘述的結尾
- for 迴圈適合計數的任務,像是倒數至零,或是倒數至某個數
- 如果不知道計數幾次,可改用 while 迴圈。
- 如果要在 for 迴圈設定不同的變數,可以使用陣列
array[i]
- 一旦 for 迴圈的條件句為
false
時,迴圈會立刻跳出結束,不會執行裡面的程式碼。 confirm()
函式讓使用者回答是或否,並回傳 true / false 值。break;
是跳出整個迴圈;continue;
是跳出當前迴圈,並直接進行下一輪迴圈。- 巢狀的 if 判斷可以用 boolean 運算子合併:
if(seats[i] && seats[i + 1] && seats[i + 2])
- 可以使用巢狀迴圈處理二維陣列的資料:
for (var i = 0; i < seats.length; i++) { for (var j = 0; j < seats[i].length; j++) { //something } }
閱讀進度 CH6 ~ 7
CH6:函式
CH7:表單與驗證
- 可以傳入任何資料至
function(參數)
,例如常數(Math, PI),變數(temp),或實數(72)。 - 函式遇到
return;
後將立即結束,因此return
可用來結束該函式。 - 使用
某物!=null
來判斷某物是否存在 onblur
適合作為觸發資料驗證,onchange
相較之下,因為如果欄位沒填資料就不會觸發,所以比較不適合。- 要取得表單資料,除了可以使用
getElementById()
之外,也能使用 form 的物件,例如: - 正規運算式用於比對文字樣式
- 正規式用斜線開始和結束,例:
/\d/
- 同上,正規式是個有點複雜的東西,如果你也有購買此書,正規式的重點從 P.320 開始
- 可以用
test()
方法檢查字串是否符合正規式,以下是一個簡單的郵遞區號(五碼)檢測:var regex = /^\d{5}$/; if(!regex.test(inputField.value)) //郵遞區號格式不正確
閱讀進度 CH8 ~ 9
CH8:利用 DOM 分割 HTML
CH9:物件
- 改變節點文字的三步驟:
removeChild()
: 移除所有子節點createTextNode()
: 根據新內容,建立新的文字節點appendChild()
: 把新建立的文字子節點,附加在節點下
- 承上,寫成 Javascript 為:
var node = document.getElementById("story"); while (node.firstChild) node.removeChild(node.firstChild); node.appendChild(document.createTextNode("Some text..."));
- CSS class 和 JS class 是兩個完全不同的東西,前者是樣式,後者則是建立 JS 物件的樣板。
- 物件中的特性與方法,等於物件外的變數與函式
// 物件名稱.方法名稱(); invitation.deliver();
- 建立物件必須要用建構式
new
,例如:var invitation = new Invitation( "Somebody", "Something" );
Date
物件也要用new
運算子建立:new Date("06/16/2016")
array.sort()
可以做陣列的排序- 要在陣列中做字串比對,可用
indexOf()
,會回傳比對到的索引值,再利用array[i].body
顯示該字串內容。 - 使用
Math()
物件產生亂數,常見的幾個方法如下:round()
: 把浮點數四捨五入為整數floor()
: 把浮點數無條件捨去為整數ceil()
: 把浮點數無條件進位為整數random()
: 產生介於 0 ~ 1 之間的亂數,但不包含 1 (可看作 0 ~ 0.9*N 循環的無窮小數)
var oneToSix = Math.floor(Math.random() * 6) + 1;
使用 CSS:not 與 data-index 即時搜尋頁面
去年看了一篇文章「Client-side full-text search in CSS」可以在單一頁面即時搜尋資料,覺得非常的好用,之前也有在粉絲團分享過這篇文章。原本不打算重新寫教學(因為原作者已寫的很詳細),但是最近發現有朋友不知道這功能,所以轉念想想,還是記錄下來順便推廣一下這好用的功能吧 🙂
我有將這個功能實作在前公司的網站(fanxin.tv),如果你有登入,可以進入我的動態點選「朋友列表」或「尋友工具」的分頁觀看效果,或者可以參考以下我用 codepen 做的範例
直接在搜尋框打上要搜尋的人名(可以用J
,j
搜尋),可以看到頁面即時篩選出正確的名字
這個範例有搭配 JavaScript,原作者使用的是原生的 JavaScript,而我為了稍作區別,將它改成了 jQuery,所以想瞭解怎麼用 jQuery 寫的朋友可以參考我的範例 🙂
這個即時頁面使用了 :not
以及 data-*
完成(不得不說, data-*
真的超好用的 XD),以下簡單介紹如何使用它們達成該功能。
在 html 加入 data-* 屬性
從頁面看,感覺是搜尋類別 name
,但其實我們要在 name
的父層 wrap
加上 data-index
,利用 data-index
做搜尋,而不是用 name
。
因此可以看到我在每個 wrap
裡加上了 data-index
,值跟 name
一樣都是填上名字。(第 1 & 3 行、第 6 & 8 行)
唯一不同的是,即使原本的 name 有大小寫,我在data-index
一律改成小寫表示,如果要透過後端產生資料,可以從後端作處理,在樣板輸出的時候就先將大寫轉成小寫。
使用 :not 屬性做篩選
接著我們在 HTML 頁面加入以下語法(可以加在搜尋框的後面):
我們會利用 jQuery 動態在 style id="m-search"
裡加入 :not
語法,這樣就可以即時在頁面做篩選了。
:not
是 CSS 的偽元素,跟 :nth-child
有異曲同工之妙,他可以幫我們做到元素篩選,假設今天我們搜尋「j」,希望出現所有名字有「j」的人,可以利用:not
寫成:
這段意思是:「只要 data-index
的值沒有 J,就隱藏他」。
使用 data-index*=
是因為我們要做模糊比對,只要 data-index
有出現這個字都可以,畢竟我們不希望只搜尋字首或字尾,而是搜尋全部。
利用 jQuery 即時搜尋
最後,就可以利用 jQuery 即時搜尋,只要搜尋框有「改變、鍵盤輸入、貼上」等事件,我們就即時在 style id="m-search"
裡加入 :not
篩選,而他的篩選依據就是我們搜尋框的值:
結語
以上就是整個過程,只要利用 CSS 以及 JavaScript(jQuery) 就可以做到即時搜尋,但是他只能搜尋這個頁面的東西,畢竟只是單純抓取 HTML DOM,如果要搜尋後端資料,還是要用 ajax 囉。
相關 jQuery 插件應用
3/12 更新:
有朋友將該功能做成 jQuery 插件釋出,有興趣想玩玩看的話,可以直接套用 jQuery 插件喔。
WebSocket 簡單介紹與 jQuery 實作應用
聽說這篇好像 4 月就跟大家預告要寫了,結果現在已經 5 月了(默。
前陣子工作因素挑戰了人生第一次的 WebSocket,很感謝主管的指導,讓我順利的寫出了一個小東西,心裡萬分感動。因此,將這次實作的過程與經驗紀錄下來,提供給有需要的朋友做個參考囉 🙂
什麼是 WebSocket?
實作之前,免不俗的要跟大家分享一下 WebSocket 到底是什麼,以下取自 wiki 百科的解釋:
WebSocket 是 HTML5 開始提供的一種瀏覽器與伺服器間進行全雙工通訊的網路技術。WebSocket 通訊協定於 2011 年被 IETF 定為標準 RFC 6455,WebSocketAPI 被 W3C 定為標準。
在 WebSocket API 中,瀏覽器和伺服器只需要要做一個握手的動作,然後,瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。
@ WebSocket / wikipedia
簡單來說,就是有 Client & Server 兩端透過 WebSocket 互相傳遞與接收資料,並且即時顯示在頁面上。
WebSocket 語法說明
WebSocket 的大架構其實很簡單又直覺,他也有一些既有的事件,我們只要知道確定哪些事件發生時,該做什麼事情?把這些事情塞到對應的事件即可。
在 WebSocket 官方網站也有提供測試的頁面以及語法結構,以下就使用他提供的 Example 來跟大家說明:
WebSocket 已經建立好許多 function ,我們可以直接用他的 function,當然也不一定要全部 function 都用到,或是可以做點小修改,像我主管給我的範本就跟官網提供的有一點點不一樣(但基本上的呼叫是大同小異的)
- 第 4 行:老實說我覺得所有語法中最重要的就是第 4 行的
var wsUri = "ws://echo.websocket.org/";
,因為如果一開始沒有把傳輸的網址寫正確,之後的效果根本也跑不出來。記得要把http://
改成ws://
。 - 第 12 行:
websocket.onopen
這個事件是用來判斷前面的wsUri
是否有順利抓到,如果有抓到表示 onopen,可以利用console.log
或是alert
做個標記:console.log("連線成功");
- 第 15 行:跟第 12 行的事件對照就很清楚的知道,
websocket.onclose
是用來表示當連線中斷時,會出現什麼訊息或事件。 - 第 18 行:
wescoket.onmessage
是整個 WebSocket 的重頭戲,連線後,我們就可以在onmessage
裏面寫上任何想要傳輸的事件內容。 - 第 21 行:而對應 18 行的
wescoket.onmessage
,wescoket.onerror
是用來判斷連線或事件的正確與否,如果有出現了任何錯誤,就會觸發onerror
事件,所以我們可以在這邊進行除錯。
WebSocket 主要就是這四個事件,所以其實不難。那要怎麼利用 jQuery 結合 WebSocket 做出想要的功能呢?我們做法通常是將 jQuery 的主要 function 跟 WebSocket 拆開來,簡單架構參考如下:
由此可看出,將主要的功能寫在 effect.js 裏頭, client.js(html) 與 master.js(html) 分別用來表示兩個不同網頁,他們可以有不同的功能,也可以互相傳收資料 。
利用 JSON 傳遞 WebSocket
步驟一
在 effect.js 先將所有要顯示的資料存到變數中:
步驟二
利用 JSON 將資料送給 WebSocket:
步驟三
在 client.js 將收到的資料存到變數中並調用:(請寫在websocket.onmessage
事件裡。)
以上簡單幾行,就可以完成 WebSocket 的基本功能囉 🙂
在兩個不同的網頁中 (master.html, client.html) 互傳資料
假使我們希望在 master.html 做了一個動作 (比如說點選特定的分頁時),client.html 就會秀出一個 DIV。那麼要怎麼做出這功能呢?
我們在切換 TAB 的時候,通常網址列後面都會多一個「#+英數字」作為標記,而我們可以利用這個標記來識別現在是切換到第幾個分頁,然後針對指定的分頁,在 client.html 顯示一個 DIV。
步驟一
先在 master.js 設定一個事件,將 #(hash) 給擷取出來:
我有用console.log
記錄每一次的 hash 變化,確定他有抓到 hash,然後用websocket.send
寫到 JSON
ps. 這個 keyup 事件不一定要寫在websocket.onmessage
裡。
步驟二
同樣在 client.js 將資料抓出來,然後做判斷:
利用這樣的概念與方法,就可以簡單地在兩端互傳資料囉 🙂
以上就是簡單的 WebSocket 經驗分享,有任何問題或建議都歡迎讓我知道喔!!
有趣的 WebSocket 實例
恰巧昨天朋友丟了一個由偉大的谷歌之神做的 WebSocket 互動網站,有興趣的朋友可以玩玩看,來體驗 WebSocket 是多麼的有趣 :)
Super Sync Sports 是個利用 WebSocket 做的運動小遊戲,請先用 web 端瀏覽該網站,然後他會要你也用手機開啟這個網站,將 web 跟手機連線之後,就可以利用手機控制 web 介面來跑步、游泳,或是騎腳踏車。
而且還可以多人連線喔,超酷的 XDDD,大家有興趣不妨跟身旁的親朋好友一起玩樂比賽吧 😀
使用 HTML5 和 jQuery 簡易存取資料
HTML5 增加了一個 data-*
的屬性,可以讓大家很方便的存取這些數據,而且完全不會影響你的版面。假使要做網頁互動,或是需要將資料存到後端紀錄,都非常的方便喔!
A custom data attribute is an attribute in no namespace whose name starts with the string 「data-「, has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).
Embedding custom non-visible data with the data-* attributes
範例 1
HTML5 使用 data-*
非常簡單,以下是參考語法:
在不影響版面情況下,可以看到我們在 增添了一個屬性:data-myid="test1
。
myid
以及 test1
都是我們可以自定義的項目。myid
可以用來當作該 DIV 的識別標記,test1
則是該 DIV 的值。
接著我們可以很方便的使用 jQuery 取出這個 DIV 的值:
按下按鈕後,跳出來的 alert 視窗值會是 test1 。
範例 2
假使有多組 DIV 的值要讓我們做選擇,同樣可以利用 data-*
實現該效果。
首先先把 HTML 的 data 寫好:
以及利用 jQuery 取出 data-myid
的值
兩個 DIV 的 data-myid
不一樣,點選區塊之後顯示的結果也會不同。