waitedForU
[06] jQuery 이벤트 본문
[01] jQuery 이벤트
1. 이벤트가 발생한 태그 얻기
- $(function(){........}) : 아래 명령어의 생략형
$(document).ready(function()(......) : 웹 페이지를 모두 읽어드리고, 준비가 되었다면 처리하시오 라는 뜻
- eq 필터: 특정 태그안의 지정한 순서의 태그를 취득하는 셀렉터
- function() 안의 return false사용이유 : a 태그의 click 이벤트가 발생하면 jquery명령이 실행되고 href속성에 연결된 url을 열어버림. 이문제를 해결하기 위해 사용.
>>>>>>> event01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a:eq(0)").click(function(){
$("img").attr("src","flower.jpg").attr("alt","꽃");
return false;
});
$("a:eq(1)").click(function(){
$("img").attr("src","sea.jpg").attr("alt","바다");
return false;
});
$("a:eq(2)").click(function(){
$("img").attr("src","Jellyfish.jpg").attr("alt","해파리");
return false;
});
$("a:eq(3)").click(function(){
$("img").attr("src","building.jpg").attr("alt","건물");
return false;
});
});
</script>
</head>
<body>
<ul>
<li><a href="flower.jpg">꽃</a></li>
<li><a href="sea.jpg">바다</a></li>
<li><a href="Jellyfish.jpg">해파리</a></li>
<li><a href="building.jpg">건물</a></li>
</ul>
<p><img src="flower.jpg" alt="꽃" /></p>
</body>
</html>
2. 클릭할 때마다 다른 처리하는 toggle()
- function(){.....}를 ,(콤마)로 구분하여 여러가지 설정하고 클릭된 순서대로 처리 실행
>>>>>>> event02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").toggle(function(){
$("img").attr("src","sea.jpg").attr("alt","바다");
},function(){
$("img").attr("src","Jellyfish.jpg").attr("alt","해파리");
},function(){
$("img").attr("src","building.jpg").attr("alt","건물");
},function(){
$("img").attr("src","flower.jpg").attr("alt","꽃");
});
});
</script>
</head>
<body>
<button>화면을 변경</button>
<p><img src="flower.jpg" alt="꽃" /></p>
</body>
</html>
3. mouseover()/mouseout()
>>>>>>> event03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("img").mouseover(function(){
$(this).attr("src","sea.jpg").attr("alt","바다");
}).mouseout(function(){
$(this).attr("src","flower.jpg").attr("alt","꽃");
});
});
</script>
</head>
<body>
<img src="flower.jpg" alt="꽃" />
</body>
</html>
4. 이벤트 발생시에 한 번만 처리를 실행하는 one()
- 지정한 태그에서 발생한 이벤트에 대해 한 번만 실행되도록 하는 명령어
$(셀렉터).one("이벤트 발생 조건", function(){
이벤트 발생시에 실행하는 처리 내용
}
>>>>>>>> event04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").one("click",function(){
$("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
return false;
});
});
</script>
</head>
<body>
<ul>
<li><a href="flower.jpg">꽃</a></li>
<li><a href="sea.jpg">바다</a></li>
<li><a href="Jellyfish.jpg">해파리</a></li>
<li><a href="building.jpg">건물</a></li>
</ul>
<p><img src="flower.jpg" alt="꽃" /></p>
</body>
</html>
5. 설정되어 있는 이벤트 처리를 취소하는 unbind()
>>>>>>> event05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
$("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
return false;
})
$("button").click(function(){
$("a").unbind("click");
});
});
</script>
</head>
<body>
<button>취소</button>
<ul>
<li><a href="flower.jpg">꽃</a></li>
<li><a href="sea.jpg">바다</a></li>
<li><a href="Jellyfish.jpg">해파리</a></li>
<li><a href="building.jpg">건물</a></li>
</ul>
<p><img src="flower.jpg" alt="꽃" /></p>
</body>
</html>
6. 앞으로 추가될 태그에 이벤트 처리를 설정할 수 있는 live()
- 실행한 시점에 존재하는 태그와 더불어 앞으로 추가될 태그에도 이벤트 처리를
설정할 수 있는 명령어가 live() 입니다.
>>>>> event06.html(live사용안함)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
$("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
return false;
});
$("button").click(function(){
$("ul").append("<li><a href='building.jpg'>건물</a></li>");
});
});
</script>
</head>
<body>
<button>li 요소를 추가</button>
<ul>
<li><a href="flower.jpg"> 꽃</a></li>
<li><a href="sea.jpg"> 바다</a></li>
<li><a href="Jellyfish.jpg"> 해파리</a></li>
</ul>
<p><img src="flower.jpg" alt=" 꽃" /></p>
</body>
</html>
>>>>> event07.html(live사용)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").live("click",function(){
$("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
return false;
});
$("button").click(function(){
$("ul").append("<li><a href='building.jpg'>건물</a></li>");
});
});
</script>
</head>
<body>
<button>li 요소를 추가</button>
<ul>
<li><a href="flower.jpg"> 꽃</a></li>
<li><a href="sea.jpg"> 바다</a></li>
<li><a href="Jellyfish.jpg"> 해파리</a></li>
</ul>
<p><img src="flower.jpg" alt=" 꽃" /></p>
</body>
</html>
'JQuery' 카테고리의 다른 글
| [05] jQuery 기본 명령어 (0) | 2016.05.20 |
|---|---|
| [04] jQuery 필터 (0) | 2016.05.20 |
| [02] Selector - CSS3 (0) | 2016.05.20 |
| [01] jQuery 설치, Selector - CSS, CSS2 (0) | 2016.05.20 |
Comments