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 相关文章推荐
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
vue组件生命周期详解
Nov 07 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
javascript数组的定义及操作实例
Nov 10 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
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python正则表达式中的括号匹配问题
2014/12/14 Python
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
Python作用域用法实例详解
2016/03/15 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
Python实现自动整理文件的脚本
2020/12/17 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
资料员的岗位职责
2013/11/20 职场文书
行政助理岗位职责范文
2013/12/03 职场文书
总经理助理工作职责
2014/02/06 职场文书
促销活动总结怎么写
2014/06/25 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
租赁协议书
2015/01/27 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
关于Javascript闭包与应用的详解
2021/04/22 Javascript