<!DOCTYPE html>
<
html
lang
=
"
en
"
>
<
head
>
<
meta
charset
=
"
UTF-8
"
>
<
script
src
=
"
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js
"
>
<
/
script
>
<
title
>Document</
title
>
</
head
>
<
body
>
<
form
id
=
"
test-form
"
action
=
"
#0
"
onsubmit
=
"
return false;
"
>
<
p
><
label
>Name: <
input
name
=
"
name
"
></
label
></
p
>
<
p
><
label
>Email: <
input
name
=
"
email
"
></
label
></
p
>
<
p
><
label
>Password: <
input
name
=
"
password
"
type
=
"
password
"
></
label
></
p
>
<
p
>Gender:
<
label
><
input
name
=
"
gender
"
type
=
"
radio
"
value
=
"
m
"
checked
> Male</
label
>
<
label
><
input
name
=
"
gender
"
type
=
"
radio
"
value
=
"
f
"
> Female</
label
>
</
p
>
<
p
>Gender:
<
label
><
input
name
=
"
minzu
"
type
=
"
radio
"
value
=
"
hanzu
"
>hanzu</
label
>
<
label
><
input
name
=
"
minzu
"
type
=
"
radio
"
value
=
"
mengguzu
"
checked
> mengguzu</
label
>
</
p
>
<
p
><
label
>City: <
select
name
=
"
city
"
>
<
option
value
=
"
BJ
"
selected
>Beijing</
option
>
<
option
value
=
"
SH
"
>Shanghai</
option
>
<
option
value
=
"
CD
"
>Chengdu</
option
>
<
option
value
=
"
XM
"
>Xiamen</
option
>
</
select
></
label
></
p
>
<
p
><
button
type
=
"
submit
"
onclick
=
"
submitttt()
"
>Submit</
button
></
p
>
</
form
>
以上的HTML文件 从中选出对应的name和输入值,以name:value的JSON形式输出
一,调用jQuery
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
二,调用表单的输入值
方法一
obj
.name
=
$
(
'
[name="name"]
'
).
val
();
obj
.
email
=
$
(
'
[name="email"]
'
).
val
();
obj
.
password
=
$
(
'
[name="password"]
'
).
val
();
obj
.
gender
=
$
(
'
[name="gender"]:checked
'
).
val
();
obj
.
minzu
=
$
(
'
[name="minzu"]:checked
'
).
val
();
obj
.
city
=
$
(
'
[name="city"]
'
).
val
();
方法二
obj
.name
=
$
(
'
[name="name"]
'
)[
0
].value;
obj
.
email
=
$
(
'
[name="email"]
'
)[
0
].value;
obj
.
password
=
$
(
'
[name="password"]
'
)[
0
].value;
obj
.
gender
=
$
(
'
[name="gender"]:checked
'
)[
0
].value;
obj
.
minzu
=
$
(
'
[name="minzu"]:checked
'
)[
0
].value;
obj
.
city
=
$
(
'
[name="city"]
'
)[
0
].value;
方法三
$
(
'
#test-form :text, #test-form :password, #test-form input:checked, #test-form select
'
).
map
(
function
()
{
obj
[
this
.name]
=
this
.value;
});
方法四
json
=
JSON.
stringify
(
$
(
'
#test-form
'
).
serialize
().
split
(
'
&
'
).
reduce
(
(
x
,
y
)
=>
{
var
item
=
y
.
split
(
'
=
'
);
var
key
=
item
[
0
];
var
value
=
item
[
1
];
x
[
key
]
=
value
;
return
x
;
},{}))
方法五
$
(
'
#test-form input,select
'
).
map
(
function
()
{
if
(
this
.type
===
'
radio
'
&&
this
.checked
===
false
){
return
;
}
obj
[
this
.name]
=
this
.value;
});
总结
1, value是DOM的方法,val()是jQuery的方法
2,方法二 通过“[0]”将jQuery转换成了DOM,也可以使用.get(0)。
而将DOM对象转换成jQuery的方法如下。
var cr=document.getElementById("cr"); //dom对象 var $cr = $(cr)3,方法三中使用this是特殊的情况,通过this,直接调用jQuery中的DOM节点,变相的跳过了转换(不知道这么理解对不对)。
4,input的check类型表单 是根据name字段 来确定归属。
5,方法四牛逼处在于使用了
'
#test-form
'
).
serialize
().
split
(
'
&
'
)
//["name=aaaa","email=bbbbb","password=ccc","gender=f","minzu=hanzu","city=SH"]
注意在使用reduce时,传入的初始值{};
如果不使用reduce可以替换为
var
inputa
=
$
(
'
#test-form
'
).
serialize
().
split
(
'
&
'
);
for
(
let
i
=
0
;
i
<
inputa
.length;
i
++
){
var
item
=
inputa
[
i
].
split
(
'
=
'
);
var
key
=
item
[
0
];
var
value
=
item
[
1
];
obj
[
key
]
=
value
;
}
json
=
JSON.
stringify
(
obj
)
注意使用了obj[key],而不是obj.key。
又或者
$
(
"
:password,:text,input:checked,select
"
).
map
(
function
()
{
return
this
.name
+
'
:
'
+
this
.value;
}).
get
();
不对啊 这个方法对比方法三简直是多此一举!!!
6,方法五中
if
(
this
.type
===
'
radio
'
&&
this
.checked
===
false
){
return
;
}
$
(
'
#test-form input,select
'
)
而不是方法三中的input:checked
对比一下说明serialize()可以直接选取到checked的7,在使用vscode时需要加一个提交表单后再读取的函数
<
p><
button
type="
submit"
onclick="
submitttt()">Submit</
button></
p>
var
submitttt=
function(){
if(this.type === 'radio')
a[this.name] = this.parentNode.innerText.trim()
对于IE也可以是
this.parentElement.innerText.trim()
对于select可以是
obj[this["name"]] = this.selectedOptions[0].innerText
9,思考不能实现的原因
let
p
=
$
(
'
form[id=test-form] input:checked, form[id=test-form] select,form[id=test-form] input
'
);
好吧,原来课件中有答案
“要注意的是,选出来的元素是按照它们在HTML中出现的顺序排列的,而且不会有重复元素”。