└ Java Script

[jQuery] jQuery 쉬운 예제

짜장이누나 2014. 4. 4. 18:30

jQuery 쉬운 예제 첫번째.



1) 브라우저에 노란색 네모상자를 띄우고




2) 아래에 '결과보기' 출력  ▼▼




3) 결과출력 마우스오버 시 글씨가 회색으로 변함 ▼




4) 클릭 시 노란색 상자가 5초안에 점차 흐리게 사라짐. ▼





 소스코드 ↓↓↓


<!DOCTYPE HTML>

	<head>
		<!-- CSS 작성 -->
		<style>
		#box{width:500px; height:300px; background:yellow}
		a:hover{text-decoration:none; color:grey}
		</style>
		<!-- jQuery 라이브러리 상대경로로 지정 -->
		<script src="./jquery-1.11.0.js"></script>
	</head>
	
	<body>
		<div id = "box"></div>
		<a href = "#">결과보기</a>
		<!-- jQuery -->
		<script>
		<!-- a 태그에 적용 -->
		$("a").click(function() {
			<!-- #box 태그에 적용 -->
			$("#box").fadeOut(5000);
		});
		</script>
	</body>
</html>