Jquery-data的三种用法

记录一下

Jquery-data的用处：

jQuery-data主要是用来存储数据，帮助普通对象或者jQuery对象来存储数据，其实如果单纯的储存dom的单一的属性，用attr自定义属性足够了；如果存储多个键值对建议用jQuery-data;

例如： 图片的懒加载好多插件就用到了jquery-data，先把图片的真实地址储存到jquery-data中，做个监听事件，等到滑到该图片时再把真实地址取出来；

用法一：给普通对象储存单个属性和取值

 <script type="text/javascript" src="jquery-3.0.0.min.js"></script>
 var obj = {};
 $.data(obj, 'name', 'xm'); // 赋值
 var str = $.data(obj, 'name'); // 读取值
 console.log(str) // "xm"

用法二：给普通对象储存多个属性和取值

<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
var obj = {};
 $.data(obj,{name1:"xm",name2:"xh"}); // 赋值
 var str1 = $.data(obj, 'name1'); // 读取值
 var str2 = $.data(obj, 'name2'); // 读取值
 console.log(str1) // "xm"
 console.log(str1) // "xh"

用法三：给Jquery dom对象取值赋值

<div class="demo"></div>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
var obj = $('.demo');
 $.data(obj,{name1:"xm",name2:"xh"}); // 赋值
 var str1 = $.data(obj, 'name1'); // 读取值
 var str2 = $.data(obj, 'name2'); // 读取值
 console.log(str1) // "xm"
 console.log(str1) // "xh"
// 就是把obj换成jquery对象这么简单

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • jQuery中removeData()方法用法实例

    本文实例讲述了jQuery中removeData()方法用法.分享给大家供大家参考.具体实现方法如下: 此方法可以移除匹配元素上指定的数据. removeData()方法与data()方法的作用相反. 语法结构一: 复制代码 代码如下: $(selector).removeData(name) 参数列表: 参数 描述 name 可选.定义要删除的数据的名称. 如果没有定义名称,该方法将从被选元素中删除所有已存储的数据. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <

  • 逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)

    首先给大家介绍jquery data()函数 jQuery中data()函数用于向被选元素附加数据,或者从被选元素获取数据.通过data()函数存取的数据都是临时数据,一旦页面刷新,之前存放的数据都将不复存在. 一.jquery data()的作用 data() 方法向被选元素附加数据,或者从被选元素获取数据. 通过data()函数存取的数据都是临时数据,一旦页面刷新,之前存放的数据都将不复存在. 该函数属于jQuery对象(实例).如果需要移除通过data()函数存放的数据,请使用 remov

  • Jquery中ajax方法data参数的用法小结

    复制代码 代码如下: $.ajax({   type: "POST",   url: "some.php",   data: "name=John&location=Boston", //第一种方式传参  // data: {name:"John",location:"Boston"}  //第二种方式传参  // data: {foo:["bar1", "bar2&q

  • html5的自定义data-*属性和jquery的data()方法的使用示例

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用.这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情. 你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和

  • jQuery中data()方法用法实例

    本文实例讲述了jQuery中data()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以向匹配元素附加数据,或者从匹配元素获取数据. 语法结构一: 复制代码 代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-

  • 实测jquery data()如何存值

    今天在js权威指南第19章看到一句话, 说 jQuery的数据框架没有将元素数据当作元素属性来存储,但它确实需要给元素添加一个特殊的属性用来与数据关联. 但jQuery究竟是添加了一个怎样特殊的属性,目前我还没研究, 但我记得是可以通过jQuery的data("xxx")方法取HTML标签上的data-xxx属性的值的. 测试及结果如下: 复制代码 代码如下: var $demo1 = $("#demo1"); $demo1.data("x",1

  • 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()方法读取HTML5自定义属性data-*实例

    主要的方法如下: 复制代码 代码如下: .data( key, value ).data( obj ).data( key ).data() 从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中.例如HTML: 复制代码 代码如下: <div data-role = "page" data-last-value = "43" data-hidden = "true" data-options

  • 详解vue 模版组件的三种用法

    本文介绍了详解vue 模版组件的三种用法,分享给大家,具体如下: 第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../node_modules/vue/dist/vue.js"></script> <script> var User_01 = Vue.extend({// 创建可复用的构造器 template: '<p&

  • vue+webpack实现异步加载三种用法示例详解

    1.第一例 const Home = resolve => { import("@/components/home/home.vue").then( module => { resolve(module) } } 注:(上面import的时候可以不写后缀) export default [{ path: '/home', name:'home', component: Home, meta: { requireAuth: true, // 添加该属性可以判断出该页面是否需要

  • 浅谈C++中virtual的三种用法

    virtual用法一 #include using namespace std; class A{ public: virtual void display(){ cout<<"A"<<ENDL; } }; class B : public A{ public: void display(){ cout<<"B"<<ENDL; } }; void doDisplay(A *p) { p->display(); d

  • java -length的三种用法说明

    java中length主要有三种用法,本博客只介绍前两种: 1 Java中的length属性是针对数组说的,比如说你声明了一个数组,想知道这个数组的长度则用到了length这个属性. 2 java中的length()方法是针对字符串String说的,如果想看这个字符串的长度则用到length()这个方法. 例程: 1.所对应的用法: String[] list={"a","b","c"}; System.out.println(list.leng

  • Java中switch的三种用法方式

    Java中switch的三种用法详解: switch居然有三种方式 ? 作为一个接触java不久的人来说,这确实让我吃了一惊! 根据版本,在java14开始, switch语句有了一个很大的调整, 这就让swicth语句有了更多的操作和选择,在代码上,更加的简便灵活, 让我们试试这神奇的switch吧! 使用switch这个关键词, 我们可以很好的解决if-else 中多重选择的尴尬场面! Java中switch的三种用法详解: switch 标准方式 switch - > 用法: switch

  • Java中break的第三种用法说明

    在Java中,break语句有三种用法,第一种是用于终止switch语句中的语句序列,第二种是用于退出循环,然而第三种是用作goto语句的"文明"形式! 我们知道,goto语句会破坏程序的结构,所以我们一般不会去使用这种功能.但是在某些情况下,goto语句对于流程控制很有价值并且结构合法. 比如当退出深度嵌套的一系列循环时,goto语句很好用.虽然Java中保留了goto关键字,但是没有goto语句,也没有任何用到这个关键字的地方,所以为了能够使用类似像goto语句这样的功能,Java

  • C语言指针与引用的区别以及引用的三种用法案例详解

    1.指针与引用的区别: 指针是一块内存的地址值,而引用是一块内存的别名. 下面引自://www.jb51.net/article/221791.htm 从概念上讲.指针从本质上讲就是存放变量地址的一个变量,在逻辑上是独立的,它可以被改变,包括其所指向的地址的改变和其指向的地址中所存放的数据的改变. 而引用是一个别名,它在逻辑上不是独立的,它的存在具有依附性,所以引用必须在一开始就被初始化,而且其引用的对象在其整个生命周期中是不能被改变的(自始至终只能依附于同一个变量). 在C++中,指针和引用经

  • Python 海象运算符( :=)的三种用法

    目录 前言 While 循环 列表理解 处理返回的数据 总结 前言 随着Python 3.8的发布,赋值表达式运算符(也称为海象运算符)也发布了.运算符使值的赋值可以传递到表达式中.这通常会使语句数减少一个. 例如: my_list = [1,2,3] count = len(my_list) if count > 3: print(f"Error, {count} is too many items") # when converting to walrus operator.

  • js jquery ajax的几种用法总结(及优缺点介绍)

    这篇文章,是我不知道什么是ajax到熟练运用ajax的一个历程. 一,最原始的方式来运用ajax 复制代码 代码如下: <SCRIPT language=javascript>var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}else if (window.XMLHttpRequ

  • Jquery-data的三种用法

    记录一下 Jquery-data的用处: jQuery-data主要是用来存储数据,帮助普通对象或者jQuery对象来存储数据,其实如果单纯的储存dom的单一的属性,用attr自定义属性足够了:如果存储多个键值对建议用jQuery-data; 例如: 图片的懒加载好多插件就用到了jquery-data,先把图片的真实地址储存到jquery-data中,做个监听事件,等到滑到该图片时再把真实地址取出来: 用法一:给普通对象储存单个属性和取值 <script type="text/javasc

随机推荐