1. 기본내용
2. bind():여러개의 이벤트를 바인하는 기능::mouseenter+mouseleave
3. unbind()
1. 기본내용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bind():하나 혹은 여러개의 이벤트를 bind하는 기능</title>
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//1. 선택자와 이벤트 함수를 연결합니다.
//2. h2 태그를 클릭하면 어떤일이 발생하는지를 구현합니다.
/* $('h2').bind('click',function(){
//$(this).html('Hello');
//html()은 javascript의 innerHTML과 동일합니다.h2는 form field의 tag가 아니므로 val()은 사용하지 않습니다.
$(this).html(function(index, html){//html은 h2를 의미합니다.
return html+'★'
})
});*/
$('h2').bind('click',function(){
$('h2').html(function(index, html) {
switch(index){
case 0: return html+'★';
case 1: return html+'◆';
case 2: return html+'♥';
}
});
});
});
</script>
</head>
<body>
<h2>오늘은 화요일 입니다. </h2>
<h2>오후 늦게 비가 온다는 예보가 있습니다.</h2>
<h2>퇴근할 때 비가 올 수 있습니다. 우산들 가지고 오셨나요?</h2>
</body>
</html>
2. bind():여러개의 이벤트를 바인하는 기능::mouseenter+mouseleave
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bind():여러개의 이벤트를 바인하는 기능::mouseenter+mouseleave</title>
<style type="text/css">
.reverse{background:blue; color:white;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('h2').bind({
mouseenter:function(){
$(this).addClass('reverse');
},
mouseleave:function(){
$(this).removeClass('reverse');
}
});//bind
});
</script>
</head>
<body>
<h2>오늘은 화요일 입니다. </h2>
<h2>오후 늦게 비가 온다는 예보가 있습니다.</h2>
<h2>퇴근할 때 비가 올 수 있습니다. 우산들 가지고 오셨나요?</h2>
</body>
</html>3. unbind()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>unbind():: 이벤트를 해제시키는 함수</title>
<style type="text/css">
.reverse{background:blue; color:white;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('h2:first').bind('click',function(){
$(this).html('<font color = red>CLICK</font>');
alert("click() Calling....");
$(this).unbind();//클릭했을때 색깔은 계속 red입니다. alert는 클릭해도 더이상 나오지 않습니다.
});
});
</script>
</head>
<body>
<h2>오늘은 화요일 입니다. </h2>
<h2>오후 늦게 비가 온다는 예보가 있습니다.</h2>
<h2>퇴근할 때 비가 올 수 있습니다. 우산들 가지고 오셨나요?</h2>
</body>
</html>'컴퓨터 프로그래밍 > JQuery' 카테고리의 다른 글
| click()- 간단한calulator 구현, unbinding (0) | 2020.05.29 |
|---|---|
| hover() (0) | 2020.05.29 |
| append()-img, setTimeOut(), setInterval() (0) | 2020.05.29 |
| append(), after(), prepend(), before() (0) | 2020.05.29 |
| web storage (0) | 2020.05.29 |