讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

jquery操作HTML5 的data-*的用法实例分享_jquery

php中文网
发布： 2016-05-16 16:39:28
原创
1419人浏览过

阅读html5的详细规范后你会发现，这个自定义data属性的用法非常的简单，就是你可以往html标签上添加任意以 "data-"开头的属性，这些属性页面上是不显示的，它不会影响到你的页面布局和风格，但它却是可读可写的。

jquery 里已经内置这个方法. 通过 $(‘#content‘).data(‘list'); 就能获取数据. 这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的data属性.



PHP高级开发技巧与范例
PHP高级开发技巧与范例

PHP是一种功能强大的网络程序设计语言，而且易学易用，移植性和可扩展性也都非常优秀，本书将为读者详细介绍PHP编程。 全书分为预备篇、开始篇和加速篇三大部分，共9章。预备篇主要介绍一些学习PHP语言的预备知识以及PHP运行平台的架设；开始篇则较为详细地向读者介绍PKP语言的基本语法和常用函数，以及用PHP如何对MySQL数据库进行操作；加速篇则通过对典型实例的介绍来使读者全面掌握PHP。 本书

PHP高级开发技巧与范例 486
查看详情 PHP高级开发技巧与范例


jquery操作HTML5 的data-*的用法

" rel="external nofollow" >http://code.jquery.com/jquery-2.1.0.min.js">>
<script><br /> $(function(){<br /> //读取data-*的值<br /> $("li").each(function(v) {<br /> console.log($(this).data('name'));<br /> });<br /> <br /> //设置data-*的值<br /> $("li").eq(0).data('name','bryant');<br /> $("li").each(function(v) {<br /> console.log($(this).data('name'));<br /> });<br /> <br /> //删除data-*的值 这里使用的是removeAttr，测试官方的removeData是不起作用的<br /> $("li").eq(0).removeAttr('data-name');<br /> $("li").each(function(v) {<br /> console.log($(this).data('name'));<br /> });<br /> })<br /> </script>


       
  • 科比

    •    
  • 加索尔

    •    
  • 纳什

    •    
  • 费舍尔



相关标签：
jquery html5

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：javascript ajax的5种状态介绍_基础知识 下一篇：Node.js模块加载详解_node.js
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
Javascript中的WebSocket如何工作？ WebSocket通过HTTP升级握手建立持久全双工连接：客户端发含Upgrade、Sec-WebSocket-Key的请求，服务器返回101状态及Sec-WebSocket-Accept校验；连接后通过onopen/onmessage/onclose/onerror事件收发数据，以帧而非HTTP报文传输，支持文本、二进制、Ping/Pong；需用wss://加密，服务器需校验Origin，原生无自动重连。
2025-12-18 12:10:03
882
javascript函数怎样定义_它们为何如此重要？ JavaScript函数是执行特定任务的可重用代码块，核心作用在于封装逻辑、避免重复、提升可读性与可维护性，支持函数声明、表达式、箭头函数及对象方法等多种定义方式，并构成模块化、高阶函数、闭包和异步编程的基础。
2025-12-18 11:47:02
763
JavaScript中如何实现轮播图_setInterval控制 用setInterval实现轮播图需先清除旧定时器再启动新定时器，避免叠加；监听页面可见性，在隐藏时清除、显示时重启定时器，防止资源浪费和连跳。
2025-12-18 11:40:03
780
javascript如何实现拖放功能？_javascript的Drag and Drop API如何使用？ JavaScript拖放功能依赖原生DragandDropAPI，需设置draggable="true"、在dragstart中用setData存数据、在dragover中preventDefault以启用drop、在drop中用getData取数据并处理；移动端不支持，需降级方案。
2025-12-18 11:12:06
324
javascript如何实现代码打包？_javascript的模块打包工具如何配置？ JavaScript打包依赖Webpack、Vite、Rollup等工具，核心是配置而非编码：Webpack成熟适中大型项目需手动配置；Vite开箱即用、开发快，适合业务项目；Rollup专注类库打包，强调Tree-shaking与多格式输出。
2025-12-18 11:10:02
628
javascript的let和const是什么_它们与var有何不同？ let和const是ES6引入的块级作用域变量声明方式，区别于var的函数作用域；它们不具变量提升安全性（处于暂时性死区），禁止重复声明，且const必须初始化、不可重新赋值（但对象属性可变）；推荐默认使用const，需重赋值时用let，基本不再使用var。
2025-12-18 10:55:31
833
javascript生成器函数是什么_如何使用yield暂停执行？ JavaScript生成器函数是可中途暂停并恢复执行的特殊函数，通过function声明和yield关键字实现状态冻结与控制权让出，返回迭代器对象供.next()调用，支持双向数据传递及yield委托，适用于分步处理、异步模拟和树遍历等场景。
2025-12-18 10:39:03
629
Javascript中如何进行面向对象编程？ JavaScriptOOP基于原型而非类，ES6class仅为语法糖；核心是对象创建、属性/方法共享、继承与封装；推荐class写法但需注意私有字段限制；手动操作prototype可深入理解机制；封装可用闭包或#私有字段；组合优于继承。
2025-12-18 10:29:45
987
javascript Web Workers是什么_如何实现多线程编程 WebWorkers是浏览器提供的真正多线程机制，通过独立执行上下文实现后台任务运行，避免阻塞主线程；适用于密集计算、图像处理、大数据解析等场景，需用postMessage通信且不可访问DOM。
2025-12-18 09:37:24
362
什么是JavaScript的空值合并运算符？ 空值合并运算符（??）仅在左侧为null或undefined时返回右侧值，否则保留原值；与||不同，它不将0、false、‘’等falsy值视为“空”；常用于默认值设置、安全读取嵌套属性等场景。
2025-12-18 09:19:44
944
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部