Bootstrap data and jquery. Data_jquery

The jquery website on the. Data function describes the value of a data store that stores any related data on a matching element or returns the given name of the first element in a matching set of elements.

Store key value (Key/value):

$ ("body"). Data ("foo",);
$ ("body"). Data ("Bar", {myType: "Test", count:40});
$ ("body"). Data ({baz: [1, 2, 3]});

Fetch key value

$ ("body"). Data ("foo");
$ ("body"). Data ()//{foo:52, bar: {myType: "Test", count:40}, Baz: [1, 2, 3]}

All of these are easy to grasp and understand, today, looking at the bootstrap window mask when encountered such a code to make me confused

 $ (document). On (' Click.modal.data-api ', ' [data-toggle= ' modal '] ', function (e) {
  alert ($ (this). Data (). Toggle)// This line is the code I joined. The value printed is 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 ()
   })
 })

The three-mesh operator in the code $target. Data (' modal ')? Toggle ': $.extend ({remote:!/#/.test (href) && href}, $target. Data (), $this. Data ())

is to determine whether the window is the first rendering. The first time you render the window, you perform the

option = $.extend ({remote:!/#/.test (href) && href}, $target. Data (), $this. Data ())//result is option= {remote:false,t Oggle: "Modal"}

$target. Data () is a null object {}, $this. Data () value is {toggle: "Modal"}. There's no question about the return value of $this. Data ()

Looking at the HTML code, just like the property value of the DOM object being bound to the click Method, the following is the HTML code for the bound DOM object

<a href= "#myModal" rel= "external nofollow" rel= "external nofollow" role= "button" class= "btn" data-toggle= "modal" >launch Demo modal</a>

I added Code alert ($ (this). Data (). Toggle) The value printed is modal, so this can only be a jquery article, so I studied jquery's source found it really!

The following is part of the code in the JQuery.fn.data function that stores the key value pairs that begin with the property name data-to the matching element when the key is not defined, which is the call to the. data () without parameters.

In this example <a href= "#myModal" rel= "external nofollow" rel= "external nofollow" role= "button" class= "btn" data-toggle= "modal" >launch Demo Modal</a>, save {toggle: "modal"} Key value pairs

Interested students can go to try to tune 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 went through the jquery website's help document to read the following words
HTML5 data-* Attributes (HTML5 data-* properties)
From jquery 1.4.3, the HTML 5 data-attribute is automatically referenced to the data object in jquery. The embedded dash processing attribute (attributes) has been changed in JQuery 1.6 to conform to the HTML5 specification.

For example, given the following HTML:

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

All of the following JQuery code can be run.

$ ("div"). Data ("role") = = "Page";
$ ("div"). Data ("lastvalue") = =;
$ ("div"). Data ("hidden") = = true;
$ ("div"). Data ("Options"). Name = = "John";