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"
});

  

时间: 2024-09-30 11:30:33

jquery metadata 详解的相关文章

jquery validate 详解

jquery validate 详解 [转载地址:http://blog.csdn.net/hliq5399/article/details/6557789] jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src="../js/jquery.js" type="text/javascript"></script>

jQuery内核详解与实践读书笔记1:原型技术分解2

上一篇已经搭建了一个非常简陋的jQuery框架雏形,如没有阅读搭建过程,请先阅读<jQuery内核详解与实践读书笔记1:原型技术分解1>初始搭建过程.接下来,完成书中介绍的剩下三个步骤: 7. 延续--功能扩展 jQuery框架是通过extend()函数来扩展功能的,extend()函数的功能实现起来也很简单,它只是吧指定对象的方法复制给jQuery对象或jQuery.prototype对象,如下示例代码就为jQuery类和原型定义了一个扩展功能的函数extend(). 1 var $ = j

jQuery内核详解与实践读书笔记1:原型技术分解1

一直以来都有研究一下jQuery源代码的想法,但是每次看到jQuery几千行的代码,头就大了,没有一点头绪,也不知道从哪里开始.昨天去图书馆无意间发现了这本<jQuery内核详解和实践>,翻看了一下里面的内容,这正是我寻觅多时剖析jQuery源码的好书. 废话不多说,直入正题吧.第一章介绍了一下jQuery的起步和一些历史故事,没什么重要内容.这里直接进入第二章,jQuery技术解密,从这一章开始就全部是干货了.这一章主要分四部分:jQuery原型技术分解,破解jQuery选择器接口,解析jQ

jQuery css详解

今天确确实实是放了一天假,喝了点小酒,看了天天向上和快乐大本营以及中国好舞蹈,越来越热爱舞蹈了,还是总结一篇吧. @jquery css css(name|pro|[,val|fn):访问或设置匹配元素的样式属性 1 $("div").click(function(){ 2 $(this).css({width:20px,height:30px}) 3 }); offset([coordinates]):获取匹配元素在当前视口(body)的相对偏移 1 <p>hello b

转:jQuery.lazyload详解使用方法

来源:http://www.cnblogs.com/wenbo/archive/2011/07/15/2107579.html jQuery实现图片延迟加载,不知道是否可以节省带宽呢?有人知道吗? 这究竟只是一个视觉特效还是真的能延迟加载减少服务器的请求呢? <script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery.lazyload.js&quo

jquery tmpl 详解(转)

动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据.不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML. 浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就想死了,需要很小心很小心地写出几乎无法维护的 Ja

jQuery回调、递延对象总结(一)jQuery.Callbacks详解

前言: 作为参数传递给另一个函数执行的函数我们称为回调函数,那么该回调又是否是异步的呢,何谓异步,如:作为事件处理器,或作为参数传递给 (setTimeout,setInterval)这样的异步函数,或作为ajax发送请求,应用于请求各种状态的处理,我们可以称为异步回调,jQuery.Callbacks 为我们封装了一个回调对象模块,我们先来看一个应用场景: // 为什么jQuery中的ready事件可以执行多个回调,这得益于我们的jQuery.Deferred递延对象(是基于jQuery.Ca

J2EE学习篇之--JQuery技术详解

前面我们讲解了的J2EE的技术都是服务端的技术,下面我们来看一下前端的一些开发技术,这一篇我们来看一下jQuery技术 简介: jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE,写更少的代码,做更多的事情. 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏

jQuery.validator 详解二

前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲述如何对元素进行验证前有必要了解它的代码组织方式,请看代码(部分省略) var plugFn = function( $ ) { $.extend($.fn, { // 验证from表单 validate: function( options ) { // ... // 实例化$.validator