JavaScript 一些基础（分析廖雪峰JavaScript课程关于iQuery的查找题目的同学答案）

最新推荐文章于 2022-08-07 11:50:16 发布

wow306225541

最新推荐文章于 2022-08-07 11:50:16 发布

阅读量699

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/wow306225541/article/details/79654568

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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(){ 

8，最后，由于gender的value 没写全所以针对本案例以上方法都不健全，而且innerText含有空格需要使用trim 廖老师出的这个题目着实是陷阱重重。

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中出现的顺序排列的，而且不会有重复元素”。

wow306225541

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 一些基础（分析廖雪峰JavaScript课程关于iQuery的查找题目的同学答案）

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"&gt; &lt;/script&a
复制链接

扫一扫