這篇文章將為大家詳細講解有關(guān)JS自定義data-*屬性以及jquery data()方法的使用分析，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

成都創(chuàng)新互聯(lián)主要業(yè)務有網(wǎng)站營銷策劃、成都網(wǎng)站建設、網(wǎng)站制作、微信公眾號開發(fā)、成都微信小程序、H5網(wǎng)站設計、程序開發(fā)等業(yè)務。一次合作終身朋友，是我們奉行的宗旨；我們不僅僅把客戶當客戶，還把客戶視為我們的合作伙伴，在開展業(yè)務的過程中，公司還積累了豐富的行業(yè)經(jīng)驗、營銷型網(wǎng)站資源和合作伙伴關(guān)系資源，并逐漸建立起規(guī)范的客戶服務和保障體系。 

人們總喜歡往HTML標簽上添加自定義屬性來存儲和操作數(shù)據(jù)。但這樣做的問題是，你不知道將來會不會有其它腳本把你的自定義屬性給重置掉，此外，你這樣做也會導致html語法上不符合Html規(guī)范，以及一些其它副作用。這就是為什么在HTML5規(guī)范里增加了一個自定義data屬性，你可以拿它做很多有用的事情。 你可以去讀一下HTML5的詳細規(guī)范，但這個自定義data屬性的用法非常的簡單，就是你可以往HTML標簽上添加任意以 "data-"開頭的屬性，這些屬性頁面上是不顯示的，它不會影響到你的頁面布局和風格，但它卻是可讀可寫的。 下面的一個代碼片段是一個有效的HTML5標記： 

代碼如下:

<div id="awesome" data-myid="3e4ae6c4e">Some awesome data</div> 

可是，怎么來讀取這些數(shù)據(jù)呢？你當然可以遍歷頁面元素來讀取你想要的屬性，但jquery已經(jīng)內(nèi)置了方法來操作這些屬性。使用jQuery的.data()方法來訪問這些"data-*" 屬性。其中一個方法就是 .data(obj)，這個方法是在 jQuery1.4.3版本后出現(xiàn)的，它能返回相應的data屬性。 舉個例子，你可以用下面的寫法讀取 data-myid屬性值： 

代碼如下:

var myid= jQuery("#awesome").data('myid'); console.log(myid); 

你還可以在"data-*" 屬性里使用json語法，例如，如果你寫出下面的html： 

代碼如下:

<div id="awesome-json" data-awesome='{"game":"on"}'></div> 

你可以通過js直接訪問這個數(shù)據(jù)，通過json的key值，你能得到相應的value： 

代碼如下:

var gameStatus= jQuery("#awesome-json").data('awesome').game; console.log(gameStatus); 

你也可以通過.data(key,value)方法直接給"data-*" 屬性賦值。一個重要的你要注意的事情是，這些"data-*" 屬性應該和它所在的元素有一定的關(guān)聯(lián)，不要把它當成存放任意東西的存儲工具。 譯者補充：盡管"data-*" 是HTML5才出現(xiàn)的屬性，但jquery是通用的，所以，在非HTML5的頁面或瀏覽器里，你仍然可以使用.data(obj)方法來操作"data-*" 數(shù)據(jù)。

關(guān)于JS自定義data-*屬性以及jquery data()方法的使用分析就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網(wǎng)頁標題：JS自定義data-*屬性以及jquerydata()方法的使用分析
文章轉(zhuǎn)載：http://chinadenli.net/article20/poohco.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設、網(wǎng)站導航、搜索引擎優(yōu)化、用戶體驗、網(wǎng)頁設計公司、自適應網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)