var myInfo = {
userid:'123',
fullname:['henry','li'],
intro:{html:5, css:3}
};
console.log($.param(myInfo)); //"userid=123&fullname%5B%5D=henry&fullname%5B%5D=li&intro%5Bhtml%5D=5&intro%5Bcss%5D=3"
//userid=123&fullname[]=henry&fullname[]=li&intro[html]=5&intro[css]=3"
console.log($.param(myInfo),true); //"a=%5Bobject+Object%5D&b=1&b=2&b=3"
//"a=[object+Object]&b=1&b=2&b=3"可以看出第二个参数类似于控制深度。
源码
// Serialize an array of form elements or a set of// key/values into a query stringjQuery.param = function( a, traditional ) { var prefix,// 循环的键命名 for(var k in) 这里即k
s = [],//返回的数据
add = function( key, value ) { //key value对应循环中每项的name和值如:<input name="" value=""、{key:value}
// 如果value是function,那么计算出返回值
value = jQuery.isFunction( value ) ? value() : ( value == null ? "" : value ); //转为key1=value&key2=value2的形式
s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );
}; // Set traditional to true for jQuery <= 1.3.2 behavior.
// 设置第二个参数,如果第二个参数等于undefined,取jQuery.ajaxSettings.traditional
if ( traditional === undefined ) {
traditional = jQuery.ajaxSettings && jQuery.ajaxSettings.traditional;
} // If an array was passed in, assume that it is an array of form elements.
// 第一个参数为数组或者表单的elements
// 为数组或者jquery表单对象,不存在第二个参数的问题(a[]=1;a[]=2)
if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) { // Serialize the form elements
// 循环取name与value
jQuery.each( a, function() {
add( this.name, this.value );
});
} else { // If traditional, encode the "old" way (the way 1.3.2 or older
// did it), otherwise encode params recursively.
// 为对象的时候,需要照顾第二个参数,即深度
for ( prefix in a ) { //调用另外一个方法,传入key,obj[k],深度,add回调方法 buildParams( prefix, a[ prefix ], traditional, add );
}
} // Return the resulting serialization
return s.join( "&" ).replace( r20, "+" );
};var r20 = /%20/g,
rbracket = /\[\]$/,
rCRLF = /\r?\n/g,
rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,
rsubmittable = /^(?:input|select|textarea|keygen)/i;
function buildParams( prefix, obj, traditional, add ) { var name; if ( jQuery.isArray( obj ) ) { // Serialize array item.
// 数组分支
jQuery.each( obj, function( i, v ) { // 如果第二个参数为真,则直接调用自身会生成类似 a=object 这样的数组
// 或者参数为“数组” key[0]或者key[name]
if ( traditional || rbracket.test( prefix ) ) { // Treat each array item as a scalar.
// 处理 add( prefix, v );
} else { // Item is non-scalar (array or object), encode its numeric index.
//反之参数key设置为 key[i] 循环调用自身,这时候循环中的自身会进入下一步
buildParams( prefix + "[" + ( typeof v === "object" ? i : "" ) + "]", v, traditional, add );
}
});
} else if ( !traditional && jQuery.type( obj ) === "object" ) { //如果参数不为真,调用自身,进入第一步
// Serialize object item.
for ( name in obj ) {
buildParams( prefix + "[" + name + "]", obj[ name ], traditional, add );
}
} else { // Serialize scalar item.
// 每项的操作 add( prefix, obj );
}
}var r20 = /%20/g,
rbracket = /\[\]$/,
rCRLF = /\r?\n/g,
rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,
rsubmittable = /^(?:input|select|textarea|keygen)/i;
serializeArray: function() { //jQuery.fn.map
return this.map(function() { // Can add propHook for "elements" to filter or add form elements
// 如果当前对象具有elements的prop,则使用,反之使用自身
// elements是原生js中表单所有的input。 如:document.forms[0].elements
var elements = jQuery.prop( this, "elements" ); return elements ? jQuery.makeArray( elements ) : this;
})
.filter(function() {//jQuery.fn.filter
var type = this.type; // Use .is(":disabled") so that fieldset[disabled] works
// 过滤掉没有name、disabled的、可以提交的几个标签,如过是可选中的元素,则checked为真
return this.name && !jQuery( this ).is( ":disabled" ) &&
rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
( this.checked || !rcheckableType.test( type ) );
})
.map(function( i, elem ) {////jQuery.fn.map
var val = jQuery( this ).val(); //设置value
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();//转为真正的数组
}其中使用的get方法就很简单了
get: function( num ) { return num != null ?
// Return a 'clean' array
( num < 0 ? this[ num + this.length ] : this[ num ] ) :
// Return just the object
slice.call( this );
}//我们也可以使用自己的get方法。如: // Array.prototype.slice.call($('p'),0,1)//取到第一个p dom元素,相当于$('p').get(0)// Array.prototype.slice.call($('p'))//取到所有,相当于$('p').get()
至于jQuery.prop方法,需要新起一篇文章介绍了。简单的说,就是获取元素的prop。 element.checked、element.value,是从attr中分离出来的
serialize: function() { return jQuery.param( this.serializeArray() );
},下载本文