Question

如何仅使用JavaScript编写此jQuery函数（或者更确切地说，产生相同的结果）？

$(':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是一个jQuery对象，其方法包括.filter()和.map()。 ECMAScript 5中的数组也可以使用这些方法，因此如果您不需要支持IE＆lt; 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来模拟图像输入和命名提交的传统功能，如果您真的需要它，它可能不是......

此版本使用键的平面对象：值对，或键：[value1，value2]数组用于重复。

jQuery $（＆＃39;：input＆＃39;）。serializeArray（）;功能使用Native API

3 个答案: