Bootstrap-Daten与jquery .data_jquery

Die Beschreibung der .data-Funktion auf der offiziellen Website von jquery lautet: Speichern Sie alle relevanten Daten zum übereinstimmenden Element oder geben Sie den in den Daten des angegebenen Namens des ersten Elements im Satz übereinstimmender Elemente gespeicherten Wert zurück.

Speicherschlüssel/Wert:

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

Schlüsselwert abrufen

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

Das Obige ist leicht zu beherrschen und zu verstehen, als ich mir heute die Popup-Maske von Bootstrap ansah, stieß ich auf einen solchen Code, der mich verwirrte

 $(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()
   })
 })

Ternärer Operator $target.data('modal')?'toggle' im Code: $.extend({ remote:!/#/.test(href) && href }, $target.data() , $ this.data())

dient dazu, festzustellen, ob das Fenster zum ersten Mal gerendert wird. Wird beim ersten Rendern des Fensters ausgeführt

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

$target.data() ist ein leeres Objekt {} und der Wert von $this.data() ist {toggle: "modal"}. Es versteht sich hier von selbst, woher der Rückgabewert von $this.data() kommt

Wenn man sich den HTML-Code ansieht, ist er zufällig derselbe wie der Attributwert des Dom-Objekts, an das die Click-Methode gebunden ist. Das Folgende ist der HTML-Code des gebundenen Dom-Objekts

Modal-Demo starten

Der von mir hinzugefügte Code „alert($(this).data().toggle)“ ist modal, daher kann es sich nur um einen von jquery erstellten Artikel handeln. Deshalb habe ich den Quellcode von jquery untersucht und festgestellt, dass dies der Fall ist stimmt tatsächlich!

Das Folgende ist Teil des Codes in der Funktion jQuery.fn.data. Wenn der Schlüssel nicht definiert ist, dh wenn .data() ohne Übergabe von Parametern aufgerufen wird, beginnt der Attributname mit dem Schlüssel-Wert-Paar Daten werden im passenden Element gespeichert.

In diesem FallDemo modal starten< a>, speichern Sie das Schlüssel-Wert-Paar {toggle:"modal"} in

Interessierte Studierende können den folgenden JQuery-Code ausprobieren

    // 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;
    }

Ich habe das Hilfedokument der offiziellen Website von jquery ausführlich gelesen und es gibt den folgenden Absatz
HTML5-Daten-*-Attribute (HTML5-Daten-*-Attribute)
Ab jQuery 1.4.3 wird das HTML 5-Datenattribut automatisch im Datenobjekt von jQuery referenziert. Die Art und Weise, wie eingebettete Bindestriche Attribute verarbeiten, hat sich in jQuery 1.6 geändert, um der W3C-HTML5-Spezifikation zu entsprechen.

Zum Beispiel mit folgendem HTML:

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

Der gesamte unten aufgeführte jQuery-Code funktioniert.

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