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 的弹窗掩码的时候遇到了这样一段代码让我产生了疑惑
 1   $(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" 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" 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:

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

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

1
2
3
4
$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";


 





 

bootstrap data- jquery .data的更多相关文章

  1. jQuery data

    大家会如何设计一个缓存呢? 一个简单的Cache (function(){ var __cache = {}, Cache = { get: function(__name){ return __ca ...

  2. jQuery源码解读 - 数据缓存系统:jQuery.data

    jQuery在1.2后引入jQuery.data(数据缓存系统),主要的作用是让一组自定义的数据可以DOM元素相关联——浅显的说:就是让一个对象和一组数据一对一的关联. 一组和Element相关的数据 ...

  3. 转:jQuery.data

    原文地址:http://www.it165.net/pro/html/201404/11922.html 内存泄露 首先看看什么是内存泄露,这里直接拿来Aaron中的这部分来说明什么是内存泄露,内存泄 ...

  4. 读jQuery源码 jQuery.data

    var rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/, rmultiDash = /([A-Z])/g; function internalData( elem, n ...

  5. html 5 data-* (dataset) 属性和 jquery data方法比较

    一些文章在介绍html 5 data-* (dataset)属性时,会提到jquery的data方法,认为data方法能够很好的利用html 5的这个特性.但实际上,二者的兼容性是很差的.下面给出一段 ...

  6. $.data()、$().data

    两个方法很相似,但是有区别,简单说一下: $.data():jq的静态方法,也就是jQuery.data()直接调用 $().data():实例方法,先有实例,才能调用这个方法,例如:$(" ...

  7. jQuery.Data源码

    jQuery.data的是jQuery的数据缓存系统.它的主要作用就是为普通对象或者DOM元素添加数据. 1 内部存储原理 这个原理很简单,原本要添加在DOM元素本身的数据,现在被集中的存储在cach ...

  8. jquery send(data) 对data的处理

    // Convert data if not already a string if ( s.data && s.processData && typeof s.dat ...

  9. JQuery data API实现代码分析

    JQuery data 接口是什么? .data() Store arbitrary data associated with the matched elements or return the v ...

  10. HTML5 自定义属性 data-* 和 jQuery.data 详解

    新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置.这使得dat ...

随机推荐

  1. 【Nutch2.2.1源代码分析之5】索引的基本流程

    一.各个主要类之间的关系 SolrIndexerJob extends IndexerJob 1.IndexerJob:主要完成 2.SolrIndexerJob:主要完成 3.IndexUtil:主 ...

  2. CSS实现背景透明/半透明效果的方法

    全透明代码:{background:transparent} 半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !importan ...

  3. PHP(w3s) 笔记

    <!--php注释-->// 这是单行注释# 这也是单行注释/*这是多行注释块它横跨了多行*/

  4. 在Fragment中使用BaiduMap SDK

    1:fragment_bshdzh.xml <?xml version="1.0" encoding="utf-8"?> <LinearLay ...

  5. getResources().getXml()获取xml

    获取XML文件的基本思路是,通过getResources().getXml()获的XML原始文件,得到XmlResourceParser对象,通过该对象来判断是文档的开头还是结尾,是某个标签的开始还是 ...

  6. LeetCode_Populating Next Right Pointers in Each Node II

    Follow up for problem "Populating Next Right Pointers in Each Node". What if the given tre ...

  7. 微信授权登陆接入第三方App(步骤总结)Android

    微信授权登陆接入第三方App(步骤总结)Android Android App实现第三方微信登录

  8. SQL Server (MSSQLSERVER) 服务因 找不到指定的模块。 服务特定错误而停止。

    新装了sql server 2008,发现sqlserver 服务没法起来.查看系统日志是7024如下: 事件类型: 错误 事件来源: Service Control Manager 事件种类: 无 ...

  9. Eclipse使用之杂七杂八

    使用Eclipse的Marketplace安装1.12x版本的Subclipse插件(SVN)后,新建SVN资源库时出现如下报错: “Can't create session svn: Unable ...

  10. Java单元测试:@BeforeClass,@Before,@Test,@After,@AfterClass中的问题详解

    在Junit4中还有的测试注解有:  @BeforeClass ,@Before,@Test,@After,@AfterClass 1.其中:@BeforeClass,@AfterClass是Juni ...