bootstrap data与jquery .data
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,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 },$this.data()) 是判断窗口是否是第一次渲染 。第一次渲染窗口的时候执行了 option = $.extend({ remote:!/#/.test(href) && href },$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官网的帮助文档有如下一段话 举个例子,给定下面的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"; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |