使用jQuery的data读取标签缓存数据 ( 二 )
来源:互联网 发布:知乎 匿名用户 编辑:程序博客网 时间:2024/05/20 01:46
接上篇 使用jQuery的data读取标签缓存数据,继续对 jQuery 的 data 初始化和取值进行补充。
因为使用 jQuery-1.7.2.js 版本,强制转成 number 后与原来的字符串在数值上存在误差。本来想使用1.11.2 版本的,可是发现页面中很多基于低版本 jQuery 扩展的插件会报错,这就尴尬了。
之后仔细查了下API,想出了两种解决方式:
1. 使用 attr(key) 方法直接获取放入的值,返回结果是字符串类型;
2. 因为 data(key) 返回类型有好几种,尝试将要缓存的数据进行封装,封装成字符串格式、数组格式或者对象格式(json)。
第1种方法就不细说了,这里详细说一下第2种方法。
先看 API 说明:
.data( key )
返回: Object
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
通过.data(name, value)或HTML5 data-* 属性设置
返回值转换的过程:
每次尝试将字符串转换为一个JavaScript值(包括布尔值(booleans),数字(numbers),对象(objects),数组(arrays)和空(null))。尤其是纯数字的字符串,如果不改变值的表示,那么该值将转换为一个数字(number)。
“1E02”和“100.000”是等同于数字(数字值100),但将转换它们会改变表示,所以保留为字符串。而字符串值“100”被转换为数字100。
查看API
经过尝试后发现可以使用数组格式([、])或者对象格式({、})对数据进行封装。
这里的数据是 jsp 页面中用 jstl 标签放入的值。
这是测试用的 jsp 页面, jQuery 版本是 1.7.2
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery data 测试</title><script type="text/javascript" src="../js/jquery-1.7.2.js"></script></head><body><c:set var="uuid" value="201612121641078700726"></c:set><div class="container" style="width:80%;margin:40px;auto"> <p>字符串类型取值</p> <div data-resourceuuid="${uuid}" > <a href="javascript:void(0);" onclick="testStr(this,1)">点击测试</a> data-resourceuuid="201612121641078700726"</div> <p class="result-str1"></p><br/> <div data-resourceuuid='"${uuid}"' > <a href="javascript:void(0);" onclick="testStr(this,2)">点击测试</a> data-resourceuuid='"201612121641078700726"'</div> <p class="result-str2"></p><br/> <p>数组取值</p> <div data-resourceuuid='[ "${uuid}" ]' > <a href="javascript:void(0);" onclick="testArray(this, 1)">点击测试</a> data-resourceuuid='["201612121641078700726"]'</div> <p class="result-array1"></p><br/> <div data-resourceuuid='[ "${uuid}" , "123"]' > <a href="javascript:void(0);" onclick="testArray(this, 2)">点击测试</a> data-resourceuuid='["201612121641078700726","123"]'</div> <p class="result-array2"></p><br/> <div data-resourceuuid="[ '${uuid}' ]" > <a href="javascript:void(0);" onclick="testArray(this, 3)">点击测试</a> data-resourceuuid="['201612121641078700726']"</div> <p class="result-array3"></p><br/> <div data-resourceuuid="[ '${uuid}' , '123']" > <a href="javascript:void(0);" onclick="testArray(this, 4)">点击测试</a> data-resourceuuid="['201612121641078700726','123']"</div> <p class="result-array4"></p><br/> <p>对象取值</p> <div data-resourceuuid='{"uuid":"${uuid}"}' > <a href="javascript:void(0);" onclick="testObj(this,1)">点击测试</a> data-resourceuuid='["uuid":"201612121641078700726"]'</div> <p class="result-obj1"></p><br/> <div data-resourceuuid='{uuid:"${uuid}"}' > <a href="javascript:void(0);" onclick="testObj(this,4)">点击测试</a> data-resourceuuid='[uuid:"201612121641078700726"]'</div> <p class="result-obj4"></p><br/> <div data-resourceuuid="{'uuid':${uuid}}" > <a href="javascript:void(0);" onclick="testObj(this,2)">点击测试</a> data-resourceuuid="{'uuid':201612121641078700726}"</div> <p class="result-obj2"></p><br/> <div data-resourceuuid="{uuid:${uuid}}" > <a href="javascript:void(0);" onclick="testObj(this,3)">点击测试</a> data-resourceuuid="{uuid:201612121641078700726}"</div> <p class="result-obj3"></p><br/></div> <script type="text/javascript"> function testStr(obj,index){ var resourceid = $(obj).parent().data("resourceuuid"); $("p.result-str"+index).text("resourceuuid="+resourceid+", type ="+ typeof resourceid); }; function testArray(obj,index){ var resourceid = $(obj).parent().data("resourceuuid"); var msg = "resourceuuid="+resourceid+", type ="+ typeof resourceid; if(Array.isArray(resourceid)) msg="resourceuuid="+resourceid+", type ="+Object.prototype.toString.call(resourceid) +", resourceuuid[0]="+resourceid[0]; $("p.result-array"+index).text(msg); }; function testObj(obj,index){ var resourceid = $(obj).parent().data("resourceuuid"); var msg = "resourceuuid="+resourceid+", type ="+ typeof resourceid; if(typeof resourceid === "object") msg="resourceuuid="+resourceid+", type ="+ typeof resourceid+", resourceuuid.uuid="+resourceid.uuid; $("p.result-obj"+index).text(msg); }; </script></body></html>
点击后,页面显示内容:
点击测试 data-resourceuuid=”201612121641078700726”
resourceuuid=201612121641078700000, type =number点击测试 data-resourceuuid=‘“201612121641078700726”’
resourceuuid=”201612121641078700726”, type =string点击测试 data-resourceuuid=’[“201612121641078700726”]’
resourceuuid=201612121641078700726, type =[object Array], resourceuuid[0]=201612121641078700726点击测试 data-resourceuuid=’[“201612121641078700726”,”123”]’
resourceuuid=201612121641078700726,123, type =[object Array], resourceuuid[0]=201612121641078700726点击测试 data-resourceuuid=”[‘201612121641078700726’]”
resourceuuid=[ ‘201612121641078700726’ ], type =string点击测试 data-resourceuuid=”[‘201612121641078700726’,’123’]”
resourceuuid=[ ‘201612121641078700726’ , ‘123’], type =string点击测试 data-resourceuuid=’[“uuid”:”201612121641078700726”]’
resourceuuid=[object Object], type =object, resourceuuid.uuid=201612121641078700726点击测试 data-resourceuuid=’[uuid:”201612121641078700726”]’
resourceuuid={uuid:”201612121641078700726”}, type =string点击测试 data-resourceuuid=”{‘uuid’:201612121641078700726}”
resourceuuid={‘uuid’:201612121641078700726}, type =string点击测试 data-resourceuuid=”{uuid:201612121641078700726}”
resourceuuid={uuid:201612121641078700726}, type =string
注意:
使用 data-* 缓存数据,并将数据赋值时:
在进行数组格式赋值,最外层用单引号 (”) 包裹,数组元素应双引号 (“”) 包裹字符串;
在进行对象格式赋值时,外层用单引号 (”) 包裹,里面的key应用双引号 (“”) 包裹,value 为 string 类型是用双引号包裹;
在进行字符串格式赋值时,1.7.2 版本能转换 number 时会强制转换 number,可能会出现误差,用高版本(1.11.2)则没问题。低版本参照上面两条进行转换或使用 attr 获取 string 类型数据。
更详细内容,请移步:
.data() | jQuery API 中文文档 – jQuery 中文网
- 使用jQuery的data读取标签缓存数据 ( 二 )
- 使用jQuery的data读取标签缓存数据
- jQuery数据缓存$.data 的使用以及源码解析
- jQuery数据缓存方案详解:$.data()的使用
- jQuery.data()数据缓存
- jQuery数据缓存$.data
- jQuery数据缓存-data(name)
- jquery data() 数据缓存学习
- jQuery源码之$.data()数据缓存
- jQuery对象数据缓存Cache原理及jQuery.data详解
- Android 使用RxJava+Retrofit +Realm 组合加载数据 <读取缓存 显示 请求网络数据 缓存最新数据 更新界面>(二)
- 关于JQuery的clone方法无法拷贝data缓存数据的问题
- jquery的两种重要的方法以及data方法缓存数据详解
- iphone数据存储之 Core Data的使用(二)
- jQuery 数据缓存data(name, value)详解及实现
- jQuery 数据缓存data(name, value)详解及实现
- jQuery 数据缓存data(name, value)详解及实现
- jquery手册学习--数据缓存--data([key],[value])--removeData([name|list])--jQuery.data(element,[key],[value])
- webpack成功引入d3 v4的两种方式
- MyBatis一对多映射实现方式
- 双飞翼布局
- sed使用
- [unity]批量处理图片资源
- 使用jQuery的data读取标签缓存数据 ( 二 )
- 软件下载地址
- JAVA总结系列(一)JVM概要
- python下ssh及sftp登录
- 2016.12.21C语言概述+linux下的C语言编程
- java中数据结构
- 在canvas中应用font-awesome字体
- javascript字典数据结构Dictionary实现
- 机器学习实战学习笔记6——AdaBoost