jquery操作HTML5的data-*的用法实例分享
阅读HTML5的详细规范后你会发现,这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以""开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。
jquery里已经内置这个方法.通过$(‘#content‘).data(‘list");就能获取数据.这个方法是在jQuery1.4.3版本后出现的,它能返回相应的data属性.
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>jquery操作HTML5的data-*的用法</title>
</head>
<scriptsrc="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(function(){
//读取data-*的值
$("li").each(function(v){
console.log($(this).data("name"));
});
//设置data-*的值
$("li").eq(0).data("name","bryant");
$("li").each(function(v){
console.log($(this).data("name"));
});
//删除data-*的值 这里使用的是removeAttr,测试官方的removeData是不起作用的
$("li").eq(0).removeAttr("data-name");
$("li").each(function(v){
console.log($(this).data("name"));
});
})
</script>
<body>
<ul>
<lidata-name="kobe">科比</li>
<lidata-name="gasol">加索尔</li>
<lidata-name="nash">纳什</li>
<lidata-name="fisher">费舍尔</li>
</ul>
</body>
</html>
相关文章
- jQuery的Ajax实例(附完整代码)
- javascript/jquery获取地址栏url参数的方法
- jquery获得select option的值 和对select option的操作详解编程语言
- jQuery Google Charts—-一个封装google chart api的jquery插件详解编程语言
- JQuery 限制金额输入详解编程语言
- jquery的颜色选择插件实例代码
- Jquery工作常用实例使用AJAX使网页进行异步更新
- jquery图片放大镜功能的实例代码
- jQuery实现动画效果的实例代码
- jquery异步跨域访问代码
- jquery实现输入框动态增减的实例代码
- UpdatePanel和jQuery不兼容局部刷新jquery失效
- JQuery实现鼠标滑过显示导航下拉列表
- 基于JQuery的列表拖动排序实现代码
- jQuery替换字符串(实例代码)
- jQuery客户端分页实例代码
- jQuery操作input值的各种方法总结
- jquery使用淘宝接口跨域查询手机号码归属地实例
- 在jquery中的ajax方法怎样通过JSONP进行远程调用
- JQuery调用WebServices的方法和4个实例
- jQuery操作元素css样式的三种方法
- Jquery实现由下向上展开效果的例子
- jquery事件preventDefault()方法用法实例
- 浅谈jquery回调函数callback的使用