bootstrap data与jquery .data_jquery

The jquery official website describes the .data function as follows: Store any relevant data on the matching element or return the value stored in the data of the given name of the first element in the matched element set.

Storage key/value:

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

Get key value

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

The above are easy to master and understand. Today when I was looking at bootstrap’s pop-up mask, I encountered such a piece of code that made me confused

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

Ternary operator $target.data('modal')?'toggle' in the code: $.extend({ remote:!/#/.test(href) && href }, $target.data() , $this.data())

is to determine whether the window is rendered for the first time. Executed when rendering the window for the first time

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

$target.data() is an empty object {}, and the value of $this.data() is {toggle: "modal"}. It goes without saying here where the return value of $this.data() comes from

Looking at the html code, it happens to be the same as the attribute value of the dom object to which the click method is bound. The following is the html code of the bound dom object

aac23be7491467ec6009169c7eae1a15Launch demo modal5db79b134e9f6b82c0b36e0489ee08ed

The value printed by the code alert($(this).data().toggle) I added is modal, so this can only be an article made by jquery, so I studied the source code of jquery and found that it is indeed true!

The following is part of the code in the jQuery.fn.data function. When the key is not defined, that is, when .data() is called without passing parameters, the key-value pair whose attribute name starts with data- will be stored in the matching element.

In this caseaac23be7491467ec6009169c7eae1a15Launch demo modal16ef26f8b7ea0fc89bdf90e275a93e5d, save the {toggle:"modal"} key-value pair into

Interested students can try out the following jquery code

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

I read the help document of jquery official website in detail and there is the following passage
HTML5 data-* Attributes (HTML5 data-* attributes)
As of jQuery 1.4.3, the HTML 5 data- attribute will automatically be referenced into jQuery's data object. The way embedded dashes handle attributes has changed in jQuery 1.6 to conform to the W3C HTML5 specification.

For example, given the following HTML:

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

All the jQuery code below will work.

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