jquery 获取自定义data-* 属性值_jq获取所有自定义属性data的值-程序员宅基地

技术标签: javascript/jquery  

原文地址:http://www.jb51.net/article/48901.htm

如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险

主要的方法如下:

复制代码 代码如下:

.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 = '{"name":"John"}' > </div>

下面的 jQuery代码都是返回 true 的:
复制代码 代码如下:

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

和html5的api不同的是,jQuery会尝试将字符串转换为一个JavaScript值(包括布尔值(booleans),数字(numbers),对象(objects),数组(arrays)和空(null))。如果这样做不会改变数值的表示,那么该值将转换为一个数字(number)。例如,“1E02”和“100.000”是等同于数字(数字值100),但将转换它们会改变他们的表示,所以他们被保留为字符串。字符串值“100”被转换为数字100。

如果数据(data)属性是一个对象(以“{”开始)或数组(以'[‘开始),可以用jQuery.parseJSON 将其解析成字符串;它必须遵循 有效的JSON的语法 ,包括带双引号的属性名称。如果该值不能解析为一个JavaScript值,它将被保留为字符串。


如果想将取出的属性值直接当作字符串的话,请使用 attr() 方法。
data-属性是在第一次使用这个数据属性后不再存取或改变(所有的数据值都在jQuery内部存储)。
调用 .data() 时如果不带参数,将会以 JavaScript 对象的形式获取所有数据。这个对象可以安全的存放在变量中,因为一旦这个新对象被提取出来,之后对元素进行的 .data(obj) 操作,将不会再影响这个对象。另外,直接操作这个对象会比每次调用 .data() 来设置或获取值要快一些。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/passch/article/details/78437849

智能推荐

正确卸载和重装docker的方式-程序员宅基地

文章浏览阅读3.8w次,点赞15次,收藏75次。文章目录查看已安装的版本卸载查看可安装的版本重装19.03.7查看安装后的版本查看已安装的版本[root@master custom-wordpress-php-gd-freetype]# yum list installed|grep dockercontainerd.io.x86_64 1.2.13-3.1.el7 @do..._重装docker

python爬虫——urlrequest-urlparse-构建请求对象(1)_urlparse read()-程序员宅基地

文章浏览阅读283次。1.read():以二进制的格式读取文相应的内容2.geturl():根据相应的内容,获取到请求的url3.getheaders():获取头部信息,列表里面有元组一般转成字典4.getcode():获取状态码5.readlines():按行读取,返回一个列表,都是字节类型6.下载图片的两种方式方式一:import urllib.requestimage_url = '..._urlparse read()

汉字转换_tt99911.cm-程序员宅基地

文章浏览阅读2.8w次。中文转Unicodefunction unicode(str) { var value = ''; for (var i = 0; i < str.length; i++) { value += '\\u' + left_zero_4(parseInt(str.charCodeAt(i)).toString(16)); } return value;}function left_zero_4(str) { if (str != nul_tt99911.cm

hadoop集群老的资源管理Mrv1与Yarn资源管理器的工作流程和对比_hadoop集群建立后yarn看到的资源比实际的大-程序员宅基地

文章浏览阅读770次。MRv1缺点1、JobTracker容易存在单点故障2、JobTracker负担重,既要负责资源管理,又要进行作业调度;当需处理太多任务时,会造成过多的资源消耗。3、当mapreduce job非常多的时候,会造成很大的内存开销,在 TaskTracker端,以mapreduce task的数目作为资源的表示过于简单,没有考虑到cpu以及内存的占用情况,如果两个大内存消耗的task被..._hadoop集群建立后yarn看到的资源比实际的大

Failure to transfer org.codehaus.plexus:plexus-archiver:jar:3.4 from https://repo.maven.apache.org/m-程序员宅基地

文章浏览阅读1.2k次。maven pom中出现一下依赖问题。Failure to transfer org.codehaus.plexus:plexus-archiver:jar:3.4 from https://repo.maven.apache.org/maven2 was cached in the local repository, resolution will not be reattempted un..._failure to transfer org.codehaus.plexus:

[Pytorch系列-75]:生成对抗网络GAN - 图像生成开源项目pytorch-CycleGAN-and-pix2pix - CycleGAN网络结构与代码实现详解-程序员宅基地

文章浏览阅读1.9w次,点赞5次,收藏71次。作者主页(文火冰糖的硅基工坊):文火冰糖(王文兵)的博客_文火冰糖的硅基工坊_程序员宅基地本文网址:第1章 网络的定义1.1 网络结构相对于基础型的GAN网络,CycleGAN增加了一个核心的还原网络,导致相关的训练也跟着发生了相应的变化,因此还原网络是核心。 还原是双向的,不仅仅是真实输入图片-》Fake图片-》真实输入图片的还原。还包括真实的输出图片 -> Fake图片 -》真实的输出图片的还原。 CycleGAN一共有4个网络:G_A2B, D_A2B, G_B2A,_pytorch-cyclegan-and-pix2pix

随便推点

c语言迷宫问题求解——递归、栈回溯_n阶迷宫c程序递归-程序员宅基地

文章浏览阅读1w次,点赞15次,收藏56次。第一次写,见谅以下是求迷宫的实现/*第一部分使用递归求解为了数据的简单化,不对路口进行数据结构化,将用一个简单的int类型数组来表示迷宫因为每一个路口的四个方向相对于当前路口的位移都是一样的,这样可以用一个int类型二位数据表示四个方向的相对于当前位置的位移,以顺时针东、南,、西、北储存 *///路口数据结构化//当前路口状态;1表示通顺路口,2表示搜索过的,0表示障碍路口#include..._n阶迷宫c程序递归

企业级监控系统zabbix---实现zabbix对mysql的监控_mysql zabbix 监控方案-程序员宅基地

文章浏览阅读128次。文章目录1.平滑升级php到7版本2.控制页面字体显示不乱码2.利用pernoca模板实现对 mysqld的监控2.1配置mysql2.2安装percona-zabbix模块2.3导入模块1.平滑升级php到7版本在server1上:1.获取以上安装包2.清除之前版本的php并安装新版本的phprpm -qa | grep phpyum remove `rpm -qa | grep php`yum install * zabbix-web zabbix-web-mysql3.开启zabb_mysql zabbix 监控方案

使用TCP转MQTT协议连接onenet平台-程序员宅基地

文章浏览阅读6.7k次,点赞4次,收藏35次。走tcp协议连接MQTT可以解决模块不支持MQTT协议的问题。首先我们得在onenet平台上创建设备。具体如何创建,请看onenet平台的手册教程。创建设备后,我们把产品ID、设备ID和鉴权信息,记录下来。第二步我们要知道服务器的ip地址和端口号Onenet平台的mqtt的服务器IP是:183.230.40.39 端口是:6002第三步使用tcp工具选择TCPClient然后输..._tcp转mqtt

下载安装微软office的详细步骤_office怎么下载-程序员宅基地

文章浏览阅读1.2w次,点赞13次,收藏61次。当前的office办公软件主要分为两种。一是微软的office,另一种是金山的wps office(国产免费)。这两个使用大体区别不大,就是在一些小细节上面会有些许不一样,用不同的打开软件打开可能格式会有问题。包含“Excel、Word、PowerPoint、Outlook、OneNote、publisher、access”全部办公功能。只有“Excel、Word、PowerPoint”三个功能。二、下载路径_office怎么下载

.NET OCX开发-程序员宅基地

文章浏览阅读2.4k次。本文主要介绍怎么在.NET环境下开发OCX控件,打包安装部署程序,以及怎么在页面上调用控件。开发1、新建一个类库,然后打开类库的属性,应用程序→程序集信息 2、编辑程序集信息,主要是要把底部的 使程序集COM可见 勾上,点确定保存程序集信息 3、在类库的属性面板上选择 生成,拉到底部把 为COM互操作注册 勾上 4、在.NET下面开发OCX需要实现IObjectSaf...

KITTI数据集中的3D Detection数据集详情_kitti thetas-程序员宅基地

文章浏览阅读1.1k次。数据集内容包含7481张训练图片以及7518张测试图片,一共有80256个标记物体并且测试模式包含普通的视角以及鸟瞰视角(Bird Eye’s View, BEV)任务这里主要针对Kitti数据集的3D检测任务,分为3类:(1)简单:最小的box高度为40px,不出现遮挡,最大box重叠比例为15%(2)中等:最小的box高度为25px,最多出现部分遮挡,最大box重叠比例为30%(3)困难:最小的box高度为25px,最多出现几乎完全遮挡,最大box重叠比例为50%算mAP的时候,对于Ca_kitti thetas

推荐文章

热门文章

相关标签