jqueryでデータオプションを変更する方法

jquery では、attr() メソッドを使用して「data-options」属性を変更できます。このメソッドは、指定された要素の属性と値を設定または返すことができます。この属性は保存するために使用されますページまたはアプリケーションのプライベート プロパティ。データを定義します。構文は「element object.attr("data-options", "selected:false")」です。

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jquery で data-options を変更する方法

Html5 data-* 属性の定義と使用法:

data-* 属性は、ページまたはページのプライベート カスタム データを保存するために使用されます。応用。

data-* 属性を使用すると、すべての HTML 要素にカスタム データ属性を埋め込むことができます。

保存された (カスタム) データをページの JavaScript 内で利用して、(Ajax 呼び出しやサーバー側のデータベース クエリを行わずに) より良いユーザー エクスペリエンスを作成できます。

data-* 属性は 2 つの部分で構成されます。

属性名には大文字が含まれておらず、プレフィックス「data-」の後に少なくとも 1 文字が必要です

属性値 任意の文字列を指定できます

変更メソッド:

jquery:

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

attr() メソッドは属性を設定または返しますと選択した要素の値。

このメソッドを使用して属性値を返すと、最初に一致した要素の値が返されます。

このメソッドを使用して属性値を設定すると、一致する要素に対して 1 つ以上の属性/値のペアが設定されます。

構文は次のとおりです:

属性の値を返します:

$(selector).attr(attribute)

属性と値を設定します:

$(selector).attr(attribute,value)

知識を広げる:

1. getAttribute setAttribute メソッドを使用します

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

2. データセット属性を使用してコレクションを返します

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

アクセス、追加、削除が可能

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

3. jquery のデータ メソッドを使用する

.data( key, value )
.data( key, value )
.data( obj ) --> 设置多个键值对
.data( key )
.data( key )
.data() -->返回一个集合

jQuery の特徴は、戻り値の文字列を対応するデータ型に自動的に変換することです。

たとえば、上記の $("div").data() --> {options : {"name":"John"}, hidden: true, lastValue: 43 }

注: データセット属性と jQuery のデータ メソッドの場合: データ属性名にハイフンが含まれている場合 (例: data-last-value)、ハイフンは削除され、キャメルケースの名前に変換されます。以前の属性名は変換される必要があります。は: lastValue です。

ビデオ チュートリアルの推奨: jQuery ビデオ チュートリアル

以上がjqueryでデータオプションを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。