Jquery实现数据双向绑定（赋值和取值），类似AngularJS
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Jquery实现数据双向绑定（赋值和取值）</title>
<link href="~/Css/css.css" rel="stylesheet" />
<script src="~/Js/jquery.min.js"></script>
<script>
$(document).ready(function () {
var objData = {
'id': 1,
'name': '张三',
'area': 'futian',
'sex': 'male',
'hobby': 'music,movie',
'intro': '你好，世界'
};
//将数据加载到表单中
$.mloadData(objData);
//读取表单中的数据 提交
$("#btnSave").click(function () {
var data = $.mSaveData(objData);
console.log(data);
});
}); /*
*双向数据绑定（赋值）
*param objData 源对象
*return
*/
$.mloadData = function (objData) {
var obj = objData;
var key, value, tagName, type, arr;
for (x in obj) {
key = x;
value = obj[x];
$("[name='" + key + "']").each(function () {
tagName = $(this)[0].tagName;
type = $(this).attr('type');
if (tagName == 'INPUT') {
if (type == 'radio') {
$(this).attr('checked', $(this).val() == value);
} else if (type == 'checkbox') {
arr = value.split(',');
for (var i = 0; i < arr.length; i++) {
if ($(this).val() == arr[i]) {
$(this).attr('checked', true);
break;
}
}
} else {
$(this).val(value);
}
} else if (tagName == 'SELECT' || tagName == 'TEXTAREA') {
$(this).val(value);
}
});
}
}; /*
*双向数据绑定（取值）
*param objData 源对象
*return
*/
$.mSaveData = function (objData) {
var tagName, type;
for (x in objData) {
$("[name='" + x + "']").each(function () {
tagName = $(this)[0].tagName;
type = $(this).attr('type');
if (tagName == 'INPUT') {
if (type == 'radio') {
objData[x] = $("input[name='" + x + "']:checked").attr("value");
} else if (type == 'checkbox') {
var checkValue = [];
$("input[name='" + x + "']:checked").each(function () {
checkValue.push($(this).val());
});
objData[x] = checkValue.join(",");
} else {
objData[x] = $(this).val();
}
} else if (tagName == 'SELECT' || tagName == 'TEXTAREA') {
objData[x] = $(this).val();
}
});
}
return objData;
};
</script>
</head>
<body>
<div>
<form id="myform" method="post" action="">
<fieldset>
<legend>jquery数据双向绑定</legend>
<table>
<tr>
<td>姓名</td>
<td>
<input type="hidden" name="id" />
<input type="text" name="name" />
</td>
</tr> <tr>
<td>地区</td>
<td>
<select name="area">
<option value="futian">福田区</option>
<option value="nanshan">南山区</option>
<option value="luohu">罗湖区</option>
</select>
</td>
</tr> <tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女
</td>
</tr> <tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="movie" />电影
<input type="checkbox" name="hobby" value="music" />音乐
<input type="checkbox" name="hobby" value="basketball" />篮球
</td>
</tr> <tr>
<td>简介</td>
<td>
<textarea name="intro"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center;">
<input id="btnSave" type="button" value="提交" />
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</body>
</html>
Jquery实现数据双向绑定（赋值和取值），类似AngularJS的更多相关文章
- Angular数据双向绑定
Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
- vue中v-model 数据双向绑定
表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
- 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()
Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...
- 深入理解Proxy 及 使用Proxy实现vue数据双向绑定
阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...
- 深入理解 Object.defineProperty 及实现数据双向绑定
Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...
随机推荐
- Rehat一键安装mysql脚本和备份数据库脚本
Rehat一键安装mysql脚本 ##说明:适用,Rehat 5 6 7 1.运行状态,运行成功输出mysql临时密码 2.代码如下 #!/bin/bash #获取系统信息 sudo cat /etc ...
- CentOS6.5下安装mfs分布式存储(转)
MFS文件系统的组成 1. 元数据服务器.在整个体系中负责管理管理文件系统,目前MFS只支持一个元数据服务器master,这是一个单点故障,需要一个性能稳定的服务器来充当.希望今后MFS能支持多个m ...
- GUI（国际象棋棋盘）
package com.niit.javagui; import java.awt.BorderLayout; import java.awt.Color; import java.awt.GridB ...
- 福州大学软工 1715 | K 班 - 启航
福州大学软工 1715 | K 班 - 启航 愉快的暑假已经接近尾声了,我猜很多同学的暑假都过得轻松,毕竟是夏天(空调/WiFi/西瓜).不过呢,暑假期间的老师.助教们可没有闲着,都在为接下来的软工实 ...
- 201521123105 第10周Java学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-21.1 截图你的提交结果(出现 ...
- 201521123072《java程序设计》第十四周学习总结
201521123072<java程序设计>第十四周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库 ...
- 201521123035《Java程序设计》第十周实验总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...
- 201521123018 《Java程序设计》第11周学习总结
1. 本章学习总结 你对于本章知识的学习总结 2. 书面作业 一.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问, ...
- 多线程面试题系列（14）：读者写者问题继 读写锁SRWLock
在第十一篇文章中我们使用事件和一个记录读者个数的变量来解决读者写者问题.问题虽然得到了解决,但代码有点复杂.本篇将介绍一种新方法--读写锁SRWLock来解决这一问题.读写锁在对资源进行保护的同时,还 ...
- java类成员变量与代码块初始化
首先根据下面的这个一段代码:引入关于java初始化顺序的问题public class InitationTest extends Person { public InitationTest() { S ...