jquery如何修改data-options

今天小編給大家分享一下jquery如何修改data-options的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

在jquery中，可以利用attr()方法修改“data-options”屬性，該方法可設置或返回指定元素的屬性和值，該屬性是用于存儲頁面或應用程序的私有自定義數據，語法為“元素對象.attr("data-options", "selected:false")”。

本教程操作環境：windows10系統、jquery3.2.1版本、Dell G3電腦。

jquery怎么修改data-options

Html5 data-* 屬性定義和用法：

data-* 屬性用于存儲頁面或應用程序的私有自定義數據。

data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。

存儲的（自定義）數據能夠被頁面的 JavaScript 中利用，以創建更好的用戶體驗（不進行 Ajax 調用或服務器端數據庫查詢）。

data-* 屬性包括兩部分：

屬性名不應該包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個字符

屬性值可以是任意字符串

修改方法：

jquery：

$div.attr("data-options", "selected:false");

attr() 方法設置或返回被選元素的屬性和值。

當該方法用于返回屬性值，則返回第一個匹配元素的值。

當該方法用于設置屬性值，則為匹配元素設置一個或多個屬性/值對。

語法為

返回屬性的值：

$(selector).attr(attribute)

設置屬性和值：

$(selector).attr(attribute,value)

擴展知識：

1.使用getAttribute setAttribute 方法

div.setAttribute('data-options',{/＊數據＊/});
div.getAttribute("data-options")；

2.使用dataset屬性返回一個集合

div.dataset --> DOMStringMap { options:"{\"name\":\"John\"}", hidden:"true", lastValue:"43"}

可以訪問，添加，刪除

div.dataset.hidden
div.dataset.newAttr = "123"
delete div.dataset.hidden

3.使用jquery的data方法

.data( key, value )
.data( key, value )
.data( obj ) --> 設置多個鍵值對
.data( key )
.data( key )
.data() -->返回一個集合

jQuery比較特殊的是，它會將返回值字符串自動轉換為對應的數據類型。

比如上面的 $("div").data() --> {options : {"name":"John"}, hidden: true, lastValue: 43 }

注意：對于dataset屬性和jQuery的data方法： data- 屬性名如果包含了連字符，例如：data-last-value ，連字符將被去掉，并轉換為駝峰式的命名，前面的屬性名轉換后應該是：lastValue 。

以上就是“jquery如何修改data-options”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。