使用 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-* 非常簡單,以下是參考語法:

HTML

在不影響版面情況下,可以看到我們在 增添了一個屬性:data-myid="test1

myid 以及 test1 都是我們可以自定義的項目。myid 可以用來當作該 DIV 的識別標記,test1 則是該 DIV 的值。

接著我們可以很方便的使用 jQuery 取出這個 DIV 的值:

JS

按下按鈕後,跳出來的 alert 視窗值會是 test1 。

範例 2

假使有多組 DIV 的值要讓我們做選擇,同樣可以利用 data-* 實現該效果。
首先先把 HTML 的 data 寫好:

HTML

以及利用 jQuery 取出 data-myid 的值

JS

兩個 DIV 的 data-myid 不一樣,點選區塊之後顯示的結果也會不同。

想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

guest
1 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Nini Chen
Nini Chen
4 years ago

這兩段語法試過沒反應呢~

粉絲團