bootstrap data与jquery .data

前端技术 2023/09/04 JavaScript

jquery官网对.data函数描述是:在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

存储键值（key/value）：

　　$(\"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 ] }

以上这些都很容易掌握和理解，今天在看bootstrap 的弹窗掩码的时候遇到了这样一段代码让我产生了疑惑

 $(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代码

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

我加入的代码alert($(this).data().toggle)打印的值是modal ，所以这里只能是jquery做的文章，于是我研究了jquery的源码发现果然真是 ！

以下是jQuery.fn.data函数中的部分代码 , 当key未定义也就是调用 .data() 未传参数时会将属性名为data-开头的键值对存入匹配元素上。

本例中<a href=\"#myModal\" rel=\"external nofollow\" rel=\"external nofollow\" role=\"button\" class=\"btn\" data-toggle=\"modal\">Launch demo modal</a>，将{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 data-* Attributes（HTML5 data-* 属性）
从jQuery 1.4.3起， HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。嵌入式破折号处理属性（ attributes）的方式在 jQuery 1.6 中已经改变，以使之符合W3C HTML5 规范.

举个例子, 给定下面的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\";

本文地址：https://www.stayed.cn/item/10953

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案