jQuery實現(xiàn)html雙向綁定功能示例
更新時間：2017年10月09日 10:53:17 作者：IT小君
這篇文章主要介紹了jQuery實現(xiàn)html雙向綁定功能,涉及jQuery針對HTML頁面元素事件綁定相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了jQuery實現(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)航菜單
本文實現(xiàn)了一個分類導(dǎo)航的菜單,和大多數(shù)流行的電子商務(wù)網(wǎng)站類似，詳細(xì)的實現(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)分頁功能實例分析
這篇文章主要介紹了jQuery pager.js 插件動態(tài)分頁功能,結(jié)合具體實例形式分析了pager.js 插件的定義及使用插件進(jìn)行分頁操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-08-08
jQuery通過改變input的type屬性實現(xiàn)密碼顯示隱藏切換功能
大家在做登錄注冊功能的時候都會遇到用戶選擇自己輸入的密碼是否顯示需求，大家都是怎么實現(xiàn)的呢？今天小編給大家分享一種比較好用的方法jQuery通過改變input的type屬性實現(xiàn)密碼顯示隱藏切換功能，需要的朋友參考下2017-02-02
下面小編就為大家?guī)硪黄钊肜斫釰Query循環(huán)綁定事件。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)淡入淡出效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了jquery中object對象循環(huán)遍歷的方法，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了jQuery模擬select實現(xiàn)下拉菜單功能,比較實用,需要的朋友可以參考下。2016-06-06
jquery文字上下滾動的實現(xiàn)方法，需要的朋友可以參考一下2013-03-03
jquery實現(xiàn)不包含當(dāng)前項的選擇器實例
這篇文章主要介紹了jquery實現(xiàn)不包含當(dāng)前項的選擇器,實例分析了jquery選擇器的使用技巧,需要的朋友可以參考下2015-06-06