详谈$.data()的用法和作用

jQuery.data 即$.data()。向元素附加数据，然后取回该数据

这是提供给客户端程序员使用的方法，它同时是setter/getter。

传一个参数，返回附加在指定元素的所有数据，即thisCachejQuery.data(el); // thisCache

传二个参数，返回指定的属性值jQuery.data(el, 'name');

传三个参数，设置属性及属性值jQuery.data(el, 'name', 'jack');jQuery.data(el, 'uu', {});

传四个参数，第四个参数pvt仅提供给jQuery库自身使用。即jQuery._data方法中传true。因为jQuery的事件模块严重依赖于jQuery.data，为避免人为的不小心重写在这个版本中加入的

$.data("#blog_stats","name","lixuekai")
jquery.js:2 Uncaught TypeError: Cannot set property 'toJSON' of undefined(…)data @ jquery.js:2(anonymous function) @ VM913:1
var s = $("#blog_stats")
undefined
s
[<div id=​"blog_stats">​…​</div>​]
$.data(s,"name","lixuekai")
"lixuekai"
$.data(s,"name")
"lixuekai"
$.data(s)
Object {name: "lixuekai"}
$.hasData(s)

true上面代码的调试图如下：

jQuery.hasData 用来判断HTMLElement或JS对象是否具有数据。返回true或false。即如果调用了jQuery.data方法添加了属性，则返回true。

升级简单的写法：selector.data("key","value").

实测如下图：

这是一个位置给装了2个对象数据。然后看看效果如何。

就看截图吧，代码就不贴啦。

//从被选元素中返回附加的数据。
$(selector).data(name)

//向被选元素附加数据。
$(selector).data(name,value)

//使用带有名称/值对的对象向被选元素添加数据。(上面传简单的key value 键值对，这个直接给对象，不用一个个传)
$(selector).data(object)

以上这篇详谈$.data()的用法和作用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 深入理解jQuery.data() 的实现方式

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

  • jQuery $.data()方法使用注意细节

    前段时间同事在群里对jQuery里的.data()方法大发牢骚: XXX(NNNNNNN) 15:11:34 <a id="a" data-xxx="00123" /> alert($('#a').data('xxx'));//123 data方法不靠谱 XXX(NNNNNNN) 15:13:17 老老实实用attr('data-xxx')吧细研究了下jQuery文档对.data()方法的描述: 复制代码 代码如下: As of jQuery 1.4.3

  • 深入学习jQuery中的data()

    data有什么作用? 在我们平时js编码过程中,我们经常会向DOM元素中添加各种自定义属性,这样有一个弊端. 1.假设我们在DOM元素中添加了一个属性,这个属性指向了某个js对象. dom1.ele = jsObj 2.当这个js对象发挥完作用后,我们已经用不到他了.这时候按理说应该把这个js变量清空,释放内存.大家都知道,如果一个js对象不存在任何外在引用的话,解释器会自动将其在内存中删除,这也是javascript相对于c++等手动管理内存的程序的优点. 3.但是这时候问题来了,因为DOM元

  • 详谈$.data()的用法和作用

    详谈$.data()的用法和作用

    jQuery.data 即$.data().向元素附加数据,然后取回该数据 这是提供给客户端程序员使用的方法,它同时是setter/getter. 传一个参数,返回附加在指定元素的所有数据,即thisCachejQuery.data(el); // thisCache 传二个参数,返回指定的属性值jQuery.data(el, 'name'); 传三个参数,设置属性及属性值jQuery.data(el, 'name', 'jack');jQuery.data(el, 'uu', {}); 传四个

  • Mybatis中@Param的用法和作用详解

    Mybatis中@Param的用法和作用详解

    用注解来简化xml配置的时候,@Param注解的作用是给参数命名,参数命名后就能根据名字得到参数值,正确的将参数传入sql语句中 我们先来看Mapper接口中的@Select方法 package Mapper; public interface Mapper { @Select("select s_id id,s_name name,class_id classid from student where s_name= #{aaaa} and class_id = #{bbbb}")

  • python drf各类组件的用法和作用

    DRF组件的用法和作用 认证 自定义认证的类 """ from rest_framework.authentication import BaseAuthentication from rest_framework.exceptions import AuthenticationFailed from authapp.models import UserToken class MyOrderAuthentication(BaseAuthentication): 在这里实现认证

  • 详谈js中window.location.search的用法和作用

    详谈js中window.location.search的用法和作用

    用该属性获取页面 URL 地址: window.location 对象所包含的属性 属性 描述 hash 从井号 (#) 开始的 URL(锚) host 主机名和当前 URL 的端口号 hostname 当前 URL 的主机名 href 完整的 URL pathname 当前 URL 的路径部分 port 当前 URL 的端口号 protocol 当前 URL 的协议 search 从问号 (?) 开始的 URL(查询部分) 如图就是取出url中的参数. JS 脚本捕获页面 GET 方式请求的参

  • Extjs 继承Ext.data.Store不起作用原因分析及解决

    关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 复制代码 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this.reader = new Ext.data.JsonReader( { totalProperty: 'results', root: 'rows', id:'d

  • 详解js运算符单竖杠“|”与“||”的用法和作用介绍

    在js开发应用中我们通常会碰到"|"与"||"了,那么在运算中"|"与"||"是什么意思呢? 在js整数操作的时候,相当于去除小数点,parseInt.在正数的时候相当于Math.floor(),负数的时候相当于Math.ceil() 注: 1. Math.ceil()用作向上取整. 2. Math.floor()用作向下取整. 3. Math.round() 我们数学中常用到的四舍五入取整. console.log(0.6|

  • python自动化测试中装饰器@ddt与@data源码深入解析

    目录 一.使用ddt和data装饰器的大致框架如下,每个test_开头的方法,代表一条测试用例 二.给类动态的增加方法 案例1 案例2: 案例3: 三.ddt和data的源码解析 原因: 解决: 分部解析代码 总结 一.使用ddt和data装饰器的大致框架如下,每个test_开头的方法,代表一条测试用例 from ddt import ddt,data import unittest test_datas=[ {'id':1,'title':'测试用例1'}, {'id':2,'title':'

  • 前端主流框架vue学习笔记第一篇

    前端主流框架vue学习笔记第一篇

    vue应该是前端主流框架中的集大成者,它吸取了knockout,angular,react设置avalon的经验,支持各种模式写法,入门很简单,从本章开始,会记录学习vue中的点点滴滴,以笔记的形式形成博文. 1.Hello World 和任何框架一样,使用前必先引入,我们这里直接使用cdn资源,创建index.html,编写如下代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  • 全面介绍javascript实用技巧及单竖杠

    JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新手开发者被各种强大的 JavaScript 框架吸引进来,但他们却忽略了框架身后浩如星海的 JavaScript 实用技巧.本文将为你全面的介绍其中的知识点. 一.js整数的操作 使用|0和~~可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快,在处理像素及动画位移等

  • ThinkPHP3.1基础知识快速入门

    在当今众多的MVC框架中,ThinkPHP是一个快速.简单的基于MVC和面向对象的轻量级PHP开发框架,其遵循Apache2开源协议发布,自从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,尤其注重开发体验及易用性,并且拥有众多的原创功能和特性,为WEB应用开发提供了强有力的支持.是众多PHP开发人员的首选.本文就ThinkPHP3.1基础知识做一简述. 1.目录结构 ThinkPHP最新版本可以在官方网站(http://thinkphp.cn/down/framewor

随机推荐