본문 바로가기

javascript/jQuery

[jQuery] jQuery Basic, 간단한 jQuery 기본 코딩


앵커태그를 생성하고, 그 앵커태그에 대핸 이벤트를 설정,

CSS클래스 추가와 삭제등을 하는 간단한 jQuery 코딩.

코드를 보며 jQuery의 쓰임에 대한 감을 잡아보자.


1. 전체 소스와 해당 결과


전체소스



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery demo</title>
		
		<!--css style-->
		<style> 
			a.test {
				font-weight: bold;
			}
		</style>
	</head>
	<body>		
		
		<a href="http://jquery.com/">jQuery</a>		
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<!--jquery 로드-->
		
		<script>
			$(document).ready(function() {
				//onLoad 이벤트
				
				$("a").click(function(event) {
					
					$("a").addClass('test');
					
					alert("더이상 jQuery 홈페이지로 연결하지 않습니다.");
					
					$("a").removeClass('test');
					
					event.preventDefault();
					
					$(this).hide("slow");
				});
			});

		</script>
	</body>
</html>



결과




첫 모습



클릭 했을 때 test 클래스가 적용되며 글자가 굵어짐이 확인




2. 코드 설명


8~12 줄

css 클래스.

클래스 명 : test


16 줄

jQuery 사이트로 링크된 앵커태그


18 줄

jQuery 프레임웍 로드


21 ~ 39 줄

jQuery 코드

$(달러 사인) 뒤에오는 괄호 안에 연결할 객체가 들어간다.

$(document) 는 document객체를 연결한 것.


22 줄 .ready( handler )

window.onLoad 이벤트를 대체하는 jQuery 이벤트

handler엔 함수가 들어간다.

$(document).ready( handler ) 형 태로 사용

즉 onLoad 이벤트시 handler의 함수가 실행됨.


25 줄 .click( handler )

onClick 이벤트

$("a").click( handler )

즉 a 태그의 onClick 이벤트 발생시 handler(함수) 를 실행한다.


27줄 .addClass('test');

css 클래스를 추가하는 jQuery 메소드.

8~12 줄에서 정의한 css 클래스 test가 a태그에 적용된다.


29줄 - alert 창이 띄워짐


31줄 $("a").removeClass('test');

css 클래스를 제거하는 jQuery 메소드

앞서 적용된 test 클래스가 사라진다.


33줄 event.preventDefault();

해당 이벤트에서 이 메소드가 호출이 되면

해당 이벤트의 기본 이벤트가 사라진다.


이 예제에서는 a태그의 클릭시 기본 이벤트(다른 사이트로 이동)가 사라져 아무런 동작도 하지 않는다.


35줄 $(this).hide("slow");

jQuery 애니메이션 이벤트.

해당 객체를 사라지게 많든다.

위의 메소드는 

$('a').hide('slow');

와 동일하다.





기본적인 jQuery의 동작은

$(찾는객체).메소드()


의 형태로 동작.



참조 사이트 : http://docs.jquery.com/Tutorials:How_jQuery_Works