JQuery技巧|教你如何更快的赋值取值

显示数据时，常规赋值与取值是这样的.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// set $("#name").val(data.name); $("#realname").val(data.realname); $("#address").val(data.address); $("#sex").val(data.name); $("#love").attr(!!data.love);   // get var data = {     name:$("#name").val(),     realname:$("#realname").val(),     address:$("#address").val(),     sex:$("#sex").val(),     love:$("#love").attr('checked') };

最近的项目字段是相当多，大概有30+，楼主写的也郁闷了。赋值与取值，真是机械活。于是想到表单提交时，不准确的说，是后台接收到的数据均是控件的name与value的键值对，既然表单可以这样直接取值，并提交给后台，那赋值也应该是可以的。

总结楼主的需求，获取到一个实体对象，直接将对象的数据赋值到页面的控件中。根据实体对象的定义，直接取得页面上控件的值，以对象形式返回。

实现

看不明白没关系，大意就是这样，先来看看页面与js调用是怎么写的。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<form id="form1">     <input type="text" name="uid" />     <input type="text" name="pwd" />     <input type="checkbox" name="love" />     <input type="radio" name="g1" value="1" />     <input type="radio" name="g1" value="2" />     <input type="radio" name="g1" value="3" />     <input type="text" name="gselect" value />     <select name="sl">         <option value="11">11</option>         <option value="22">22</option>     </select> </form> <input type="button" id="btn" value="取值" />

表单里的控件均指定了name，作为存值或取值的key。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var data = {     uid: 'cnblogs',     pwd: '12345',     sl: '22',     love: true,     g1: '3',     gselect: function () {         return $("#form1 [name=g1]:checked").val();     } }; $("#btn").on('click', function () {     var d = $("#form1").getModel(data);     alert(JSON.stringify(d)); }); $("#form1").setModel(data);

这样就能完成赋值与取值了。其中具体实现则是根据控件的类型，取出相应的值，如vakue属性，checked属性等。

初步实现是这样的，可以根据实际的应用做修改。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

(function ($) {     function BindModel(p) {         p = $.extend({ method: 'get', data: {} }, p);         var isGet = p.method == "get";         var ret = {};         for (var name in p.data) {               var $name = $(p.container).find("[name='" + name + "']");               //未找到则跳过             if (!$name.length) continue;               //获取当前对象值             var value;             if (typeof p.data[name] == "function") {                 //为函数时,取值就终止                 if (isGet) {                     ret[name] = p.data[name].call();                     continue;                 }                 else {                     value = p.data[name].call();                 }             } else {                 value = p.data[name];             }               //根据控件类型来赋值             var tag = $name[0].tagName;             var t = $name.attr("type");             if (tag == "SELECT" || t == "text") {                 if (isGet) ret[name] = $name.val();                 else $name.val(value || '');             } else if (t == "checkbox") {                 if (isGet) ret[name] = !!$name.attr('checked');                 else $name.attr('checked', !!value);             } else if (t == "radio") { //单选框name相同为一组，根据value来区分啦                 $name.each(function () {                     if (isGet && this.checked) {                         ret[name] = this.value;                         return false;                     }                     else if (!isGet && this.value == value) {                         this.checked = true;                     }                 });             }             else if (tag == 'TD' || tag == 'SPAN') {                 if (isGet) ret[name] = $name.text();                 else $name.text(value)             }         }         if (isGet) return ret;     }     $.fn.setModel = function (data) {         BindModel({ method: 'set', data: data, container: this });     }     $.fn.getModel = function (data) {         return BindModel({ method: 'get', data: data, container: this });     } })(jQuery);

此举的目的旨在维护老项目时，让大家取值赋值更快，解放亲们的双手。