반응형
폼 (form) 관련 jQuery 기능
Input 칸 관련 기능
1. focus() : input에 커서가 올라와있을때 이벤트
2. blur(): input커서가 올라온뒤 사라질때 일어나는 이벤트
3. change() : input 값이 바뀌어지면 일어나는 이벤트
4. select() : input 값을 드래그하면 일어나는 이벤트
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!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>
|
cs |
Submit 관련 기능
1. submit() : submit버튼을 눌럿을때 일어나는 이벤트 설치
2. val() : 해당 요소의 값을 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!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>
|
cs |
해당 예제에서 사용된 필터셀렉터
:fitst
첫번째로 일치하는 요소를 가져온다.
:last
마지막으로 일치하는 요소를 가져온다.
:even
짝수번째 요소를 모두 가져온다 ( first index : 0 )
:odd
홀수번째 요소를 모두 가져온다 ( first index : 0 )
:eq(index)
인자로 전달된 index에 해당하는 요소를 가져온다. ( first index : 0 )
:gt(index)
인자로 전달된 index 보다 큰 index를 가진 요소를 모두 가져온다.
:lt(index)
인자로 전달된 index 보다 작은 index를 가진 요소를 모두 가져온다.
:has(selector)
인자로 전달된 selector 요소를 하나 이상 포함하고 있는 요소를 가져온다.
:not(selector)
인자로 전달된 selector 와 일치하지 않는 모든요소를 가져온다.
반응형
'자바스크립트' 카테고리의 다른 글
| jQuery 사용하기(5) [애니메이션] (0) | 2022.12.20 |
|---|---|
| jQuery 사용하기 (4) [탐색] (0) | 2022.12.15 |
| jQuery 사용하기 (2) [엘리먼트 제어] (0) | 2022.12.05 |
| jQuery 사용하기 (1) [이벤트] (0) | 2022.12.04 |
| jQuery 개요 (0) | 2022.11.30 |