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 ...

随机推荐

理解Javascript中的事件绑定与事件委托
最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定 ...
Ubuntu下使用UFW，以及CentOS7的默认防火墙firewalld
UFW是一个简化版的iptables,基于iptables,配置比iptables简单默认UFW是关闭状态,即Ubuntu默认打开所有端口,比较危险. 检测状态 ufw status 设置默认状态, ...
[Postgres]关于Postgres的INHERIT，分表
实在是很强大的功能可以通过Check的制约把结构相同的表合并起来,或者反过来说,可以在一个表名下数据库自动的根据Check条件往对应的分表里存储数据 [USER_DATA表] CREATE TABL ...
[LeetCode 题解]: Permutation Sequcence
The set [1,2,3,…,n] contains a total of n! unique permutations. By listing and labeling all of the p ...
Verilog MIPS32 CPU（一）-- PC寄存器
Verilog MIPS32 CPU(一)-- PC寄存器 Verilog MIPS32 CPU(二)-- Regfiles Verilog MIPS32 CPU(三)-- ALU Verilog M ...
ecahrt 扇形（半扇形）
var data = [{ "name": "1", "value": 54 }, { "name": "2& ...
Spring Boot - 记录日志
比自己写文本日志的好处默认定义好了一些日志级别,会记录当前使用的级别以上的日志,通常线上环境设置的级别较高记得较少有一些自动split之类的功能 Commons-logging 日志级别:TRAC ...
SQL SERVER先判断视图是否存在然后再创建视图的语句
如果我们的语句为: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 IF NOT EXISTS(SELECT 1 FROM sys.views WHERE name='Report_I ...
[Objective-C语言教程]循环语句（9）
当需要多次执行同一代码块时,可以使用循环来解决. 通常,语句按顺序执行:首先执行函数中的第一个语句,然后执行第二个语句,依此类推. 编程语言提供各种控制结构,允许更复杂的执行路径.循环语句可用于多次执 ...
10分钟教你用Python玩转微信之抓取好友个性签名制作词云
01 前言+展示各位小伙伴我又来啦.今天带大家玩点好玩的东西,用Python抓取我们的微信好友个性签名,然后制作词云.怎样,有趣吧~好了,下面开始干活.我知道你们还是想先看看效果的. 后台登录: 词 ...

jquery metadata 详解

jquery metadata 详解的更多相关文章

随机推荐

热门专题