on 메소드를 활용한 이벤트 연결
다음예제는 h1을 클릭시 +를 추가해주는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function (){
//이벤트에 연결합니다.
$('h1').on('click', function(){
$(this).html(function(index, html){
return html + '+';
});
});
});
</script>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>
</html>
실행화면
on메소드를 이용한 이벤트 추가 두 번째 예제
<!DOCTYPE html>
<html>
<head>
<style>
.reverse {
background: black;
color: white;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function (){
//이벤트에 연결합니다.
$('h1').on('click', function(){
$(this).html(function(index, html){
return html + '+';
});
});
$('h1').on({
mouseenter: function() { $(this).addClass('reverse'); },
mouseleave: function() { $(this).removeClass('reverse'); }
});
});
</script>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>
</html>
실행 화면
'프로그래밍 > Jquery' 카테고리의 다른 글
| jquery - keyup메소드를 이용한 글자수세기프로그램 만들기 (0) | 2014.10.11 |
|---|---|
| jquery - delegate 방법을 사용한 이벤트 연결 범위 한정 (0) | 2014.10.11 |
| jquery - 기본 이벤트를 제거하고 이벤트 전달 막는 법 2가지 (0) | 2014.10.11 |
| jquery - context 객체 활용 예제 (0) | 2014.10.11 |
| Jquery - $.extend 메소드 사용법 (0) | 2014.09.12 |
| Jquery - $.each 메소드 사용법 두번째 (0) | 2014.09.12 |
| Jquery - $.each 메소드 사용법 (0) | 2014.09.12 |
| jQuery Mobile - Text inputs(텍스트) (0) | 2013.11.22 |