앵커태그를 생성하고, 그 앵커태그에 대핸 이벤트를 설정,
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의 동작은
$(찾는객체).메소드()
의 형태로 동작.
'javascript > jQuery' 카테고리의 다른 글
[jQuery] bind(), delegate(), live()를 on()으로 대체하기 (0) | 2013.05.15 |
---|---|
[jQuery] jQuery selector로 radio버튼 값 가져오기. (0) | 2012.09.26 |
[jQuery] jQuery 객체에서 Dom 객체 가져오기 (2) | 2012.05.09 |
[jQuery] 다른 라이브러리와 jQuery 사용하기 (0) | 2012.04.27 |
[jQuery] .ready() 메소드 최적화 (0) | 2012.04.27 |