JQuery : 함수 - focus(), blur(), dblclick(), hide(), show(), toggle(), mouseover / mouseout, mouseenter/mouseleave

 

 

 

focus( ) : 해당 태그로 커서가 옮겨갔을 때 호출

= mouseover( )

 

blur( ) : 해당 태그에서 포커스가 벗어났을 때 호출

= mouseout( )

 

dblclick( ) : 더블클릭 시 호출

이름:<input type="text"><br><br>

이메일:<input type="text"><br><br>

<p>여기가 p tag 1입니다</p>

<p>여기가 p tag 2입니다</p>
<br>

<script type="text/javascript">
$(document).ready(function () {
	
	// 해당 태그로 포커스가 맞춰졌을때 호출
	$("input").focus(function () {
		$(this).css("background-color", "#ffff00");		
	});

	// 해당 태그에서 포커스가 벗어났을 때 호출
	$("input").blur(function () {
		$(this).css("background-color", "#fff");
	});
	
	// = focus()
	$("p").mouseover(function () {
		$(this).css("background-color", "#ff0000");
	});
	
	// = blur()
	$("p").mouseout(function () {
		$(this).css("background-color", "#ffffff");
	});
	
	// dblclick() : 더블클릭시 호출
	$("p").dblclick(function() {
		alert( $(this).text() );	
	});	
});
</script>

 

hide() : 태그 감추기

 

 

show() : 태그 보여주기

 

toggle() : 번갈아가며 show / hide

 

 

* mouseenter(): 적용한 개체에 마우스를 올리면 실행,

                       mouseover와 비슷하게 작동하지만, mouseover는 자식객체에도 함수의 적용이 되어

                       안쪽에 위치한 자식객체로 마우스커서를 옮기면 함수 적용이 되지 않는다

                       그러나 mouseenter는 적용한 그 객체의 바운더리 안에 있을 때 실행이 되기 때문에 

                       안쪽에 있는 자식객체로 마우스를 옮기더라도 함수가 계속 실행된다.

 

*  mouseleave() =  mouseout과 같은 함수이나, 자식객체와 관련없이 함수가 적용된 개체를 벗어나야지만 작동한다

 

<div align="center">
	<div class="test" style="background-color: green; width: 50%; height: 100px; text-align: center;">
	보여주기
	</div>
</div>
<br>
<button type="button" id="hideBtn">감추기</button>
<button type="button" id="showBtn">보여주기</button>
<button type="button" id="toggleBtn">스위치</button>

<script type="text/javascript">
$(function() {	

	$("#hideBtn").click(function () {
		$(".test").hide(2000);
	});
    
	$("#showBtn").click(function () {
		$(".test").show(3000);
	});
    
	$("#toggleBtn").click(function () {
		$(".test").toggle(1500);
	});
	/* 
    
	$(".test").mouseenter(function () {
		$(this).css("background-color", "#0000ff");
	});
    
	$(".test").mouseleave(function () {
		$(this).css("background-color", "#00ff00");
	}); */
	

	$(".test").hover(function () {
		$(this).css("background-color", "#ff0000");
	}, function() {
			$(this).css("background-color", "#00ff00");
	});
	
	
});

</script>