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 禁止复制网页
Jun 11 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
easyui validatebox验证
Apr 29 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
vue登录注册实例详解
Sep 14 Javascript
Javascript实现简易天数计算器
May 18 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 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 过滤危险html代码
2009/06/29 PHP
PHP 替换模板变量实现步骤
2009/08/24 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
php发送邮件的问题详解
2015/06/22 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
Jquery cookie操作代码
2010/03/14 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
python manage.py runserver流程解析
2019/11/08 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
美国健康和保健平台:healtop
2020/07/02 全球购物
个人整改措施落实情况汇报
2014/10/29 职场文书
上甘岭观后感
2015/06/10 职场文书
聘任书的格式及模板
2019/10/28 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL