JQuery筆記

記兩段代碼，使用JQuery實現從表單獲取json與后端交互，以及把后端返回的json映射到表單相應的字段上。

把表單轉換出json對象

//把表單轉換出json對象  $.fn.toJson = function () {    var self = this,      json = {},      push_counters = {},      patterns = {        "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:/[(?:/d*|[a-zA-Z0-9_]+)/])*$/,        "key": /[a-zA-Z0-9_]+|(?=/[/])/g,        "push": /^$/,        "fixed": /^/d+$/,        "named": /^[a-zA-Z0-9_]+$/      };    this.build = function (base, key, value) {      base[key] = value;      return base;    };    this.push_counter = function (key) {      if (push_counters[key] === undefined) {        push_counters[key] = 0;      }      return push_counters[key]++;    };    $.each($(this).serializeArray(), function () {      // skip invalid keys      if (!patterns.validate.test(this.name)) {        return;      }      var k,        keys = this.name.match(patterns.key),        merge = this.value,        reverse_key = this.name;      while ((k = keys.pop()) !== undefined) {        // adjust reverse_key        reverse_key = reverse_key.replace(new RegExp("http://[" + k + "http://]$"), '');        // push        if (k.match(patterns.push)) {          merge = self.build([], self.push_counter(reverse_key), merge);        }        // fixed        else if (k.match(patterns.fixed)) {          merge = self.build([], k, merge);        }        // named        else if (k.match(patterns.named)) {          merge = self.build({}, k, merge);        }      }      json = $.extend(true, json, merge);    });    return json;  };

將josn對象賦值給form，使表單控件也顯示相應的狀態

//將josn對象賦值給form  $.fn.loadData = function (obj) {    var key, value, tagName, type, arr;    this.reset();    for (var x in obj) {      if (obj.hasOwnProperty(x)) {        key = x;        value = obj[x];        this.find("[name='" + key + "'],[name='" + key + "[]']").each(function () {          tagName = $(this)[0].tagName.toUpperCase();          type = $(this).attr('type');          if (tagName == 'INPUT') {            if (type == 'radio') {              if ($(this).val() == value) {                  $(this).attr('checked', true);              }            } 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);          }        });      }    }  }

補充：下面看下jQuery兩種擴展方法

在jQuery中，有兩種擴展方法

1.類方法（$.extend()）

<script>    $.extend({    print1:function(name){      //print1是自己定義的函數名字，括號中的name是參數      console.log(name)    }  });   $.print1("坤") ;              //調用時直接$.函數名(參數);</script>