html5的自定義data 屬性

2021-06-22 22:35:19 字數 848 閱讀 7548

html5中新增了data-*的方式來自定義屬性,所謂data-*實際上上就是data-字首加上自定義的屬性名,使用這樣的結構可以進行資料存放。使用data-*可以解決自定義屬性混亂無管理的現狀。

data-*有兩種設定方式,可以直接在html元素標籤上書寫

click here

可是,怎麼來讀取這些資料呢?你當然可以遍歷頁面元素來讀取你想要的屬性,但jquery已經內建了方法來操作這些屬性。使用jquery的.data()方法來訪問這些"data-*" 屬性。其中乙個方法就是 .data(obj),這個方法是在 jquery1.4.3版本後出現的,它能返回相應的data屬性。

var age= jquery("#test").data('age');

這樣就可以取到id為test的div上邊儲存的data-age資料。

你還可以在"data-*" 屬性裡使用json語法,例如,如果你寫出下面的html: 

$("div").data("test", );

$("div").data("test").first //16;

$("div").data("test").last //pizza!;

乙個重要的你要注意的事情是,這些"data-*" 屬性應該和它所在的元素有一定的關聯,不要把它當成存放任意東西的儲存工具。 

儘管"data-*" 是html5才出現的屬性,但jquery是通用的,所以,在非html5的頁面或瀏覽器裡,你仍然可以使用.data(obj)方法來操作"data-*" 資料。

HTML5自定義data屬性

可能大家在使用jquery mobile時,經常會看到data role data theme等的使用,比如 通過如下 即可實現頁首的效果 通過手機瀏覽,效果如下 為什麼寫乙個data role header 就能實現底部為黑色 文字居中顯示的效果呢?我們寫乙個html頁面,自定義乙個data ch...

html5的data自定義資料

dataset data name dataset.name data name first dataset.namefirst data 資料在jquery mobile 中有著重要作用 l延遲載入js js的載入會影響後面的內容載入 很多瀏覽器都採用了並行載入 js,但還是會影響其他內容 htm...

HTML5新特性 自定義資料屬性data

html是允許我們自定義標籤和屬性的,我們一般經常用自定義屬性在介面儲存一些資料,類似於使用hidden控制項。可以看到我們能夠像操作html內建屬性 name 一樣,操作我們自定義的屬性 age 一些常見的前端框架比如angularjs使用了很多自定義的標籤和屬性,比如ng model,ng re...