jQuery $（'：input'）。serializeArray（）;函數使用本機API

Question

我怎樣才能寫這個jQuery函數（或者說，產生相同的結果），只使用JavaScript？

$(':input').serializeArray(); 

Function docs。

Answer 1

看jQuery's implementation：

function serializeArray() { 
    return this.map(function() { 
     // Can add propHook for "elements" to filter or add form elements 
     var elements = jQuery.prop(this, "elements"); 
     return elements ? jQuery.makeArray(elements) : this; 
    }).filter(function() { 
     var type = this.type; 
     // Use .is(":disabled") so that fieldset[disabled] works 
     return this.name && !jQuery(this).is(":disabled") && rsubmittable.test(this.nodeName) && !rsubmitterTypes.test(type) && (this.checked || !manipulation_rcheckableType.test(type)); 
    }).map(function (i, elem) { 
     var val = jQuery(this).val(); 

     return val == null ? null : jQuery.isArray(val) ? jQuery.map(val, function (val) { 
      return { 
       name: elem.name, 
       value: val.replace(rCRLF, "\r\n") 
      }; 
     }) : { 
      name: elem.name, 
      value: val.replace(rCRLF, "\r\n") 
     }; 
    }).get(); 
} 

當然，這個假設this是一個像.filter()和.map()方法jQuery對象。這些方法也可用於ECMAScript 5中的數組，因此如果您不需要支持IE < 9，則此代碼可能適用於其中this是HTMLElements數組 - 在刪除或重寫jQuery處理的邊界情況之後。如果您需要支持舊瀏覽器，那麼您可能應該只使用jQuery。

Answer 2

jQuery的:input選擇等同於：

var elements = document.querySelectorAll('input, button, textarea, select'); 

元件將匹配的元素的靜態集合。使用每個不同的標籤名稱可以使用getElementsByTagName構建類似的陣列。

.serializeArray創建ojbects的像的數組：

[{name: value},{name:value},...];  

要連載元件，跟隨在HTML5規格§4.10.22 Form submission的算法。請注意，jQuery不提交提交按鈕（這與W3C規範和瀏覽器行爲相反），您可能希望模擬該提交按鈕（或不按）。

在SajithNair的評論中有一個good link，它不是完美的，但是是一個非常好的開始（說98％的方式）。

基本策略是循環遍歷成員並處理每種不同的類型，從成功的控件創建對象（即那些具有名稱和值並且未被禁用的對象，並檢查無線電和複選框輸入並選擇對於選擇中的選項，記住要處理多個選擇），其唯一成員是具有元素值的元素名稱。

如果有多個控件相同，則會有多個具有相同命名屬性的對象，但可能有不同的值（或不同）。

要做到這一點的代碼並不困難，但要徹底編寫和測試有點冗長乏味。當你陷入困境時，請去尋求幫助。

Answer 3

這裏是一個非常簡單的方法，對於大多數形式的作品：

[].slice.call(document.querySelectorAll('input[name]:not([disabled]), textarea[name]:not([disabled]), select[name]:not([disabled])')).reduce(function(a,b,i){ 
    var val= String({checkbox:1,radio:1}[b.type] ? b.checked : b.value).replace(/\r?\n/g, "\r\n"); 
    a[b.name]= a[b.name] ? a[b.name].concat(val) :val; 
return a; 
}, {}); 

它不處理命名的提交或圖像類型，像一個真正的形式，但這些輸入的適用性真的只有在點擊的時候知，因此對於手動串行器沒有意義。你可以使用幾個onclicks來模擬傳統的圖像輸入功能和命名提交，如果這真的是你需要的，它可能不是......

此版本使用key：value對的平面對象或重複值的key：[value1，value2]數組。