成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

js,jQuery獲取html5的data-*屬性

y1chuan / 2650人閱讀

摘要：今天做項(xiàng)目的時(shí)候發(fā)現(xiàn)一個(gè)坑，關(guān)于獲取屬性的方法，特寫(xiě)此篇來(lái)記錄。獲取的方式通過(guò)屬性訪(fǎng)問(wèn)代碼代碼獲取的值獲取的值設(shè)置值最終結(jié)果屬性的值是的一個(gè)實(shí)例，名值對(duì)的映射。的本質(zhì)其實(shí)是將一個(gè)附加到了對(duì)象上，并使用了一個(gè)特殊的屬性名稱(chēng)。

今天做項(xiàng)目的時(shí)候發(fā)現(xiàn)一個(gè)坑，關(guān)于jQuery獲取data-*屬性的方法data()，特寫(xiě)此篇來(lái)記錄。
data-*自定義數(shù)據(jù)屬性 
HTML5規(guī)定可以為元素添加非標(biāo)準(zhǔn)型的屬性，只需添加前綴data-，這些屬性可以隨意添加，隨意命名，目的是為元素提供與渲染無(wú)關(guān)的信息，或提供語(yǔ)義信息。
js獲取data-*的方式

通過(guò)dataset屬性訪(fǎng)問(wèn)

//HTML代碼

//js代碼
var div = document.getElementById("myDiv");
var appId = div.dataset.appid;//獲取data-appid的值
var myName = div.dataset.myname;//獲取data-myname的值
//設(shè)置值
div.dataset.appid = 456;
div.dataset.myname = "newname";

//最終HTML結(jié)果

dataset屬性的值是DOMStringMap的一個(gè)實(shí)例，名值對(duì)的映射。每個(gè)data-name形式的屬性都有一個(gè)對(duì)應(yīng)的屬性，只不過(guò)該屬性名沒(méi)有data-前綴。

兼容性：

需要注意的是，dataset中大小寫(xiě)的問(wèn)題。帶連字符連接的名稱(chēng)在使用的時(shí)候需要命名駝峰化。例如data-my-name對(duì)應(yīng)的是dataset.myName的值?？煽匆韵麓a 
//將上面代碼的設(shè)置值部分進(jìn)行修改
 div.dataset.appId = 789;
 div.dataset.myName = "secondname";
 
 //最終結(jié)果

傳統(tǒng)獲取方式 `getAttribute

還是上述的例子。獲取data-*的方法可使用如下方法：

var appId = div.getAttribute("data-appid");

jQuery獲取方法

data()方法

//HTML代碼

//獲取屬性
var appid = $("#myDiv").data("appid"); //123
var app-id = $("#myDiv").data("app-id"); //456

//屬性賦值
$("#myDiv").data("appid","666");

//最終HTML代碼

需要注意的是，data()的值進(jìn)行修改并不會(huì)影響到DOM元素上的data-*屬性的改變。data()的本質(zhì)其實(shí)是將一個(gè) “cache” 附加到了對(duì)象上，并使用了一個(gè)特殊的屬性名稱(chēng)。 所以上述代碼中，雖然對(duì)div進(jìn)行了data()賦值操作，但HTML代碼中div的data-appid的值仍然為123，因?yàn)閐ata()只是修改了緩存的那個(gè)值，此時(shí)進(jìn)行$("#myDiv").data("appid")的操作，輸出的結(jié)果為666.

attr()方法

var appid = $("#myDiv").attr("data-appid");

參考資料：

jQuery官方文檔

jQuery.data()和HTML5之data-屬性

jQuery.data() 的實(shí)現(xiàn)方式

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79733.html

相關(guān)文章

  • js,jQuery獲取html5的data-*屬性

    摘要：今天做項(xiàng)目的時(shí)候發(fā)現(xiàn)一個(gè)坑，關(guān)于獲取屬性的方法，特寫(xiě)此篇來(lái)記錄。獲取的方式通過(guò)屬性訪(fǎng)問(wèn)代碼代碼獲取的值獲取的值設(shè)置值最終結(jié)果屬性的值是的一個(gè)實(shí)例，名值對(duì)的映射。的本質(zhì)其實(shí)是將一個(gè)附加到了對(duì)象上，并使用了一個(gè)特殊的屬性名稱(chēng)。 今天做項(xiàng)目的時(shí)候發(fā)現(xiàn)一個(gè)坑，關(guān)于jQuery獲取data-*屬性的方法data()，特寫(xiě)此篇來(lái)記錄。 data-*自定義數(shù)據(jù)屬性 HTML5規(guī)定可以為元素添加非標(biāo)...

    用戶(hù)84 評(píng)論0 收藏0

  • 放棄jQuery, 使用原生js

    摘要：隨著的逐漸淘汰，的興起，以及側(cè)重點(diǎn)放在了移動(dòng)端，可能變的不在那么重要，原生一樣很好用。下面介紹幾個(gè)原生替換的方法。 隨著IE6、7、8的逐漸淘汰，HTML5的興起，以及側(cè)重點(diǎn)放在了移動(dòng)端，jQuery可能變的不在那么重要，原生一樣很好用。下面介紹幾個(gè)原生替換jq的方法。 獲取元素 //jQuery $(.xxx); //class獲取 $(#xxx); //id獲取 $(....

    mumumu 評(píng)論0 收藏0

  • JS魔法堂：那些困擾你的DOM集合類(lèi)型

    摘要：五的子類(lèi)對(duì)象會(huì)返回一個(gè)集合對(duì)象，集合內(nèi)存儲(chǔ)類(lèi)型的元素。七的子類(lèi)初看很有可能以為集合元素就是單選表單元素，其實(shí)可以存儲(chǔ)任意類(lèi)型的表單元素。八的子類(lèi)開(kāi)始，將返回子類(lèi)的對(duì)象，其行為特征和一致。但在前，我們應(yīng)該先了解清楚的類(lèi)型的特征。 一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　 大家先看看下面的js，猜猜結(jié)果會(huì)怎樣吧！ 可選答案： ①. 獲取id屬性值為id的節(jié)點(diǎn)元素 ②...

    468122151 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<