<!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的更多相关文章

  1. Angular数据双向绑定

    Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...

  2. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  3. 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  4. vue中v-model 数据双向绑定

    表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...

  5. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  6. 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  7. 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()

    Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...

  8. 深入理解Proxy 及 使用Proxy实现vue数据双向绑定

    阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...

  9. 深入理解 Object.defineProperty 及实现数据双向绑定

    Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...

随机推荐

  1. hdu 2066 最短路水题

    题意:给出多个可选择的起始点和终点,求最短路 思路:执行起始点次的spfa即可 代码: #include<iostream> #include<cstdio> #include ...

  2. hdu 3342 拓扑排序 水

    好久没切题  先上水题! 拓扑排序! 代码: #include<iostream> #include<cstdio> #include<cstring> using ...

  3. java伪代码《大道至简》

    阅读<大道至简>第一章,深感作者对编程问题的精炼定义,通过对古老寓言故事<愚公移山>的引用,说明了编程的本质,即顺序,分支,循环.其中又将他们扮演的项目组织者,团队经理,编程人 ...

  4. 转：【深入Java虚拟机】之六：Java语法糖

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/18011009 语法糖(Syntactic Sugar),也称糖衣语法,是由英国计算机学家P ...

  5. 201521123084 《Java程序设计》第3周学习总结

    1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 本周学习总结 ...

  6. Git与码云(Git@OSC)入门-如何在实验室和宿舍同步你的代码(2)

    4. 处理冲突 4.1 向远程仓库push时无法提交成功,提示在push前应该先pull 如图所示: 有可能是因为远程仓库的版本与本地仓库的版本不一致,所以应先git pull将远程仓库的内容合并到本 ...

  7. 201521123112《Java程序设计》第13周学习总结

    1. 本周学习总结 协议的概念是网络中为了通信而建立的规则,常用的应用层协议有http,ftp等. 测试计算机之间的网络是否连通可以使用ping命令. 可以使用IP+端口号的方法来确定数据包是发给哪个 ...

  8. 201521123049 《JAVA程序设计》 第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  9. 201521123053《Java程序设计》第十周学习总结

    ---恢复内容开始--- 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 在java多线程程序中,所有线程都不允许抛出未捕获的checked excepti ...

  10. 201521123113《Java程序设计》第9周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集异常 Q1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何 ...