ホームページ > 記事 > ウェブフロントエンド > jqueryでデータオプションを変更する方法
jquery では、attr() メソッドを使用して「data-options」属性を変更できます。このメソッドは、指定された要素の属性と値を設定または返すことができます。この属性は保存するために使用されますページまたはアプリケーションのプライベート プロパティ。データを定義します。構文は「element object.attr("data-options", "selected:false")」です。
このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。
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 サイトの他の関連記事を参照してください。