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

y1chuan 發布于2019-08-19 18:35 / 2642人閱讀

摘要：今天做項目的時候發現一個坑，關于獲取屬性的方法，特寫此篇來記錄。獲取的方式通過屬性訪問代碼代碼獲取的值獲取的值設置值最終結果屬性的值是的一個實例，名值對的映射。的本質其實是將一個附加到了對象上，并使用了一個特殊的屬性名稱。

今天做項目的時候發現一個坑，關于jQuery獲取data-*屬性的方法data()，特寫此篇來記錄。

data-*自定義數據屬性

HTML5規定可以為元素添加非標準型的屬性，只需添加前綴data-，這些屬性可以隨意添加，隨意命名，目的是為元素提供與渲染無關的信息，或提供語義信息。

js獲取data-*的方式

通過dataset屬性訪問

//HTML代碼

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

//最終HTML結果

dataset屬性的值是DOMStringMap的一個實例，名值對的映射。每個data-name形式的屬性都有一個對應的屬性，只不過該屬性名沒有data-前綴。

兼容性：

需要注意的是，dataset中大小寫的問題。帶連字符連接的名稱在使用的時候需要命名駝峰化。例如data-my-name對應的是dataset.myName的值。可看以下代碼

//將上面代碼的設置值部分進行修改
 div.dataset.appId = 789;
 div.dataset.myName = "secondname";
 
 //最終結果

傳統獲取方式 `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()的值進行修改并不會影響到DOM元素上的data-*屬性的改變。data()的本質其實是將一個 “cache” 附加到了對象上，并使用了一個特殊的屬性名稱。所以上述代碼中，雖然對div進行了data()賦值操作，但HTML代碼中div的data-appid的值仍然為123，因為data()只是修改了緩存的那個值，此時進行$("#myDiv").data("appid")的操作，輸出的結果為666.

attr()方法

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

參考資料：

jQuery官方文檔

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

jQuery.data() 的實現方式

GPU云服務器云服務器 js獲取屬性 js 獲取ext屬性 js 獲取第一個屬性獲取子元素屬性 js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79733.html

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

摘要：今天做項目的時候發現一個坑，關于獲取屬性的方法，特寫此篇來記錄。獲取的方式通過屬性訪問代碼代碼獲取的值獲取的值設置值最終結果屬性的值是的一個實例，名值對的映射。的本質其實是將一個附加到了對象上，并使用了一個特殊的屬性名稱。今天做項目的時候發現一個坑，關于jQuery獲取data-*屬性的方法data()，特寫此篇來記錄。 data-*自定義數據屬性 HTML5規定可以為元素添加非標...

用戶84 2019-08-01 15:22 評論0 收藏0
放棄jQuery, 使用原生js

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

mumumu 2019-08-23 14:27 評論0 收藏0
JS魔法堂：那些困擾你的DOM集合類型

摘要：五的子類對象會返回一個集合對象，集合內存儲類型的元素。七的子類初看很有可能以為集合元素就是單選表單元素，其實可以存儲任意類型的表單元素。八的子類開始，將返回子類的對象，其行為特征和一致。但在前，我們應該先了解清楚的類型的特征。一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　大家先看看下面的js，猜猜結果會怎樣吧！可選答案： ①. 獲取id屬性值為id的節點元素 ②...

468122151 2019-08-21 10:36 評論0 收藏0