오중호랑이의 비밀로그

jQuery 요소를 컨트롤 하기 본문

개발이야기/호랑이와 jQuery

jQuery 요소를 컨트롤 하기

오중호랑이 2013.02.16 13:12

이제 우리는 jQuery로의 보다 정확한 접근을 하기위해 파이어폭스를 설치합니다.
설치방법은 호랑이가 알려줄꺼에요.

http://www.mozilla.or.kr/ko/에 접속하여 파이어폭스 최신버전을 다운로드하세요.
설치가 완료 되면 다음 페이지를 방문해서 파이어폭스의 부가기능인 FireBug를 설치하세요
https://addons.mozilla.org/ko/firefox/addon/firebug/

추가 버튼을 눌러서 설치후 재시작 하면 설치가 완료 됩니다.
그럼 주소표시줄 우측에 파이어버그 아이콘을 눌러서 아래와 같이 나온다면 대성공입니다.
버튼이 안보이면 F12를 눌러보세요.

자 여기까지 준비가 됐나요?
여기서는 파이어버그에 대해서 설명하지 않아요.
그냥 좋은겁니다. 그렇게 아시고 다시 jQuery로 넘어가도록 해보죠.

	$(document).ready(function(){
		alert('ojtiger.com');
	});

우리는 이전시간에 $(document) 셀렉터를 사용해서 문서전체를 셀렉(선택)했습니다.
그 뒤에 .ready() 메소드를 이용해서 문서전체에준비가 됐을때, function(){ 아랫줄에 실행되는 코드를 입력했습니다.

그럼 바로 빠르게 시작해보겠습니다.
<body>와 </body>사이에 한개의 div를 만들어봅시다.

hide Div

문서의 DOM이 생성되면 DIV를 없애보도록 하죠.

<head>와 </head>사이에 다음과 같이 넣어보세요.

	$(document).ready(function(){
		$('div').hide();
	});

이제 페이지를 실행시키면, div가 없어졌나요? 굉장합니다.
.hide() 라는 4글자 밖에 안되는 메소드를 통해서 우리는 문서전체의 div를 없애버릴 수 있었습니다.
제대로 숨겨지지 않는다면 호랑이의 말을 들어보고 다시한번 해보시길 바랍니다.

jQuery를 사용하기 위해선 항상 jQuery파일을 불러와야 됩니다.
다음과 같은 문서구조가 되어야겠지요.

위 코드에서 $('div')는 무엇을 뜻하는걸까요? 우리는 바로 CSS의 셀렉터를 이용한 것입니다.

div{
	/* CSS Code example */
	width:100px;
	height:100px;
}

위에서 사용한 CSS의 div와 같이 $('div')는 문서전체의 div를 뜻합니다.
그렇다면 문서전체의 div가 아닌 특정 div를 .hide() 시키려면 어떻게 해야할까요?
답은 간단합니다 div에 id속성을 주고 jQuery에서 id속성을 찾아서 .hide()시키면 됩니다. 다음과 같이 되겠죠.

	$(document).ready(function(){ // 문서가 준비되면 (DOM이 생성되면)
		$('#hideDiv').hide(); // 앞에 #을 붙였으므로 id속성의 값이 hideDiv인것을 선택(찾아서)해서 .hide()를 실행
	});
hide Div

어때요 간단하죠? 한개가 아닌 복수개의 요소를 선택하려면(찾으려면) 당연히 각 요소의 class에 같은 이름의 값을 주고 jQuery에서 .(점)을 이용하여 선택하면 됩니다. 다음과 같이 되겠죠.

	$(document).ready(function(){ // 문서가 준비되면 (DOM이 생성되면)
		$('.hideDiv').hide(); // 앞에 .을 붙였으므로 class속성의 값이 hideDiv인것을 선택(찾아서)해서 .hide()를 실행
	});

hide Div
hide Div
hide Div

여기까지 완벽하다면 다음장으로 넘어가도록 하고 잘 모르겠으면 아래 예제를 다운받아보세요.
example03.zip

'개발이야기 > 호랑이와 jQuery' 카테고리의 다른 글

jQuery 숨기고 보이는 레이어  (6) 2013.12.11
jQuery 폼 컨트롤 하기  (12) 2013.02.18
jQuery 요소를 컨트롤 하기  (0) 2013.02.16
jQuery ready와 load의 차이  (16) 2013.02.16
jQuery 시작하기  (0) 2013.02.15
0 Comments
댓글쓰기 폼