티스토리 뷰
1. 폼
- 서버로 데이터를 전송하기 위한 수단
- jQuery는 폼을 제어하는데 필요한 이벤트와 메소드를 제공한다.
- jQuery 폼 API 문서: http://api.jquery.com/category/forms/
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 trigger that e
api.jquery.com
2. 예제
- 예제1.(.focus() .blur() .change() .select())
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 예제1(.focus() .blur() .change() .select())</title>
<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>더보기
<실행결과>
- 예제2. (.submit(), .val())
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>(.submit() .val())</title>
<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('sucess!');">
<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>더보기
<실행결과>
'Web > JavaScript jQuery' 카테고리의 다른 글
| [JavaScript] 유효범위 (0) | 2020.01.14 |
|---|---|
| [JavaScript] 모듈, UI, API (0) | 2020.01.14 |
| [jQuery] 엘리먼트의 제어 (0) | 2020.01.08 |
| [jQuery] event (0) | 2020.01.07 |
| [jQuery] chain (0) | 2020.01.07 |