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

随机推荐

Hexo 最常用的几个命令
Hexo 约有二十个命令,但普通用户经常使用的大概只有下列几个: hexo s hexo s 启动本地服务器,用于预览主题.默认地址: http://localhost:4000/ hexo s 是 ...
Web应用与Spring MVC锁session
http是无连接的,所以服务器上并不会为每个用户开辟一个线程,因为没有用户这个说法,但是服务器端是有session的,为了防止一个用户同时有多个请求在处理,spring mvc在处理请求时把sessi ...
CSS float与clear & 替换元素与非替换元素
css3盒模型(box)中的一个概念,在css这种,每个元素生成了包含内容的框,有内联元素和块级元素之分.也可以区分为替换元素与非替换元素. 替换元素:浏览器根据标签的元素与属性来判断显示具体的内容. ...
windows包管理工具和 ssh安装
Chocolatey windows下的包管理工具 https://chocolatey.org/ cmd里执行 @"%SystemRoot%\System32\WindowsPowerSh ...
AI_图像识别
http://ai.baidu.com/forum/topic/show/595938 经测试识别率相当高,车辆信息识别文中的import cv2不是python3自带库,需要安装pip3 inst ...
javascript实现playfair和hill密码算法
时至期末,补习信息安全概论作业.恰巧遇古典密码学算法中的playfair算法和hill算法,用javascript语言实现起来是在有趣,边查百度边编码,顺便好好补习一下javascript基础. pl ...
git subrepo
此文已由作者张磊授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言目前对 git 仓库拆分的已有实现之一,并没有合并到 git 发行版中.项目的地址是 https://g ...
[ActionScript 3.0] AS3 绘制任意三角形任意顶点到对边的高
注:顶点坐标可以点击 package { import flash.display.Shape; import flash.display.Sprite; import flash.events.Mo ...
恢复 MSSQL bak 文件扩展名数据（下）
恢复 MSSQL bak 文件扩展名数据一.概念: RESTORE Statements (Transact-SQL) Restores backups taken using the BACKUP ...
Jupyter Notebook远程服务器配置[转]
首先要生成密码,打开python终端. In [1]: from IPython.lib import passwd In [2]: passwd() Enter password: Verify p ...

jquery metadata 详解

jquery metadata 详解的更多相关文章

随机推荐

热门专题