使用jQuery操作data-attr的注意事項(xiàng)

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

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

今天又一次掉進(jìn)這個(gè)坑里面。

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

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

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

后續(xù)對(duì)這個(gè)key的所有讀寫操作，其實(shí)都是操作的這個(gè)數(shù)據(jù)緩存，而DOM上面的data-attr并不會(huì)發(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).

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

附：

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78472.html

相關(guān)文章

CSS（六）

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

番茄西紅柿 2019-04-23 13:43 評(píng)論0 收藏0
使用Nightwatch進(jìn)行E2E測(cè)試中文教程

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

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

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

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

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

BingqiChen 2019-08-21 11:32 評(píng)論0 收藏0
寫一個(gè)更好的 Javascript DOM 庫(kù)

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

Cc_2011 2019-08-21 12:10 評(píng)論0 收藏0