이전글보기

 - [문돌이의 IT/jQuery] - jQuery event 제이쿼리 이벤트 (1)


hover( ) : mouseenter, mouseleave 가 결합된 메소드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#p1").hover(function(){
        alert("mouseenter event");  
    },
    function() {
        alert("mouseleave event");
    });
});
</script>
</head>
<body>
 
<p id="p1">This is a paragraph.</p>
 
</body>
</html>
cs


focus( ) : form 폼에 포커스를 줄 때 사용한다(입력창 강조 효과)

blur( )   : form 폼 필드의 포커스를 잃었을 때 실행 된다.

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
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#fullname").focus(function(){
        $(this).css("background-color", "#cccccc");
    });    
    $("#id").focus(function(){
        $(this).css("background-color", "#cccccc");
    });
    $("#id").blur(function(){
        $(this).css("background-color", "#ffffff");
    });
    
});
</script>
</head>
<body>
 
Name: <input type="text" id="fullname"><br>
ID    : <input type="text" id="id"><br>
Password : <input type="text" id="pwd">
 
</body>
</html>
 
cs

결과 : Name은 focus만, id는 focus, blur 모두 적용


on( ) : 하나 또는 그 이상의 이벤트를 실행할 때 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").on("click", function(){
        $(this).hide();
    });
});
</script>
</head>
<body>
 
<p>If you click on me, I will disappear.</p>
<p>disappear2</p>
<p>disappear3</p>
 
</body>
</html>
 
cs


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
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").on({
        mouseenter : function(){
            $(this).css("background-color", "lightgray");
        },
        mouseleave : function(){
            $(this).css("background-color", "lightblue");
        },
        click : function(){
            $(this).css("background-color", "yellow");
        }
    });
});
</script>
</head>
<body>
 
<p>Click or move the mouse pointer over this paragraph.</p>
 
</body>
</html>
cs

결과 : 마우스 대면 회색, 떼면 파란색, 클릭하면 노란색

저작자표시 비영리 변경금지

'문돌이의 IT > jQuery' 카테고리의 다른 글

jQuery Effects 제이쿼리 효과 - fade  (0) 2017.08.09
jQuery Effects 제이쿼리 효과 - hide and show  (0) 2017.08.08
jQuery event 제이쿼리 이벤트 (1)  (0) 2017.08.06
다양한 jQuery 셀렉터들 (Selector)  (0) 2017.07.27
jQuery 셀렉터 (Selector)  (3) 2017.07.26

+ Recent posts

티스토리툴바