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 的弹窗掩码的时候遇到了这样一段代码让我产生了疑惑
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的更多相关文章
- jQuery data
大家会如何设计一个缓存呢? 一个简单的Cache (function(){ var __cache = {}, Cache = { get: function(__name){ return __ca ...
- jQuery源码解读 - 数据缓存系统:jQuery.data
jQuery在1.2后引入jQuery.data(数据缓存系统),主要的作用是让一组自定义的数据可以DOM元素相关联——浅显的说:就是让一个对象和一组数据一对一的关联. 一组和Element相关的数据 ...
- 转:jQuery.data
原文地址:http://www.it165.net/pro/html/201404/11922.html 内存泄露 首先看看什么是内存泄露,这里直接拿来Aaron中的这部分来说明什么是内存泄露,内存泄 ...
- 读jQuery源码 jQuery.data
var rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/, rmultiDash = /([A-Z])/g; function internalData( elem, n ...
- html 5 data-* (dataset) 属性和 jquery data方法比较
一些文章在介绍html 5 data-* (dataset)属性时,会提到jquery的data方法,认为data方法能够很好的利用html 5的这个特性.但实际上,二者的兼容性是很差的.下面给出一段 ...
- $.data()、$().data
两个方法很相似,但是有区别,简单说一下: $.data():jq的静态方法,也就是jQuery.data()直接调用 $().data():实例方法,先有实例,才能调用这个方法,例如:$(" ...
- jQuery.Data源码
jQuery.data的是jQuery的数据缓存系统.它的主要作用就是为普通对象或者DOM元素添加数据. 1 内部存储原理 这个原理很简单,原本要添加在DOM元素本身的数据,现在被集中的存储在cach ...
- jquery send(data) 对data的处理
// Convert data if not already a string if ( s.data && s.processData && typeof s.dat ...
- JQuery data API实现代码分析
JQuery data 接口是什么? .data() Store arbitrary data associated with the matched elements or return the v ...
- HTML5 自定义属性 data-* 和 jQuery.data 详解
新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置.这使得dat ...
随机推荐
- SpotMini末端控制策略
相信很多人都注意到了“机器人学家”两天前推送的Boston Dynamics新机器人Spot-Mini.除了一如既往独领风骚的步态控制外,这次BD还给机器人增加了一个机械臂.视频中的一幕挺有趣,就是S ...
- 开发中遇到的问题(一)——java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
1.错误描述: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) wit ...
- JS window对象的top、parent、opener含义
.top 该变更永远指分割窗口最高层次的浏览器窗口.如果计划从分割窗口的最高层次开始执行命令,就可以用top变量. .opener opener用于在window.open的页面引用执行该window ...
- js 日常问题记录
1.解决ie6下css背景图不缓存 try{ document.execCommand('BackgroundImageCache',false,true); }catch(e){} 2.为ajax设 ...
- cf B. Little Dima and Equation
http://codeforces.com/contest/460/problem/B import java.util.*; import java.math.*; public class Mai ...
- C# 通过线程更新UI
摘自:http://msdn.microsoft.com/zh-cn/library/ms171728(en-us,VS.80).aspx 关键代码(form中增加): delegate void S ...
- 【czy系列赛】czy的后宫4 && bzoj1925 [Sdoi2010]地精部落
[问题描述] czy有很多妹子,妹子虽然数量很多,但是质量不容乐观,她们的美丽值全部为负数(喜闻乐见). czy每天都要带N个妹子到机房,她们都有一个独一无二的美丽值,美丽值为-1到-N之间的整数.他 ...
- c++ 09
一.数据结构 程序设计=数据结构+算法 1.逻辑结构 1)集合:元素之间没有联系. 2)线性结构:元素之间存在前后顺序. 3)树形结构:元素之间存在一对多的父子关系. 4)图状结构:元素之间存在多对多 ...
- 关于C++中覆盖,重载,隐藏的一点说明
C++覆盖 重载 隐藏是三个经常容易混淆的概念 这里我们简单总结下: 1.重载的条件(编译时多态) a.同一个类中 b.函数名相同,参数不同(返回值不能作为重载的条件) c.与函数是否为虚函数无关 2 ...
- 【编译原理】语法分析LL(1)分析法的FIRST和FOLLOW集
近来复习编译原理,语法分析中的自上而下LL(1)分析法,需要构造求出一个文法的FIRST和FOLLOW集,然后构造分析表,利用分析表+一个栈来做自上而下的语法分析(递归下降/预测分析),可是这个FIR ...