jQuery實(shí)現(xiàn)html雙向綁定功能示例

更新時間：2017年10月09日 10:53:17 作者：IT小君

這篇文章主要介紹了jQuery實(shí)現(xiàn)html雙向綁定功能,涉及jQuery針對HTML頁面元素事件綁定相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)html雙向綁定功能。分享給大家供大家參考，具體如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script>
var user = new User('123');
$(function(){
user.set( "name", "99" );
});
 function GetData() {
  alert(user.attributes.name);
 }
function DataBinder( object_id ) {
 var pubSub = jQuery({});
 var data_attr = "bind-" + object_id,
   message = object_id + ":change";
 jQuery( document ).on( "change", "[data-" + data_attr + "]", function( evt ) {
  var $input = jQuery( this );
  pubSub.trigger( message, [ $input.data( data_attr ), $input.val() ] );
 });
 pubSub.on( message, function( evt, prop_name, new_val ) {
  jQuery( "[data-" + data_attr + "=" + prop_name + "]" ).each( function() {
   var $bound = jQuery( this );
   if ( $bound.is("input, textarea, select") ) {
    $bound.val( new_val );
   } else {
    $bound.html( new_val );
   }
  });
 });
 return pubSub;
}
function User( uid ) {
 var binder = new DataBinder( uid ),
   user = {
    attributes: {},
    set: function( attr_name, val ) {
     this.attributes[ attr_name ] = val;
     binder.trigger( uid + ":change", [ attr_name, val, this ] );
    },
    get: function( attr_name ) {
     return this.attributes[ attr_name ];
    },
    _binder: binder
   };
 binder.on( uid + ":change", function( evt, attr_name, new_val, initiator ) {
  if ( initiator !== user ) {
   user.set( attr_name, new_val );
  }
 });
  return user;
 }
</script>
</head>
<body>
<input type="text" data-bind-123="name" /><br/>
<input type="button" onclick="GetData();" value="獲取數(shù)據(jù)"></div>
</body>
</html>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

仿當(dāng)當(dāng)網(wǎng)淘寶網(wǎng)等主流電子商務(wù)網(wǎng)站商品分類導(dǎo)航菜單
本文實(shí)現(xiàn)了一個分類導(dǎo)航的菜單,和大多數(shù)流行的電子商務(wù)網(wǎng)站類似，詳細(xì)的實(shí)現(xiàn)可以直接查看源代碼.所有的代碼都在一個sidebar.html文件中
2013-09-09
JQuery slideshow的一個小問題(如何發(fā)現(xiàn)及解決過程)
在做一個網(wǎng)頁homepage的時候，想用slideshow［1］做圖片切換效果,在打開頁面所以的正常測試都沒問題:當(dāng)瀏覽器同時打開多個tab，停留他tab中的頁面一段時間后，會出現(xiàn)圖片是最后一張圖片,針對這個問題，本文給予了詳細(xì)的解決方法，感興趣的朋友可以了解下
2013-02-02
jQuery pager.js 插件動態(tài)分頁功能實(shí)例分析
這篇文章主要介紹了jQuery pager.js 插件動態(tài)分頁功能,結(jié)合具體實(shí)例形式分析了pager.js 插件的定義及使用插件進(jìn)行分頁操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-08-08
jQuery通過改變input的type屬性實(shí)現(xiàn)密碼顯示隱藏切換功能
大家在做登錄注冊功能的時候都會遇到用戶選擇自己輸入的密碼是否顯示需求，大家都是怎么實(shí)現(xiàn)的呢？今天小編給大家分享一種比較好用的方法jQuery通過改變input的type屬性實(shí)現(xiàn)密碼顯示隱藏切換功能，需要的朋友參考下
2017-02-02
深入理解JQuery循環(huán)綁定事件
下面小編就為大家?guī)硪黄钊肜斫釰Query循環(huán)綁定事件。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
jQuery實(shí)現(xiàn)淡入淡出效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)淡入淡出效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
jquery中object對象循環(huán)遍歷的方法
這篇文章主要介紹了jquery中object對象循環(huán)遍歷的方法，感興趣的小伙伴們可以參考一下
2015-12-12
jQuery模擬select實(shí)現(xiàn)下拉菜單功能
這篇文章主要介紹了jQuery模擬select實(shí)現(xiàn)下拉菜單功能,比較實(shí)用,需要的朋友可以參考下。
2016-06-06
jquery文字上下滾動的實(shí)現(xiàn)方法
jquery文字上下滾動的實(shí)現(xiàn)方法，需要的朋友可以參考一下
2013-03-03
jquery實(shí)現(xiàn)不包含當(dāng)前項(xiàng)的選擇器實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)不包含當(dāng)前項(xiàng)的選擇器,實(shí)例分析了jquery選擇器的使用技巧,需要的朋友可以參考下
2015-06-06