对于html的data属性做些笔记

最新推荐文章于 2024-12-10 16:10:58 发布
原创 最新推荐文章于 2024-12-10 16:10:58 发布 · 301 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #web #json #标签 #html

本文介绍了使用jQuery库设置和获取HTML元素的自定义data属性的两种方法：一种是通过.attr()方法设置data-id属性，但获取时返回的是对象而非JSON格式；另一种是使用.data()方法，它更适用于存储和检索JSON数据。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. $("#ID").attr("data-id",{'name':'张三'})    可以设置一个自定义data属性data-id,,$("#ID").attr("data-id"),但是取出来的值不是json格式而是object，所以如果用来保存json数组，推荐第2种方法。

2.设置$("#ID").data("data-id",{'name':'张三'})     获取的时候 可以使用$("#ID").data("data-id")来获取。

HTML5中的data-id与id
兜兜的博客
09-18 8286
本文主要阐述了HTML5中的新功能：自定义数据属性。并且简要说明了它的使用方法，与id选择器之间的区别以及获取它值的方法。
HTML基础笔记
2301_79235379的博客
07-31 1020
（定义项目/名字）和（描述每一个项目/名字）一起使用。名词1名词1解释1名词1解释2
data-属性的作用是什么?
weixin_44347685的博客
02-26 2517
data-* 属性用于存储页面或应用程序的私有自定义数据。 data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。 存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。 data-* 属性包括两部分： 属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符 属性值可以是任意字符串 注释：用户代理会完全忽略前缀为 “data-” 的自定义属性。 使用例子 <!DOCTY
jquery val html判断,jQuery判断自定义属性data-val用法示例
weixin_35806032的博客
06-20 464
本文实例讲述了jQuery判断自定义属性data-val用法。分享给大家供大家参考，具体如下：jquery判断自定义属性data-val1.css.active {color: red;}2.html123453.js//方法1$(function() {$("ul li[data-val='1']").addClass("active").siblings().removeClass("acti...
HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
雨后春笋_aspx专栏
06-27 880
 人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是，你不知道将来会不会有其它脚本把你的自定义属性给重置掉，此外，你这样做也会导致html语法上不符合Html规范，以及一些其它副作用。这就是为什么在HTML5规范里增加了一个自定义data属性，你可以拿它做很多有用的事情。        你可以去读一下HTML5的详细规范，但这个自定义data属性的用法非常的
如何获取data-id中的值
热门推荐
ke3863834的博客
08-08 4万+
一般data-id用于一些菜单栏的匹配，在实际中有很大的用处
JQuery中attr属性和jQuery.data()学习笔记【必看】
01-21
用html直接data-key来存放，key必须全部小写。 <div data-mydata=123> consoloe.log($(div).data(mydata)); //output 123 二避免在key中使用短横线 <a>fizz buzz! $('#bar').data().fooBarBaz; //works $('#bar')...
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 2891
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
HTML5属性data-*的操作
CRPER
04-25 8071
HTML5 自定义属性data-*的操作技巧汇总
HTML5 自定义数据属性（data-*）
最新发布
Allen-
12-10 1572
HTML5 引入的自定义数据属性（data-*）为开发者提供了一种将自定义数据嵌入HTML元素的标准方法。这个特性使得在不使用非标准属性或额外的 DOM 属性的情况下，能够在 HTML 元素上存储额外信息。
HTML5自定义属性之data-*
weixin_30387799的博客
08-25 435
HTML5增加了一项新功能是自定义数据属性，也就是data-*自定义属性。在HTML5中我们可以使用以data-为前缀来设置我们需要的自定义属性，来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。 <input type="button" value="按钮" data-index="10" data-index-color="r...
html 获取 data-value 的值
wbj16116的博客
07-06 1万+
<a class="user_vip" data-type="2" data-name="我的名字" href="#">点击</a> $('.user_vip').on('click', function () { // 方法一、 var type = $(this).data('type'); var ...
HTML 5：你必须知道的data属性
淡忘~浅思
12-06 2424
原文：All You Need to Know About the HTML5 Data Attribute 译文：你必须知道HTML 5 的Data属性 译者：dwqs HTML 5的Data属性可以让你给元素自定义数据。这篇文章就是思考怎么更好的使用Data属性。 介绍 HTML 5之前，我们必须依赖于class和rel属性来存储需要在网站中使用的数据片段，这种做法有时会在网站的外观和实用性之间产生冲突。而HTML 5 Data属性
自动获取 HTML5 的 data-* 属性
zhangxin09的专栏
12-26 1万+
项目中需要设计一系列的自定义标签，于是涉及到标签的属性如何访问。使用 HTML5 的 data-* 属性的话，获取元素后直接访问 dataset.属性名称 即可，dataset 的类型为 DOMStringMap {}，一个 MAP 对象，仍是 key / value 式的对象，使用上比较方便。但却遇到一个兼容性的问题， 在 Android 2.3 等的一些旧有浏览器上尚不支持。 对此，我们可以
jquery判断自定义属性data-val
Fly的博客
05-23 6810
jquery判断自定义属性data-val1.css.active { color: red; }2.html&lt;ul&gt; &lt;li data-val="1"&gt;1&lt;/li&gt; &lt;li data-val="2"&gt;2&lt;/li&gt; &lt;li data-val="3"&gt;3&a
HTML5自定义data属性
web开发自学
12-11 246
可能大家在使用jquery mobile时，经常会看到data-role、data-theme等的使用，比如：通过如下代码即可实现页眉的效果： &lt;div data-role="header"&gt; &lt;h1&gt;我是标题&lt;/h1&gt; &lt;/div&gt;通过手机浏览，效果如下： 为什么写一个data-role="header"就能实现底部为黑色、文字居...
html中的data作用,浅析HTML5："data-"属性的作用
weixin_42509774的博客
06-11 1675
在大家查看HTML时，经常会看到data-role、data-theme等的使用，比如：通过如下代码即可实现页眉的效果： 我是标题 为什么写一个data-role="header"就能实现底部为黑色、文字居中显示的效果呢？本文提供一种最简单的实现办法，让大家对这些用法有个直观的了解。我们写一个html页面，自定义一个data-chb="header"的属性，希望具备这个属性的di...
把jquery中获取的数组保存到html的data-XX中
ziyinxing的专栏
05-09 3686
$this.data('value', tagsValues); 在html中代码片段：有个data-value属性 白色
初学者指南：Bootstrap HTML5开发笔记
### Bootstrap学习笔记-html5 Bootstrap是一个广泛使用的前端框架，它使得网页开发变得简单快捷。通过使用Bootstrap，开发者能够快速地创建响应式布局的网站。所谓响应式，就是网站能够适应不同设备的屏幕尺寸，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值