使用jQuery操作data-attr的注意事項

Allen 發(fā)布于2019-08-19 17:22 / 2706人閱讀

摘要：今天又一次掉進這個坑里面。后續(xù)對這個的所有讀寫操作，其實都是操作的這個數(shù)據(jù)緩存，而上面的并不會發(fā)生任何變化。附為了和做區(qū)分，我這里用和這種原型鏈上的方法來表示同步發(fā)表于我的博客

今天又一次掉進這個坑里面。

data-attr是HTML5里面的一個新屬性（其實這東西都好多年了），方便CSSJS去讀取DOM上面的屬性值。

jQuery在很久之前，就封裝了一個 $.fn.data() 的方法，而該方法是將數(shù)據(jù)存放在DOM內(nèi)部的一個數(shù)據(jù)對象中。

在data-attr來了之后， $.fn.data() 也支持用來讀取DOM上面的data-attr，但是，它會緩存這個結(jié)果到DOM內(nèi)部的數(shù)據(jù)對象，他會緩存，緩存，緩存。

后續(xù)對這個key的所有讀寫操作，其實都是操作的這個數(shù)據(jù)緩存，而DOM上面的data-attr并不會發(fā)生任何變化。

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

如果你有一些樣式，是希望同步這個data-attr的狀態(tài)的，用 $.fn.data() 來操作就會發(fā)生一些奇怪的事情（之前一次沒細看jQuery這塊的實現(xiàn)，只是發(fā)現(xiàn)出來的效果怪怪的），建議改用 $.fn.attr() 方法或者JS原生方法。

附：

為了和 $.data() 做區(qū)分，我這里用 $.fn.attr() 和 $.fn.data() 這種jQuery原型鏈上的方法來表示 $(selector).data()

同步發(fā)表于我的博客

GPU云服務器云服務器 linux操作系統(tǒng)的使用 jquery數(shù)組操作 jquery操作mysql jquery操作ajax

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

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

相關(guān)文章

CSS（六）

摘要：權(quán)重權(quán)重權(quán)重指的是樣式的優(yōu)先級，有兩條或多條樣式作用于一個元素，權(quán)重高的那條樣式對元素起作用權(quán)重相同的，后寫的樣式會覆蓋前面寫的樣式。CSS權(quán)重 CSS權(quán)重指的是樣式的優(yōu)先級，有兩條或多條樣式作用于一個元素，權(quán)重高的那條樣式對元素起作用,權(quán)重相同的，后寫的樣式會覆蓋前面寫的樣式。權(quán)重的等級可以把樣式的應用方式分為幾個等級，按照等級來計算權(quán)重 1、!important，加在樣式屬性值后，權(quán)...

番茄西紅柿 2019-04-23 13:43 評論0 收藏0
使用Nightwatch進行E2E測試中文教程

摘要：本身項目也是使用來測試的。一個簡易的模式的配置如下的分為四個部分在實例上以開頭的行為驅(qū)動測試風格的接口，及以上版本可用。例如以開頭的兩套相同的方法庫，區(qū)別是如果斷言失敗則退出整個測試用例所有步，則打印后繼續(xù)進行。 E2E測試 E2E(end to end)測試是指端到端測試又叫功能測試，站在用戶視角，使用各種功能、各種交互，是用戶的真實使用場景的仿真。在產(chǎn)品高速迭代的現(xiàn)在，有個自動化測...

newsning 2019-08-22 13:56 評論0 收藏0
Python開發(fā)【前端篇】HTML5+CSS3

摘要：權(quán)重權(quán)重權(quán)重指的是樣式的優(yōu)先級，有兩條或多條樣式作用于一個元素，權(quán)重高的那條樣式對元素起作用權(quán)重相同的，后寫的樣式會覆蓋前面寫的樣式。標簽支持格式屬性可選第三方播放器CSS權(quán)重 CSS權(quán)重指的是樣式的優(yōu)先級，有兩條或多條樣式作用于一個元素，權(quán)重高的那條樣式對元素起作用,權(quán)重相同的，后寫的樣式會覆蓋前面寫的樣式。權(quán)重的等級可以把樣式的應用方式分為幾個等級，按照等級來計算權(quán)重 1、!impo...

番茄西紅柿 2019-04-23 13:27 評論0 收藏0
jQuery 源碼系列（十八）class 相關(guān)操作

摘要：眼看的源碼就快到頭了，后面還有幾個重要的內(nèi)容，包括和動畫操作，加油把它們看完，百度前端學院的新一批課程也開始了。，當?shù)诙€參數(shù)為的情況，就是，為時，，從源碼來看，就是直接調(diào)用的這兩個函數(shù)。參考源碼分析樣式操作本文在上的源碼地址，歡迎來。歡迎來我的專欄查看系列文章。眼看 jQuery 的源碼就快到頭了，后面還有幾個重要的內(nèi)容，包括 ajax 和動畫操作，加油把它們看完，百度前端學院的...

BingqiChen 2019-08-21 11:32 評論0 收藏0
寫一個更好的 Javascript DOM 庫

摘要：我們快速地看一下擴展原生的動畫內(nèi)置的微模板國際化的支持擴展有一個叫做事件的概念。內(nèi)置的微模板字符串冗長而繁瑣。比如這段與對應的微模板比較在中，任何接受的方法同樣接受表達式。目前，jQuery是事實上的操作文檔對象模型（DOM）的庫。它可以與流行的客戶端MV*框架結(jié)合使用，并且擁有大量的插件與大型的社區(qū)。開發(fā)者對于Javascript的興趣與日俱增的同時，很多人開始好奇，原生的API是...

Cc_2011 2019-08-21 12:10 評論0 收藏0