jQuery插件-微软jQuery Data Linking

开发 前端
知道很多人会好奇,为什么我们要使用 jQuery Data Linking插件呢?下边就让我们一起看看使用 jQuery Data Linking给我们带来的便利以及如何使用 jQuery Data Linking。

昨天,我们稍微学习了下微软jQuery 插件 jQuery Templates,今天我们看看微软开发的第二个jQuery插件 jQuery Data Linking 。我知道很多人会好奇,为什么我们要使用 jQuery Data Linking插件呢?下边就让我们一起看看使用 jQuery Data Linking给我们带来的便利以及如何使用 jQuery Data Linking。

使用jQuery Data Linking插 件后,比如我们更新表单内容后,我们绑定到表单的javascript对象也会跟着改变;更新javascript对象内容时,我们的表单数据也会跟着变 化。这样就会变得非常方便,如当进行表单更新操作时,我们无须再手动写代码来重新获取表单数据,这样将我们从机械的操作中解放出来,让我们更关注于数据本 身。这样直白的表达或许你不会容易明白,下边我们还是以一个非常小的例子看看jQuery Data Linking插件使用吧!

首先,我们还是先引入jQuery 文件和jQuery Data Linking插件,如下:

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
  2. <script src="jquery.datalink.js" type="text/javascript"></script> 

接下来,我们先看看使用的html标记:

  1. <form id="formData" action=""> 
  2.     Name:<input id="user"  /><br /> 
  3.     Website:<input id="website"  /> 
  4.     <input type="button" id="show" value="Result" /> 
  5. </form> 

下边是javascript对象以及使用link()方法将它和我们的表单进行绑定。

  1. <script type="text/javascript"> 
  2.     var users = { name: "朋友的你", website: "jquery001.com" }; 
  3.     $(document).ready(function () { 
  4.         $("#formData").link(users, { 
  5.             name: "user", 
  6.             website: "website" 
  7.         }); 
  8.     }); 
  9. </script> 

下边,比如当用户名改变为"jQuery学习"后,让我们看看javascript user对象中name值:

  1. $("#show").click(function () { 
  2.     alert(users.name); 
  3. }); 

结果如下图:

jQuery Data Linking

可见到此我们已经做到了文章开头所说的,当文本框内容改变时,我们没有写额外的代码,即能得到文本框的***值。原理就在于此时的javascript对象 通过jQuery Data Linking 同Form表单进行了绑定。同理,当我们改变javascript对象的值,用同样的方法可以发现表单中文本框的值也随着发生了改变。如果我们想取消联结 时,可以使用$(source).unlink(target)方法进行取消。

使用了jQuery Data Linking后,确实能够将我们从机械的编码中解放出来,遗憾的是自己也没有在具体项目中使用过这个微软的jQuery 插件。好了,本篇就起一个非常简单的介绍作用,如果你很感兴趣,可以看看jquery-datalink。

原文链接:http://www.jquery001.com/jquery-data-linking.html

责任编辑:陈四芳 来源: jquery001.com
相关推荐

2013-12-02 15:36:17

jQuery插件

2013-12-02 15:31:37

jQuery插件

2013-12-02 14:53:20

jQuery插件

2013-10-09 10:00:35

JQueryJQuery插件

2013-12-02 15:10:56

jQuery插件

2013-12-02 15:21:30

jQuery插件

2010-06-28 09:06:44

jQueryjQuery国际化插件

2013-12-02 15:25:38

jQuery插件

2012-12-18 09:49:57

jQueryJavaScriptJS

2012-05-10 13:45:45

jQuery

2011-08-29 14:50:08

jQuery插件

2013-01-09 10:20:26

jQueryFlotjQuery插件

2011-08-25 09:30:22

2012-05-22 01:45:58

JavaScriptCSSXML

2012-06-15 11:32:19

ibmdw

2012-11-22 13:02:24

jQuery插件Web

2012-05-07 09:53:10

jQuery

2012-04-25 09:43:43

jQuery插件

2012-04-23 09:12:29

jQuery插件

2009-06-18 15:49:31

jQuery插件
点赞
收藏

51CTO技术栈公众号