jquery data()

data()

.data( key, value )

  Description: Store arbitrary data associated with the matched elements.

  • .data( key, value )
  • .data( obj )

.data( key )

  Description: Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.

  • .data( key )
  • .data()

Example1

$( "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 ] }

Example2

HTML5 data-* Attributes

<div data-role="page" data-last-value="43" data-hidden="true" data-options=‘{"name":"John"}‘></div>

$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";

Additional:

jQuery searches among the attributes of the element, converting a camel-cased string into a dashed string and then prepending data- to the result. So, the string lastValue is converted to data-last-value.

时间: 2024-08-26 23:39:10

jquery data()的相关文章

jQuery.data的是jQuery的数据缓存系统

jQuery.Data源码 jQuery.data的是jQuery的数据缓存系统.它的主要作用就是为普通对象或者DOM元素添加数据. 1 内部存储原理 这个原理很简单,原本要添加在DOM元素本身的数据,现在被集中的存储在cache集合中.它们之间靠一个从1开始的数字键来联系着.这样DOM元素就不会像以前那么笨重了,更不会出现以前那种循环引用而引起的内存泄漏.现在DOM只需要保存好这个数字键值即可.这个属性值被保存在DOM元素的一个属性里,该属性名是由jQuery.expando生成的. 2 Da

元素的数据存储-jQuery.data()与.data()

jQuery提供的存储接口 jQuery.data( element, key, value ) //静态接口,存数据 jQuery.data( element, key ) //静态接口,取数据 .data( key, value ) //实例接口,存数据 .data( key ) //实例接口,存数据 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-type"

JQuery data API实现代码分析

JQuery data 接口是什么? .data() Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements. 根据jquery官网介绍,data给存储DOM关联的数据, 设置数据是对$选取的所有JQuery对象, 获取数据是对$选取的所有对象的

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() 与 jQuery(elem).data()源码解读

之前一直以为 jQuery(elem).data()是在内部调用了 jQuery.data(),看了代码后发现不是.但是这两个还是需要放在一起看,因为它们内部都使用了jQuery的数据缓存机制.好吧,重点就是data_user对象,跟另一个data_priv是姐妹~~ 先来看下jQuery.data(): 它调用了data_user.access( elem, name, data ); 那么data_user到底是什么鬼呢?? 我们看到,它是由Data构造的实例,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的是jQuery的数据缓存系统.它的主要作用就是为普通对象或者DOM元素添加数据. 1 内部存储原理 这个原理很简单,原本要添加在DOM元素本身的数据,现在被集中的存储在cache集合中.它们之间靠一个从1开始的数字键来联系着.这样DOM元素就不会像以前那么笨重了,更不会出现以前那种循环引用而引起的内存泄漏.现在DOM只需要保存好这个数字键值即可.这个属性值被保存在DOM元素的一个属性里,该属性名是由jQuery.expando生成的. 2 Data构造函数 Object.

jQuery.data() 存储数据

jQuery.data() 的实现方式 jQuery.data() 的作用是为普通对象或 DOM Element 附加数据. 下面将分三个部分分析其实现方式: 1. 用name和value为对象附加数据:即传入三个参数,第一个参数为需要附加数据的对象,第二个参数为数据的名称,第三个参数为数据的值.当然,只是获取值的话,也可以不传入第三个参数. 2. 用另一个对象为对象附加数据:即传入两个参数,第一个参数为需要附加的数据对象(我们称之为"obj"),第二个参数也是一个对象(我们称之为&q

jQuery.data() 的实现方式

jQuery.data() 的作用是为普通对象或 DOM Element 附加(及获取)数据. 下面将分三个部分分析其实现方式:     1. 用name和value为对象附加数据:即传入三个参数,第一个参数为需要附加数据的对象,第二个参数为数据的名称,第三个参数为数据的值.当然,只是获取值的话,也可以不传入第三个参数.     2. 用另一个对象为对象附加数据:即传入两个参数,第一个参数为需要附加的数据对象(我们称之为“obj”),第二个参数也是一个对象(我们称之为“another”):“an

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

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