이번 장에서는 jQuery Event 중에서 hover(), focus(), blur() 에 대해서 알아보겠습니다.
hover()
마우스가 HTML 요소에 오버되었을때 한번 함수가 실행되고, 마우스가 HTML 요소를 떠날때 두 번째 함수가 실행됩니다.
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">이곳에 마우스를 가져오고 또 벗어나보세요!</p>
</body>
</html>
--------------------------------------------------------------------------------------------
focus()
form 의 양식에 포커스를 받았을때 실행되는 함수 입니다.
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
// input 박스에 포커스가 들어올때 백그라운드 색상을 #cccccc으로 바꾸라는 의미
관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
--------------------------------------------------------------------------------------------
blur()
form 의 양식에 포커스를 잃었을때 실행되는 함수 입니다.
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#FFFF99");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
// 처음 input 박스에 마우스로 클릭했을때 #cccccc 색이며, 다른 input 박스를 클릭하며 나왔을때 색상이 #ffff99 색상으로 바뀌는것을 볼 수 있습니다.
다음 장에서는 jQuery Effects(효과)에 대해서 설명드리겠습니다.
