오중호랑이
오중호랑이의 비밀로그
오중호랑이
전체 방문자
오늘
어제
  • 전체보기 (171)
    • 일상 (120)
    • 개발 (18)
      • 일반 (13)
      • 호랑이와 jQuery (5)
    • 외로움 상자 (33)
      • 호랑이단편집 (2)
      • 힙 to the 합 (4)

최근 글

최근 댓글

hELLO · Designed By 정상우.
오중호랑이

오중호랑이의 비밀로그

jQuery 요소를 컨트롤 하기
개발/호랑이와 jQuery

jQuery 요소를 컨트롤 하기

2013. 2. 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()를 실행
});
<div id="hideDiv">hide Div</div>

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

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

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

example03.zip
다운로드

    '개발/호랑이와 jQuery' 카테고리의 다른 글
    • jQuery 숨기고 보이는 레이어
    • jQuery 폼 컨트롤 하기
    • jQuery ready와 load의 차이
    • jQuery 시작하기
    오중호랑이
    오중호랑이
    ojtiger@ojtiger.com

    티스토리툴바