使用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 中文网

0 0
原创粉丝点击