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 相关文章推荐
常用js字符串判断方法整理
Oct 18 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
js中作用域的实例解析
Mar 16 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
vuex进阶知识点巩固
May 20 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 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
关于svn冲突的解决方法
2013/06/21 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
Web程序工作原理详解
2014/12/25 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
web 页面分页打印的实现
2009/06/22 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
使用js实现数据格式化
2014/12/03 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
python django集成cas验证系统
2014/07/14 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
python爬虫实现获取下一页代码
2020/03/13 Python
Python如何读取、写入CSV数据
2020/07/28 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
班主任工作年限证明
2014/01/12 职场文书
小露珠教学反思
2014/04/30 职场文书
高质量“欢迎词”
2019/04/03 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python