메뉴 건너뛰기

검색창 닫기

HEUKMYO

program1

140813_[jquery] 마우스 이벤트

2014.09.23 22:53 read.150

.hover();

jq_hover1.gif 


<!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" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			*{margin:0;padding:0}
			div{margin-bottom:10px;width:100px;height:100px;background:red}
		</style>
		<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				$('div').hover(function(){
					$('div').css("background-color","green");
				},function(){
					$('div').css("background-color","red");
				});
			});
		//]]>
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

.mouseenter();

.mouseleave();

<!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" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			*{margin:0;padding:0}
			div{margin-bottom:10px;width:100px;height:100px;background:red}
		</style>
		<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				$('div').mouseenter(function(){
					$('div').css("background-color","green");
				});
				$('div').mouseleave(function(){
					$('div').css("background-color","red");
				});
			});
		//]]>
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

mouseup(); 눌렀다 땠을때


focus();

jq_focuse_1.gif 


<!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" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			*{margin:10px;padding:10px}
			div{margin-bottom:10px;width:180px;height:30px;}
		</style>
		<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				$('input').focus(function(){
					$('div').text("포커스 되었다.");
				});
				$("input").blur(function(){ //포커스가 다른곳으로 옮겨갔을때 실행
					$('div').text("포커스 아웃되었다.");
				});
			});
		//]]>
		</script>
	</head>
	<body>
		<div></div>
		<input type="text" />
	</body>
</html>



.bind();

$('div').bind("click dblclick",function(){ //bind는 여러가지 이벤트를 묶을 수 있다.

    $(this).text("test");

});






추가메뉴 목록
위로