이번에는 jquery를 이용한 이벤트처리 총정리 !!
Jquery에는 많은 이벤트가 있는데, 우선 이벤트를 사용하는 방법부터 설명할게요.
jquery기본문법 $(document).ready(function(){ 여기안에 새로운 함수를 작성합니다.
$(선택자 또는 태그명) . 이벤트 (함수기능)을 작성하면 됩니다.
기본적으로 이벤트는 on이라고 붙여야합니다. on이 가장 기본이 된다고 생각하시면 됩니다.
첫번쨰)
$(이미지).append(태그) : (앞).append(뒤) == 앞 뒤로 표시
$(이미지).prepend(태그): (뒤).prepend(앞) == 뒤 앞로 표시
$(선택자).after(태그): (뒤).after(앞) == 뒤 앞로 표시
2. 선택자를 이용해서 css 적용하기 <= 여기를 눌르시오
그리고 또 하나 중요한 점은
※ href=" ", src=" ", 추후에 배우실 form action=" "의 경로 지정을
선택경로: 작성하는 페이지와 공통된 부분은 생략하고 남은 부분의 경로만 작성한다.
절대경로: Ip:port:경로를 자세하게 작성해주는 것이다.
( /를 사용하시면, ip:port는 생략한다)
(../를 사용하시면 폴더 및 패키지 유입경로를 따져서 복잡하게 된다)
아무튼 경로선택을 잘 작성하는 것도 하나의 팁입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<head>
<script src='jquery-3.2.1.min.js'></script>
<script>
$(document).ready( function(){
//img 태그 생성 - 추가
var newimg= "<img src='../image/google.png'>";
//$('body').append (newimg); //(앞).append(뒤) == 앞 뒤
//$('body').prepend (newimg); //(앞).prepend(뒤) == 뒤 앞
//$('img').after (newimg); //(앞).after(뒤) == 앞 뒤
$('img').before (newimg); //(앞).after(뒤) == 뒤 앞
//$('img:first').before(newimg); //img태그가 여러개 있을 수 있으니까 첫 번째 img태그
//$('img:second').before(newimg); //img태그가 여러개 있을 수 있으니까 두 번쨰 img태그
$('img').css('width','200px');
$('img').css('width','150px');
});
</script>
</head>
<body>
<img src='../image/1.jpg'>
</body>
|
두번쨰)
$('버튼값').on("click",function(){ $('선택자').show(fast,function(){}); }); //그림이 빠르게 나타난다
$('버튼값').on("click",function(){ $('선택자').hide(slow,function(){}); }); //그림이 느리게 사라진다
$('버튼값').on("click",function(){ $('선택자').animate(3000,function(){}); });
//요소를 움직이게 한다. (x,y)부터 y만이라던가
$('버튼값').on("click",function(){ $('선택자').stop(function(){}); });
//기존 애니메이션들은 중단하고, 현재 애니메이션만 동작
$('버튼값').on("click",function(){ $('선택자').fadeIn(slow,function(){}); });//흩뿌리듯 서서히 나타나도록
$('버튼값').on("click",function(){ $('선택자').fadeOut(fast,function(){}); }); //흩뿌리듯 빠르게 나타나기
$('버튼값').on("click",function(){ $('선택자').slideDown(5000,function(){}); }); //슬라이드창 내려감
$('버튼값').on("click",function(){ $('선택자').slideUp(7000,function(){}); }); //슬라이드창 올라가기
|
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
|
<body>
<input type='button' value='show it' id='btn1'>
<input type='button' value='hide it' id='btn2'>
<input type='button' value='animate' id='btn3'>
<input type='button' value='stop' id='btn4'>
<img id='dog' src='../image/1.jpg' alt="이미지 안보임" width=120 height=100 style="display:none">
<!-- alt= 공백이 있는 값일 경우 ''를 붙여준다 -->
<script> //button을 누르면 show it을 보여주기로 하자.
$(document).ready(function(){
$('#btn1').on('click',function(){
$('#dog').show('3000',function(){
//show('fast'
//show('slow'
alert('이미지생성완료');
})
});
$('#btn2').on('click',function(){
$('#dog').hide(3000,function(){ alert('이미지 없어짐'); })
});
$('#btn3').on('click',function(){ //위에서 display:none은 알아서 show처리된다
$('img').animate({left:'100px', width:'300px',top:'200px'},function(){ alert('이미지 늘어남'); })
});
$('#btn4').on('click',function(){ //위에서 display:none은 알아서 show처리된다
$('img').stop(function(){ alert('이미지 없어짐'); })
});
});
//toggle을 사용할 경우, show와 hide를 번갈아가면서 사용한다
//그 외에 fadeIn, fadeOut, slideDown, slideUp
</script>
</body>
</html>
|
세번째)
$('이미지').on("mouseover",function(){}); //이미지위에 마우스에 있을 때,
$('이미지').on("mouseout",function(){}); //이미지위에 마우스가 없을 때,
$('텍스트선택자').on("focus",function(){}); //text창에 커서가 놓여있을 때,
$('텍스트선택자').on("blur",function(){}); //text창에 커서가 없어질 때,
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 이벤트 객체를 통한 처리</title>
<script src='jquery-3.2.1.min.js'></script>
<script>
$(document).ready(function(){
// img태그 마우스 올린 상태
$('img').on('mouseover', function(e){ //이벤트객체 e
//'x좌표는'+e.pageX +'y좌표는' +e.pageY;
'inform'+e.type +':' +e.which; //좌표의 기준점은 왼쪽상단부터!!
//which는 누구한테 발생햇니를 알수있다.
//이벤트의 타입형을 알 수 있다.
//꾸미기
$('#result').html('#pointer');
$('#result').css('color','red');
$('#result').css('border','solid 2px red');
});
$('img').on('mouseout', function(e){
$('#result').html('이미지외부');
$('#result').css('color','red');
$('#result').css('border','solid 2px red');
});
});
//JAVA SCRIPT에서 $('INPUT') ON ('focus',FUNCTION()){~~}
//JAVA SCRIPT에서 $('INPUT') ON ('blur',FUNCTION()){~~}
//마우스 갓다대면, 아니면~~
</script>
</head>
<body>
<!-- onmouseover onmouseout -->
<div id='result'> <img src='../image/google.png' width=100 height=80> </div>
</body>
</html>
|
'WEB 기초 > Jquery' 카테고리의 다른 글
| 6. 이미지나열 이벤트 & 타이머 (심화문제) (0) | 2018.04.21 |
|---|---|
| 5. 버튼클릭 이벤트 (심화문제) (0) | 2018.04.19 |
| 3. Css 제어_응용하기 (0) | 2018.04.16 |
| 2. 선택자를 이용해서 css 적용하기 (0) | 2018.04.16 |
| 1. Jquery 시작 (0) | 2018.04.16 |