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,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]+$)/,'')))//stripforie7
,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代码
<ahref="#myModal"rel="externalnofollow"rel="externalnofollow"role="button"class="btn"data-toggle="modal">Launchdemomodal</a>
我加入的代码alert($(this).data().toggle)打印的值是modal，所以这里只能是jquery做的文章，于是我研究了jquery的源码发现果然真是！
以下是jQuery.fn.data函数中的部分代码,当key未定义也就是调用.data()未传参数时会将属性名为data-开头的键值对存入匹配元素上。
本例中<ahref="#myModal"rel="externalnofollow"rel="externalnofollow"role="button"class="btn"data-toggle="modal">Launchdemomodal</a>，将{toggle:"modal"}键值对存入
有兴趣的同学可以去试调以下jquery代码
//Getsallvalues
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);
}
}
returndata;
}
我再去详细阅读了jquery官网的帮助文档有如下一段话
HTML5data-*Attributes（HTML5data-*属性）
从jQuery1.4.3起，HTML5data-属性将自动被引用到jQuery的数据对象中。嵌入式破折号处理属性（attributes）的方式在jQuery1.6中已经改变，以使之符合W3CHTML5规范.
举个例子,给定下面的HTML:
<divdata-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";