- hover() 이벤트
mouseenter (마우스 커서가 대상 element의 위로 올라간 경우)
이벤트와
mouseleave (마우스 커서가 대상 element 에서 벗어난 경우)
이벤트를 동시에 연결한다.
- toggle() 이벤트
click 이벤트를 여러 이벤트를 핸들러를 번갈아가며 실행 할 수 있게 연결한다.
매개변수로 여러 개의 함수를 입력 할 수 있으며, 입력한 순서대로 함수를 실행한다.
※ 모두 클릭("Click") 이벤트 핸들러와 관련이 있다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style>
.reverse
{
background : Black;
color : White;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$.noConflict();
var J = jQuery;
J(function () {
// 이벤트 연결
// hover 이벤트는 매개변수 2개( 클릭시, 클릭해제시)
J("h1").hover(function () {
J(this).addClass("reverse")
}, function () {
J(this).removeClass("reverse");
});
// 이벤트 연결
J("h1").toggle(function () {
J(this).html(function (index, html) {
return "★" + html;
});
},
function () {
J(this).html(function (index, html) {
return html + "★";
});
},
function () {
J(this).html(function (index, html) {
return html.substring(1, html.length - 1);
});
});
});
</script>
<title>Untitled Page</title>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>
</html>
'공부 > JQuery' 카테고리의 다른 글
| JQuery_[ trigger() 이벤트 강제 실행 ] (0) | 2013.01.21 |
|---|---|
| JQuery_[ one() 이벤트(이벤트를 한번만 연결) ] (1) | 2013.01.21 |
| JQuery_[ 이벤트 연결 기본 bind() ] (0) | 2013.01.21 |
| JQuery_[특정 태그 선택(find)] (0) | 2013.01.07 |
| JQuery_[JQuery filter() 메서드 사용] (0) | 2013.01.07 |