bootstrap data与jquery .data


Posted in Javascript onJuly 07, 2014

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

<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官网的帮助文档有如下一段话
HTML5 data-* Attributes(HTML5 data-* 属性)
从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。嵌入式破折号处理属性( attributes)的方式在 jQuery 1.6 中已经改变,以使之符合W3C HTML5 规范.

举个例子, 给定下面的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";
Javascript 相关文章推荐
Javascript之文件操作
Mar 07 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
Vue学习之常用指令实例详解
Jan 06 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
js实现自定义右键菜单
May 18 Javascript
函数式 JavaScript(一)简介
Jul 07 #Javascript
5款JavaScript代码压缩工具推荐
Jul 07 #Javascript
jquery easyui使用心得
Jul 07 #Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 #Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 #Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 #Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 #Javascript
You might like
php5.2时间相差8小时
2007/01/15 PHP
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
python3 求约数的实例
2019/12/05 Python
python数字类型math库原理解析
2020/03/02 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
什么是网络协议
2016/04/07 面试题
2015年全国助残日活动方案
2015/05/04 职场文书
国王的演讲观后感
2015/06/03 职场文书
利用python做数据拟合详情
2021/11/17 Python
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技
vscode内网访问服务器的方法
2022/06/28 Servers