jQuery的属性与样式之元素的数据存储
来源:互联网 发布:动漫模板源码 编辑:程序博客网 时间:2024/05/17 04:44
html5 dataset是新的HTML5标准,允许你在普通的元素标签里嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由JavaScript动态修改,也支持CSS选择器进行样式设置。这使得data属性特别灵活,也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。那么在不支持HTML5标准的浏览器中,我们如何实现数据存取? jQuery就提供了一个.data()的方法来处理这个问题
使用jQuery初学者一般不是很关心data方式,这个方法是jquery内部预用的,可以用来做性能优化,比如sizzle选择中可以用来缓存部分结果集等等。当然这个也是非常重要的一个API了,常常用于我们存放临时的一些数据,因为它是直接跟DOM元素对象绑定在一起的
jQuery提供的存储接口
jQuery.data( element, key, value ) //静态接口,存数据jQuery.data( element, key ) //静态接口,取数据 .data( key, value ) //实例接口,存数据.data( key ) //实例接口,存数据
2个方法在使用上存取都是通一个接口,传递元素,键值数据。在jQuery的官方文档中,建议用.data()方法来代替。
我们把DOM可以看作一个对象,那么我们往对象上是可以存在基本类型,引用类型的数据的,但是这里会引发一个问题,可能会存在循环引用的内存泄漏风险
通过jQuery提供的数据接口,就很好的处理了这个问题了,我们不需要关心它底层是如何实现,只需要按照对应的data方法使用就行了
同样的也提供2个对应的删除接口,使用上与data方法其实是一致的,只不过是一个是增加一个是删除罢了
jQuery.removeData( element [, name ] ).removeData( [name ] )
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left, .right { width: 300px; height: 120px; } .left div, .right div { width: 100px; height: 90px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; } .left div { background: #bbffaa; } .right div { background: yellow; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <h2>jQuery.data()静态方法</h2> <div class="left"> <div class="aaron"> <p>点击看结果</p> <p>jQuery.data</p> </div> <div><span></span></div> </div> <h2>.data()实例方法</h2> <div class="right"> <div class="aaron"> <p>点击看结果</p> <p>.data</p> </div> <div><span></span></div> </div> <script type="text/javascript"> $('.left').click(function() { var ele = $(this); //通过$.data方式设置数据 $.data(ele, "a", "data test") $.data(ele, "b", { name : "慕课网" }) //通过$.data方式取出数据 var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name ele.find('span').append(reset) }) </script> <script type="text/javascript"> $('.right').click(function() { var ele = $(this); //通过.data方式设置数据 ele.data("a", "data test") ele.data("b", { name: "慕课网" }) //通过.data方式取出数据 var reset = ele.data("a") + "</br>" + ele.data("b").name ele.find('span').append(reset) }) </script></body></html>
阅读全文
0 0
- jQuery的属性与样式之元素的数据存储
- jQuery的属性与样式之元素的数据存储
- jQuery的属性与样式之.val()
- jQuery的属性与样式之.val()
- jQuery的属性与样式之.val()
- 使用jQuery操作元素的属性与样式
- 使用jQuery操作元素的属性与样式
- JQuery操作元素的属性与样式及位置
- jQuery操作元素的属性与样式方法总结
- JQuery操作元素的属性与样式及位置
- jQuery的属性与样式之增加样式.addClass()
- jQuery的属性与样式之删除样式.removeClass()
- jQuery的属性与样式之切换样式.toggleClass()
- jQuery的属性与样式之样式操作.css()
- jQuery的属性与样式之增加样式.addClass()
- jQuery的属性与样式之删除样式.removeClass()
- jQuery的属性与样式之切换样式.toggleClass()
- jQuery的属性与样式
- XGBoost:参数解释
- linux编程之静态库和动态库
- 静态绑定 动态绑定 缺省参数
- Lua基础(4)--注释符
- 开发板linux连接wifi的方法(一)
- jQuery的属性与样式之元素的数据存储
- 局部Mock
- 使用gdal的ogr创建shapefile文件(c++)
- 代理模式
- 从零开始学习Java Web(二):初步认识Servlet
- Hue集成的一些问题
- <c:foreache>标签使用方法?
- C++知识点(3)
- 2、mac的end 键和home