现在的位置: 首页 > 架构设计 > 正文

bootstrap data和jquery .data是什么

2020年02月17日 架构设计 ⁄ 共 2361字 ⁄ 字号 评论关闭

  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代码。

  Launch demo modal

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

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

  本例中Launch demo modal,将{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-options='{"name":"John"}' data-hidden="true" data-last-value="43" data-role="page">< /DIV>

  下面所有的 jQuery 代码都能运行。

  $("div").data("role") === "page";

  $("div").data("lastValue") === 43;

  $("div").data("hidden") === true;

  $("div").data("options").name === "John";

  以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

抱歉!评论已关闭.