ブートストラップ データと jquery .data_jquery

jquery 公式 Web サイトでは、.data 関数について次のように説明されています。一致する要素に関連するデータを格納するか、一致する要素セット内の最初の要素の指定された名前のデータに格納されている値を返します。

ストレージキー/値:

　　$("body").data("foo", 52);
　　$("body").data("bar", { myType: "test", count: 40 });
　　$("body").data({ baz: [ 1, 2, 3 ] });

キー値を取得

　　$("body").data("foo"); // 52
　　$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

上記はマスターして理解するのが簡単です。今日、ブートストラップのポップアップ マスクを見ていたら、混乱を招くようなコードに遭遇しました。

 $(document).on('click.modal.data-api', '[daTa-toggle="modal"]', function (e) {
  alert($(this).data().toggle) //这行是我加入的代码 打印的值是modal
  var $this = $(this)
   , href = $this.attr('href')
   , $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
   , option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())  
  e.preventDefault()
  $target
   .modal(option)
   .one('hide', function () {
    $this.focus()
   })
 })

コード内の三項演算子 $target.data('modal')?'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data() , $ this.data())

は、ウィンドウが初めてレンダリングされるかどうかを決定します。初めてウィンドウをレンダリングするときに実行されます

option = $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data()) //结果是 option= {remote: false,toggle: "modal"}

$target.data() は空のオブジェクト {} で、$this.data() の値は {toggle: "modal"} です。 $this.data() の戻り値がどこから来るのかは言うまでもありませんが、

HTML コードを見ると、click メソッドがバインドされている dom オブジェクトの属性値と同じです。 以下は、バインドされた dom オブジェクトの html コードです。

aac23be7491467ec6009169c7eae1a15デモ モーダルを起動5db79b134e9f6b82c0b36e0489ee08ed

私が追加したコードalert($(this).data().toggle)によって出力される値はモーダルなので、これはjqueryで作成された記事でしかあり得ないので、jqueryのソースコードを調べたところ、それは本当に本当です！

以下は、キーが定義されていない場合、つまりパラメータを渡さずに .data() が呼び出された場合、属性名が で始まるキーと値のペアのコードの一部です。 data- は一致する要素に保存されます。

この場合aac23be7491467ec6009169c7eae1a15デモ モーダルを起動します553a280de7202c0dce8dfe871821475e、{toggle:"modal"} キーと値のペアを

に保存します

興味のある学生は、次の jquery コードを試してみることができます

    // Gets all values
    if ( key === undefined ) {
      if ( this.length ) {
        data = jQuery.data( elem );
        if ( elem.nodeType === 1 && !jQuery._data( elem, "parsedAttrs" ) ) {
          attrs = elem.attributes;
          for ( ; i < attrs.length; i++ ) {
            name = attrs[i].name;
            if ( name.indexOf("data-") === 0 ) {
              name = jQuery.camelCase( name.slice(5) );

              dataAttr( elem, name, data[ name ] );
            }
          }
          jQuery._data( elem, "parsedAttrs", true );
        }
      }
      return data;
    }

jquery公式サイトのヘルプドキュメントを詳しく読んでみると、次のような文章がありました
HTML5 データ-* 属性 (HTML5 データ-* 属性)
jQuery 1.4.3 以降、HTML 5 の data- 属性は jQuery のデータ オブジェクト内で自動的に参照されます。埋め込みダッシュが属性を処理する方法が、W3C HTML5 仕様に準拠するために jQuery 1.6 で変更されました。

たとえば、次の HTML があるとします:

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

以下の jQuery コードはすべて機能します。

$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";