欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5新增屬性data-*和js/jquery之間的交互及注意事項(xiàng)

  發(fā)布時(shí)間：2017-08-08 14:10:26   作者：佚名   我要評論
這篇文章主要介紹了HTML5新增屬性data-*和js/jquery之間的交互及注意事項(xiàng)，需要的的朋友參考下吧

HTML5新增屬性data-*

書寫實(shí)例

<div data-role="page"
     data-last-value="43"
     data-hidden="true"
     data-options='{"name":"John"}'>
</div>

1. 定義:

data-* 屬性用于存儲頁面或應(yīng)用程序的私有自定義數(shù)據(jù)。

data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。

2. 注意點(diǎn):

data-* 屬性包括兩部分：

  • 屬性名不應(yīng)該包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個(gè)字符
  • 屬性值可以是任意字符串

data-*屬性和jQuery交互

使用jQuery中的.data()函數(shù)取用data-*屬性值

console.log($("div").data('lastValue'));  //輸出的值為:43
console.log($("div").data('role'));  //輸出的值為:page

注意事項(xiàng)

data-**屬性名格式駝峰命名改寫

data-屬性是在第一次使用這個(gè)數(shù)據(jù)屬性后不再存取或改變（所有的數(shù)據(jù)值都在jQuery內(nèi)部存儲）

演示:
 

 console.log($("div").data('lastValue'));  //輸出的值為:43
    $('div').data('lastValue',44);  //設(shè)置data-last-value=44
    $('div')[2]  //假設(shè)這是文檔中的第3個(gè)div,我們輸出這個(gè)dom
    //輸出:<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>

別怕,你再輸出

 console.log($("div").data('lastValue'));  //輸出的值為:44

  值只是存儲在jQuery內(nèi)部了

使用jQuery中.attr()函數(shù)取用data-*屬性值

console.log($('div').attr('data-role')); //輸出的值為:page
console.log($('div').attr('data-last-value')); //輸出的值為:43

使用jQuery中.attr()函數(shù)設(shè)置data-*屬性值

$('div').attr('data-emp',{'name':'zhangsan','age':23}); //給div添加一個(gè)data-emp的屬性,屬性值為一個(gè)json對象

注意:破折號要轉(zhuǎn)化成駝峰命名

總結(jié)

以上所述是小編給大家介紹的HTML5新增屬性data-*和js/jquery之間的交互，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論