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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
删除节点的jquery代码
Jan 13 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
函数式 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
YB217、YB235、YB400浅听
2021/03/02 无线电
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
情人节之礼 js项链效果
2012/02/13 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
用python编写第一个IDA插件的实例
2018/05/29 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
浅谈Python 函数式编程
2020/06/20 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
CSS3 简写animation
2012/05/10 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
贷款委托书范本
2014/04/08 职场文书
幼儿园安全责任书
2014/04/14 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
优秀员工事迹材料
2014/12/20 职场文书