본문 바로가기
jQuery/jQuery Tutorial

jQuery Events hover(), focus(), blur()

by 진격의 파파 2013. 5. 10.
반응형

이번 장에서는 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 > jQuery Tutorial ' 카테고리의 다른 글

jQuery Mobile 아이콘  (0) 2013.11.07
jQuery events mouseenter(), mouseleave(), mousedown(), mouseup()  (0) 2013.05.10
jQuery Events ( click(). dbclick() )  (0) 2013.05.10
jQuery Selectors  (0) 2013.05.08
jQuery 기초  (0) 2013.05.08