이제 페이지를 실행시키면, 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()를 실행
});
