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>
' └ Java Script' 카테고리의 다른 글
| [JSON] about JSON(Java Script Object Notation) (0) | 2014.04.07 |
|---|---|
| [jQuery] 2장. jQuery의 구조 (0) | 2014.04.05 |
| [jQuery] 1장. jQuery (0) | 2014.04.04 |
| [jQuery] jQuery에 대해서 (0) | 2014.04.02 |
| [Java Script] 자바 스크립트 객체 프로퍼티 접근 방법 (0) | 2014.04.02 |
