반응형
잠시 쉬었던 코딩 공부를 다시 하려고 한다. 이번 편에서는 jQuery form에 대해서 알아보자.
폼(forms)
서버로 데이터를 전송하기 위한 수단이며 jQuery는 forms을 제어하는데 필요한 event와 method를 제공한다.
Forms | jQuery API Documentation
Bind an event handler to the “blur” JavaScript event, or trigger that event on an element. Bind an event handler to the “change” JavaScript event, or trigger that event on an element. Bind an event handler to the “focus” JavaScript event, or tr
api.jquery.com
1. focus(), blur(), change(), select() event
<!DOCTYPE html>
<html>
<head>
<style>
span {
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
<input type="text" />
<span></span>
</p>
<script>
$("input").focus( function () {
$(this).next("span").html('focus');
}).blur( function() {
$(this).next("span").html('blur');
}).change(function(e){
alert('change!! '+$(e.target).val());
}).select(function(){
$(this).next('span').html('select');
});
</script>
</body>
</html>- .html 메소드는 어떤 element의 content 영역으로 html태그를 insert 시키는 것
- foucs 라는 값을 주니까 <span>과 </span> 사이에 focus 가 생김
- chain으로 계속 가며, eventhandler blur이벤트가 발생했을 때 span element에 content로 blur를 삽입한 것
- 그래서 클릭하면 focus 빠지면 blur가 되는 것이다
- change도 eventhandler이다
- eventhandler가 호출될 때 event object라는 게 전달되는데 그것이 e이다. 생략 가능하다.
- 그 event object를 target으로 하게되면 그 event를 발생시킨 이 element를 return 해준다.
- 이걸를 element object를 wrapper로 감싸서 val이라고 하는 method를 호출해 준 것
- val은 element의 value 값을 return 한다.
- 경고창 alert가 뜨며 change!라는 문구 + input element value 값
- select event는 텍스트 필드 안의 데이터가 드래그로 선택됐을 때 발생하는 event이다.
- jQuery는 wrapper라는 걸 통해서 chain context를 유지할 수 있다.
- 그래서 .을 통해 연속적으로 event를 달아줄 수 있다.
2. submit(), val() event
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin:0;
color:blue;
}
div, p {
margin-left:10px;
}
span {
color:red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
Type 'correct' to validate.
</p>
<form action="javascript:alert('success!');">
<div>
<input type="text" />
<input type="submit" />
</div>
</form>
<span></span>
<script>
$("form").submit( function() {
if ($("input:first").val() == "correct") {
$("span").text("Validated...").show();
return true;
}
$("span").text("Not valid!").show().fadeOut(1000);
return false;
});
</script>
</body>
</html>- element value 값을 알아내는 .val()
- input의 type이 submit이면 버튼으로 만들어진다
- 버튼을 누르면 form에서 정의된 action으로 데이터를 전송해 주는 것이 submit button 이다
- wrapper를 보면 ( )로 form을 전달했다
- submit이라는 method를 호출하고 있는데, 이것은 submit 이라고 하는 event type에 대한 helper이다
- submit은 버튼을 클릭했을 때 그 data가 form의 action으로 지정되어 있는 곳으로 전송이 된다.
- 그 순간에 submit 이라는 event가 발생하며, 그 뒤의 evnethandler를 통해서 event를 programming하게 된다.
- if문을 보면 :가 있다. : 는 filter 이다. 첫번 째 인자인 text를 가져오게 된다
- .show는 어떤 element가 감춰져 있을 때 화면에 표시되게 하는 것이다.
- .fadeOut은 애니메이션 효과이다. 글이 희미해지면서 없어진다.
Q&A
Q. script부분을 body말고 head에 넣으면 왜 실행이 안되는걸까요?
A. 브라우저가 html 문서를 해석할 때엔 문서의 위에서부터 아래로 읽어 내려갑니다. 그래서 head에 나온 자바스크립트 부분을 읽을 때에는 아직 body에 있는 엘리먼트들을 읽기 전이기 때문에 마치 존재하지 않는 엘리먼트들에 대해 어떤 명령을 하는 것처럼 되어서 실행이 안 된다고 알고 있어요.
이전글 보고오기
반응형
'[자기계발] > 유튜브로 코딩배우기' 카테고리의 다른 글
| [생활코딩] jQuery 동적인 애니메이션 효과 알아보기 (0) | 2021.07.07 |
|---|---|
| [생활코딩] jQuery 탐색(traversing)이란? (0) | 2021.07.04 |
| [생활코딩] jQuery를 이용해서 HTML element 제어하는 방법 (0) | 2021.06.13 |
| [생활코딩] jQuery event 정리 (0) | 2021.06.12 |
| [생활코딩] jQuery chain 이란? (0) | 2021.06.09 |
