时间:2021-05-28
jquery官网对.data函数描述是:在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
存储键值(key/value):
取键值
以上这些都很容易掌握和理解,今天在看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";声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
主要的方法如下:复制代码代码如下:.data(key,value).data(obj).data(key).data()从jQuery1.4.3起,HTML5d
使用jquery,post请求data:那里要使用data:JSON.stringify(data)$.ajax({type:"POST",async:fals
网上有很多教你怎么使用jQuery.data(..)来实现数据缓存,但有两个用户经常使用的data([key],[value])和jQuery.data(ele
网上有很多教你怎么使用jQuery.data(..)来实现数据缓存,但有两个用户经常使用的data([key],[value])和jQuery.data(ele
前提:需导入相关js文件jquery.js$.post(url,data,success(data,textStatus,jqXHR),dataType)url