폼(Form)
- 서버로 데이터를 전송하기 위한 수단
- 생활코딩 HTML 튜토리얼 폼 편 참고
- Query는 폼을 제어하는데 필요한 이벤트와 메소드를 제공한다.
- jQuery 폼 API 문서 : http://api.jquery.com/category/forms/
예제1. (.focus(), .blur(), .change(), .select())
<!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 () {//function(e)의 e생략 가능
$(this).next("span").html('focus'); //this:<input type="text" />엘리먼트 next: 엘리먼트 다음에 나오는 엘리먼트를 찾음 span:selecter
// .html은 엘리먼트의 컨텐트로 html태그를 insert
}).blur( function() {//컨텍스트를 유지한채로 blur, function(e)의 e생략 가능
$(this).next("span").html('blur');
}).change(function(e){
alert('change!! '+$(e.target).val());//e.target=this 이벤트가 호출될때 event object라는게 생성되는데 e.object.target으로 하면 엘리먼트를 리턴해줌
//엘리먼트 오브젝트를 랩퍼로 감싸서 val이라는 메소드 호출. val 엘리먼트의 벨류값 리턴 = 인풋 벨류값
}).select(function(){
$(this).next('span').html('select');
});
</script>
</body>
</html>
예제2. (.submit(), .val())
<!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() {//form 엘리먼트에 대한 랩퍼를 만듦. submit이라는 메소드:submit이라는 이벤트 타입에 대한 메소드
if ($("input:first").val() == "correct") {//input 첫번째의 랩퍼값을 리턴==correct ?
$("span").text("Validated...").show();//span엘리먼트를 찾고 표시. show:엘리먼트가 감춰져있을때 보여지게 하는 메소드
return true; //true:이벤트 핸들러에서 이벤트가 리턴하는 값이 true면 이벤트가 작동하는 방식대로 됨. false라면 이벤트는 실행되지만 그이후의 이벤트는 작동하지 않음
}
$("span").text("Not valid!").show().fadeOut(1000);//fadeOut:애니메이션 효과
return false;
});
</script>
</body>
</html>
'__ > jQuery' 카테고리의 다른 글
| [생활코딩] 10강. 애니메이션 (0) | 2021.02.19 |
|---|---|
| [생활코딩] 9강. 탐색(traversing) (0) | 2021.02.19 |
| [생활코딩] 7강. 엘리먼트 제어 (0) | 2021.01.24 |
| [생활코딩] 6강. Event (0) | 2021.01.24 |
| [생활코딩] 5강. Chain & Traversing (0) | 2021.01.24 |