JQuery data方法的使用-遁地龙卷风

(-1)说明

我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本

测试例子用到的showMessage方法如下

showMessage.i = 0;
function showMessage(object)
{
  var body = $("body")[0];
  var $p =$("#debugp");

  if($p.length==0)
  {
    $p = $("<p/>").attr("id","debugp");
    $(body).prepend($p);
  }
  $p[0].innerHTML += "<br/>"+(showAttribute.i++)+" | "+object;
}

  

(0)$.data(obj,key,value)

key值为字符串类型,为数字、对象(var lol={}),是没有意义的,value值可以为普通类型,当为引用类型时传递的是引用而不是克隆

a.

  var obj = {"name":"寒冰射手","age":"12"};
  $.data(obj,"height",165);
  showMessage($.data(obj,"height"));

  $.data实际将数据放在了对象属性上,类似于obj.sex="女",无论你通过$.data添加几个key给obj,在obj只会多出一个类似于jQuery300082932543555993442

  300082932543555993442是jQuery产生的随机数,它指向一个对象,对象里面通过key-value的形式存储着你添加的数据

  低版本可以通过for-in遍历出jQuery300082932543555993442,高版本只能通过debug工具查看了

b.

  当value是一个对象时,传递的是引用

  var husband = ["蛮族之王"];
  var obj = {"name":"寒冰射手","age":"12"};
  $.data(obj,"husband",husband);
  $.data(obj,husband)[0] = "遁地龙卷风";
  showMessage($.data(obj,husband));//输出   遁地龙卷风

(2)$(selector).data(key,value)

$("#lol").data("name","寒冰射手");

showMessage($("#lol").data("name"));

$(selector).data将数据绑定在HTML DOM元素上,剩下的特性与$.data方法一样,不过可以通过for-in得到添加的对象

时间: 2024-11-05 14:40:20

JQuery data方法的使用-遁地龙卷风的相关文章

jquery data方法

jquery.data()文档:http://api.jquery.com/jQuery.data/ html5有个data-*属性,跟这个功能一样. Note: This is a low-level method; a more convenient .data() is also available. The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is

jquery data方法获取某个元素上事件

获取某个元素上的事件,jquery的给元素绑定的事件可以用data方法取出来. 通过$(element).data("events")来获取 // 比如给一个button绑定两个click事件 $("button").click(function() { alert("1") }); $("button").click(function() { alert("2") }); // 这个时候点击该button

jquery data方法取值与js attr取值的区别

<a data-v="3"></a> jquery data方法的运行机制: 第一次查找dom,使用attributes获取到dom节点值,并将其值存到缓存里,第二次操作的时候,还是先找到dom,但是这次取值是直接从缓存读了,少了一步对dom的操作 attr()方法每次都要操作dom,性能上差点儿 $('a').data('v')取到的值是页面初次加载的缓存值,以后如何更改,在页面上都不会改变,但缓存值会变,可以传给i/o请求使用 document.getEle

转载 JQuery.data()方法学习

转载原地址  http://hanchaohan.blog.51cto.com/2996417/1271551 转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://hanchaohan.blog.51cto.com/2996417/1271551 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title&g

JQuery simpleModal插件的使用-遁地龙卷风

(0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simplemodal.js  1.4.4 chrome49 去官网下载simpleModal,可以省去很多麻烦,比如名子一样但内容不一样,说多了都是泪啊 (1)快速入手 导入顺序 <script type="text/javascript" src="jquery-1.8.3.js

Jquery实现大于等于且小于等于-遁地龙卷风

做合并单元格的功能,如下图所示 为了达到上述效果,需要先获取包括起始行和结束行的tr$("tr:eq("+index_startTr+"),tr:gt("+index_startTr+"):lt("+(index_endTr-index_startTr)+")","#demo") eq gt lt 索引都是从0开始的eq 等于,合并选择的结果gt(0) 选择所有索引大于0元素 lt(1) 选择所有下于1的元

HTML5 自定义属性 data-* 和 jQuery.data 详解

新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置.这使得data属性特别灵活,也非常强大.有了这样的属性我们能够更加有序直观的进行数据预设或存储.下面介绍HTML5 Dataset 存储的实际应用,以及包括jQuery在内的四种存取方式. HTML5 Dataset 存储的例子 为一个元素分配data属性存储数据,例如这是一个span元素,它的内容是一首音乐的

Jquery 扩展方法实现原理

JSONP原理 首先:JSON和JSONP是不一样的概念. JSON是一种数据交换格式,而JSONP是非正式传输协议. 该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据. 其实现细节是使用 Script标签携带一个Callback函数,动态的向服务端请求数据. 如:  <script type="text/javascript"&g

jQuery中的data()方法

data()方法,用于存储/获取临时数据 HTML data-* 属性 在标签中利用 data-* 设置自定义的属性,存储数据. <div id="person"> <p data-fullname="张小明" data-age="24" data-profession="前端开发工程师">小明</p> <p data-fullname="刘小红" data-age