H5中怎么獲取和設(shè)置自定義屬性

這篇文章主要介紹了H5中怎么獲取和設(shè)置自定義屬性，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

給元素自定義屬性是在HTML5中新加入的一個(gè)特性。簡單來說，自定義數(shù)據(jù)屬性規(guī)范規(guī)定任何以data-開頭屬性名并且賦值。自定義數(shù)據(jù)屬性是為了保存頁面或者應(yīng)用程序的私有自定義數(shù)據(jù)，這些自定義數(shù)據(jù)屬性保存進(jìn)DOM中，對(duì)于整個(gè)DOM的布局和表現(xiàn)無任何影響，但是卻可以方便操控整個(gè)網(wǎng)頁的交互以及想要表達(dá)的效果。
   比如我們通過一個(gè)對(duì)象得到了某個(gè)地區(qū)所有的城市，但是呢，我們還需要得到城市的其他信息以方便接下來的操作，我們就可以在這個(gè)城市的標(biāo)簽中添加一個(gè)自定義屬性，用來存放這個(gè)地區(qū)的其他信息，操作的時(shí)候直接通過我們?cè)O(shè)置的屬性名拿值即可，可以很大空間的提升我們和計(jì)算機(jī)的操作量。
   往屬性里面存值的時(shí)候注意一定是字符串或者，所以需要存的數(shù)據(jù)是一個(gè)對(duì)象的時(shí)候，記得轉(zhuǎn)化成字符串

var cityStr = JSON.stringify(cityObj);

對(duì)于數(shù)據(jù)屬性值的獲取和設(shè)置，JQ提供了兩種方法attr()和data()
這兩種方法，當(dāng)只傳遞一個(gè)參數(shù)時(shí)，這個(gè)參數(shù)時(shí)屬性名，是獲取該屬性的值，
           當(dāng)傳遞兩個(gè)參數(shù)時(shí)，是設(shè)置屬性名，屬性值

 $(selector).attr(attribute,value)

下面是用data來實(shí)現(xiàn)存取自定義屬性的小案例：

<p id="box1"></p><button id="btn1">click1</button><button id="btn2">click2</button></body><script src="../assets/jquery-1.9.1.min.js"></script><script>
    //點(diǎn)擊click1向box添加屬性student，屬性值為tom
    $("#btn1").click(function () {
        $("#box1").data("student","tom")
    });    //通過屬性名獲取屬性值
    $("#btn2").click(function () {
        alert($("#box1").data("student"));
    });</script>

用attr來實(shí)現(xiàn)同樣的效果

<script>
    $("#btn").click(function () {
        $("#box1").attr("data-student","tom")
    });
    $("#btn2").click(function () {
        alert($("#box1").attr("data-student"));
    });</script>

通過開發(fā)者工具可以看到，當(dāng)點(diǎn)擊保存按鈕（click1）的時(shí)候，自動(dòng)給box1添加了自定義的屬性，用data方法添加的時(shí)候這里并不會(huì)看見data-student=”tom“，依舊可以通過它取出來其值”tom“,兩個(gè)并無多大區(qū)別，只是引用方式不同而已。屬性名前面加上  data-   是H5規(guī)范寫法，最好加上。

這里還要注意的是
1. 自定義的屬性名不可以與系統(tǒng)的屬性名相同，eg:  class、name….
2. 所有的屬性值只能是字符串，不管是系統(tǒng)還是自定義的
3. Html5規(guī)定，給元素自定義數(shù)據(jù)屬性時(shí)，屬性名稱以data-開頭，但是真正的屬性名不包括data-

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享H5中怎么獲取和設(shè)置自定義屬性內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!