jquery metadata 详解
1.0的版本是这样的$.meta
2.0的版本是这样的$.metadata
很多插件的编写都用到了这个插件,个人感觉这个东西应该是jquery官方的。推荐使用2.0的版本,
因为现在官方上就是2.0的文档(http://docs.jquery.com/Plugins/Metadata),1.0的,我个人还没看懂,倒是2.0的例子运行很正常。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery.metadata.2.0/jquery.metadata.2.0/test/jquery.js"></script>
<!-- 这里既引用了1.0又引用了2.0,就是为了说明它们之间没有冲突,我的理解是以前的优秀插件里面使用了1.0,但是1.0的问题确实有,所以2.0把meta改成metadata 这样就不会相互冲突了-->
<script type="text/javascript" src="jquery.metadata.2.0/jquery.metadata.2.0/jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.metadata.1.0/jquery.metadata.1.0/jquery.metadata.js"></script>
<script language="javascript">
$(document).ready(function(){
alert($(".media").metadata().src);
alert($('li.someclass').metadata().some);
}); </script>
</head> <body> <OBJECT class="media {src:'/tems/upload/192168.mp3'}" data="[object Object]"></OBJECT>
<li class="someclass {some: 'data'} anotherclass">...</li>
OR
<li data="{some:'random', json: 'data'}">...</li>
OR
<li><script type="data">{some:"json",data:true}</script> ...</li>
<script language="javascript">
var data = $('li.someclass').metadata();
if ( data.some && data.some == 'data' )
alert('It Worked!');
</script>
</body>
</html>
翻译:
attr:内部属性,参数名字指向属性名
class:内部类的属性,用{}包裹
elem:内部子元素 (如script标签).参数的名字指向元素名。
函数:
metadata( options )返回jQuery对象
提取元数据,缓存,并返回元数据从jQuery集合的第一个元素。
Arguments:
options (Optional) Options
定义要提取的元数据类型的一组键/值对。所有选项都是可选的。
Options:
metadata( options )中的options有三种:type、name、single
type String Default: 'class'
指定元素的预期位置。可能的值是“class”:在类属性的搜索,“'elem”:在搜索元素内的元素搜索,和“attr”:在元素的自定义属性搜索。
在类中搜索元数据,而不是在类中。
$(".selector").metadata({
type: 'attr'
})
name String Default: 'metadata'
当类型是“attr”,指定要搜索的自定义属性的名称。当类型是“elem”,指定要搜索的元素的标记名称。
在一个名为“jdata"自定义元素属性搜索metadata。
$(".selector").metadata({
type: 'attr',
name: 'jdata'
})
single String Default: 'metadata'
鉴于从jQuery缓存元素提取数据的名称。
存储和检索提取到一个项目名为“jdata在jQuery的缓存数据。
$(".selector").metadata({
single: 'jdata'
})
Examples:
Gets metadata from the class attribute.
<li class="someclass {some: 'data'} anotherclass">...</li>
<script>alert($('li.someclass').metadata().some);</script>
Gets metadata from a custom attribute.
<li data="{some:'random', json: 'data'}">...</li>
<script>alert($('li.someclass').metadata({type:'attr',name:'data'}).some);</script>
Gets metadata from a child element.
<li class="someclass"><script type="application/json">{some:"json",data:true}</script>...</li>
<script>alert($('li.someclass').metadata({type:'elem',name:'script'}).some);</script>
jQuery.metadata.setType( type, name ) Returns: null
设置所有下列元数据请求的默认类型和名称选项。
Arguments:
type String
指定元素的预期位置。可能的值是“class”(默认):在类属性的搜索,“elem”:在元搜索的元搜索,和“attr”:在元素的自定义属性搜索。
名称字符串
根据“类型”选项的值来搜索的标记或属性的名称。
设置metadata插件以查找自定义属性。
<li data="{some:'random', json: 'data'}" class="someclass">...</li>
<script>
$.metadata.setType('attr','data');
alert($('li.someclass').metadata().some);
</script>
jQuery.metadata.get( elem, options ) Returns: Object
设置所有下列元数据请求的默认类型和名称选项。
Arguments:
elem Element
包含要提取的metadata的元素。
options (Optional) Options
定义要提取的metadata类型的一组键/值对。所有选项都是可选的。查看元数据插件页以了解更多信息。
设置metadata插件以查找自定义属性。
<li class="someclass {some:'random', json: 'data'}">...</li>
<script>
$('li.someclass').each(function(){
var data = $.metadata.get(this);
alert(data.some);
});
</script>
例子:
<li id="Li1" class='someclass {"item_id": 1, "item_label": "Label"}'>Item 1</li>
<li id="Li2" metadata='{"item_id": 1, "item_label": "Label"}'>Item 2</li>
<li id="Li3">
<metadata style="display: none;">{"item_id": 1, "item_label": "Label"}</metadata>
Item 3 </li>
<li id="Li4">
<script type="metadata">{"item_id": 1, "item_label": "Label"}</script>
Item 4 </li>
$(function() {
$("#item1").metadata().item_id; // 1
$("#item1").metadata({
"type": "class"
}).item_id; // 1
$("#item2").metadata({
"type": "attr"
}).item_label; // "Label"
$("#item2").metadata({
"type": "attr",
"name": "metadata"
}).item_label; // "Label"
$("#item3").metadata({
"type": "elem"
}).item_label; // "Label"
$("#item3").metadata({
"type": "elem",
"name": "metadata"
}).item_label; // "Label"
$("#item4").metadata({
"type": "elem",
"name": "script"
}).item_label; // "Label"
});
jquery metadata 详解的更多相关文章
- jQuery:详解jQuery中的事件(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- jQuery.validator 详解二
前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...
- jQuery.validator 详解
jQuery.validator 详解二 前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示 ...
- jquery方法详解
jquery方法详解 http://www.365mini.com/doc
- Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串
Jquery 选择器 详解 在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...
- JQuery数组详解(含实例)
<!doctype html>jQuery数组处理详解(含实例演示)@Mr.Think 演示所用数组 var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; 1 ...
- [转载]JavaEE学习篇之——JQuery技术详解
原文链接:http://blog.csdn.net/jiangwei0910410003/article/details/32102187 1.简介2.工具3.jQuery对象 1.DOM对象转化成j ...
- jquery扩展函数详解(我的人生颠覆)
作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 上次分析了jquery的源码 ...
- JQuery动画详解(四)
一:基本动画show()显示隐藏的匹配元素.这个就是 'show( speed, [callback] )' 无动画的版本.如果选择的元素是可见的,这个方法将不会改变任何东西.无论这个元素是通过hid ...
随机推荐
- C# 根据实体类的属性动态生成字符串
情景: 目前有两个实体类:Student,ClassInfo. public class Student { public string Name { get; set; } public strin ...
- Visual Studio 2008 SP1键盘F10单步调试超慢解决方法
症状: 中断程序调试时,F10或者其它键盘操作都超级慢. 鼠标点击工具栏的按钮速度正常. 解决方法: 网上说的什么删掉所有断点啦,关掉几个窗口啦,重置用户设置啦,关掉某某调试选项啦,关掉防火墙啦,都是 ...
- VS 2015 IDE 不支持 MS SQL 2000 生成 dbml
解决办法: 通过命令手动生成 然后把生成的ERendering.dbml 文件,通过工程项目-添加-现有项,加入项目.
- Django-01Django简介
1 MVC与MTV模型 MVCWeb服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起,模型负责业 ...
- 内置函数和numpy中的min(),max()函数
内置min()函数 numpy中的min()函数:
- django数据模型中关于on_delete的使用
django数据模型中关于on_delete的使用 class BookModel(models.Model): """ 书籍表 """ b ...
- IE9以下不支持placeholder属性
jquery.placeholder.min.js 这个js可以去这个网站搜索https://www.bootcdn.cn/jquery-placeholder/ 使用这个jquery.placeho ...
- sublime基本命令和使用
Ctrl+Shift+p Package Control Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)Ctrl+G 跳转到相应的行Ctrl+J 合并行(已选 ...
- TCP/IP协议之分层
 应用层和运输层只在端系统(End System)中实现, 底层协议在中间系统(Intermediate System)实现 ICMP和IGMP属于网络层的附属协议.虽然其内容是IP数据报的载荷(P ...
- scrollto 到指定位置
goTo = function(target){ var scrollT = document.body.scrollTop|| document.documentElement.scrollTop ...