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 继承详解(三)
Jul 13 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
微信小程序 教程之模板
Oct 18 Javascript
vue-axios使用详解
May 10 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 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 file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
js实现聊天对话框
2020/02/08 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
python实现简单加密解密机制
2019/03/19 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
解决Django连接db遇到的问题
2019/08/29 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
美食节目策划方案
2014/05/31 职场文书
运动员获奖感言
2014/08/15 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
化工生产实习心得体会
2016/01/22 职场文书
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫