삽질의 현장/- Javascript와 HTML

[삽잡이::Javascript] Form으로 한큐에 요소 찾자

shovelman 2016. 6. 1. 08:16



자 여러분...  저는 요즘 jQuery를 공부하고 있습니다.


그럼 어디 한번 기분좋게 

Element 를 찾아 다이나믹하게 웹 화면에 힘 좀 줘볼까요!?





 

...




이렇게 막일 하시렵니까....?

(* 노가다는 일본말인거 아시죠? 한글을 사랑합시다!



그럴 필요가 없습니다... 

물론 경우에 따라 요소 하나하나를 찾아서 가공해야할 때도 있지만,

한번에 가져올 필요가 있을 때에는

바로, Form Filter를 사용하면 됩니다.


form은 말이죠 '서식', '방식', '종류' 및 '유형'이라는 뜻을 가지고 있습니다.


HTML에도 Form 요소가 있는데요,

text, checkbox, radio등의 형식들이 해당됩니다.


더 자세한 내용은 역시 공식 홈페이지를 보면 되겠지요!?

(참고_ http://www.w3schools.com/html/html_forms.asp)



그런데, 위와 같은 form들의 집합을 

문자열로 만들수 있다는 사실을 아시나요?!




이와 같이 <form> Tag에 쌓여있는 요소들에 대한 집합을 문자열로 인코딩하면 되는 것이죠!



jQuery에서는 'serialize()' 메서드를 제공해주고 있습니다.


저는 form의 id값을 사용하여 <form> 내부의 요소들에 대해 긁어 모아봤습니다.


내용물을 직접 확인해보면...


 


우와... 이런식으로 각 요소별로 들어있는 값과 함께 문자열로 인코딩 되는군요!



serializeArray()라는 메서드도 있습니다.



자... 이 녀석은 메서드명 그대로 

array 형식으로 인코딩 해주는 것 같지요?


 


확인해봅시다~!



잉... 왠 object?!

하지만, 당황하시면 안됩니다...


사실 .serializeArray() 메서드의 경우에는 반환 값으로 

jQuery 배열 개체를 반환하게 됩니다.

개체... object 형인것이지요.


아하... 그렇군요....


아무튼... <form> Tag를 사용하여 

Tag내 요소들을 손쉽게 가져올 수도 있는 방법을 알게 되었습니다!


굳~