data bootstrap与jquery .data_jquery

Penerangan fungsi .data pada tapak web rasmi jquery ialah: simpan sebarang data yang berkaitan pada elemen padanan atau kembalikan nilai yang disimpan dalam data nama yang diberikan bagi elemen pertama dalam set elemen dipadankan.

Kunci/nilai storan:

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

Dapatkan nilai utama

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

Perkara di atas mudah dikuasai dan difahami Hari ini semasa saya melihat topeng pop timbul bootstrap, saya menemui sekeping kod yang membuatkan saya keliru

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

Pengendali ternary $target.data('modal')?'togol' dalam kod: $.extend({ remote:!/#/.test(href) && href }, $target.data() , $ this.data())

adalah untuk menentukan sama ada tetingkap dipaparkan buat kali pertama. Dilaksanakan semasa memaparkan tetingkap buat kali pertama

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

$target.data() ialah objek kosong {} dan nilai $this.data() ialah {toggle: "modal"}. Tidak perlu dikatakan di sini dari mana nilai pulangan $this.data() berasal

Melihat pada kod html, ia berlaku sama dengan nilai atribut objek dom yang mana kaedah klik terikat Berikut ialah kod html objek dom terikat

aac23be7491467ec6009169c7eae1a15Lancarkan mod demo5db79b134e9f6b82c0b36e0489ee08ed

Nilai yang dicetak oleh amaran kod($(this).data().toggle) yang saya tambahkan ialah modal, jadi ini hanya boleh menjadi artikel yang dibuat oleh jquery, jadi saya mengkaji kod sumber jquery dan mendapati ia memang benar!

Berikut ialah sebahagian daripada kod dalam fungsi jQuery.fn.data Apabila kunci tidak ditakrifkan, iaitu, apabila .data() dipanggil tanpa lulus parameter, pasangan nilai kunci yang nama atributnya bermula dengan. data- akan disimpan dalam elemen padanan.

Dalam kes iniaac23be7491467ec6009169c7eae1a15Lancarkan mod demo553a280de7202c0dce8dfe871821475e, simpan pasangan nilai kunci {toggle:"modal"} ke dalam

Pelajar yang berminat boleh mencuba kod jquery berikut

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

Saya membaca dokumen bantuan laman web rasmi jquery secara terperinci dan terdapat perenggan berikut
Data HTML5-* Atribut (data HTML5-* atribut)
Mulai jQuery 1.4.3, atribut data HTML 5 akan secara automatik dirujuk ke dalam objek data jQuery. Cara sempang terbenam mengendalikan atribut telah berubah dalam jQuery 1.6 untuk mematuhi spesifikasi W3C HTML5.

Sebagai contoh, diberikan HTML berikut:

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

Semua kod jQuery di bawah akan berfungsi.

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