계밥의 작업소
jQuery 설명 (Codecademy) 본문
코드아카데미에서 jQuery하면서 작성한 것입니다. 어차피 3시간 코스라서 한꺼번에 정리해두고 개인적으로 보려고 작성한 것입니다.
그리고 제 편의를 위해 코드들을 올렸긴했습니다만, 코드는 자기가 직접 생각하고 짜는 것을 추천해드리기 때문에 복붙용으로 사용하시는 것은 비추천합니다. (어디까지나 코드 올린 건, 제가 나중에 다시 보기 위해서니까요)
결론 : 너무 믿지마세요. 참고용으로만 사용하세요 ㄷㄷ
HTML은 Document Object Model (DOM) 형식이다. 즉, 한 페이지 안에 객체의 부모 자식 관계가 형성이 되어있다는 것이다. 이렇게 부모-자식 관계가 형성되어 있기에 Javascript가 HTML의 내용을 수정할 수 있게되는 것이다. (이런 방법을 이용해서 좀 더 역동적인 페이지를 구성할 수 있게 된 것이기도 하다.) 결국 이러한 것을 활용하기 위해선 HTML에서 지정했던 class와 id를 활용하는 것이다.
기본적으로 jQuery는 자바스크립트 기반이며, 이 또한 HTML 문서에서 포함을 시켜줘야한다.
1. "스크립트 포함"
스크립트 포함은 <head></head>에서 하며,
<script type="text/javascript" src="sript.js"></script>
이런 식으로 사용한다.
type은 당연히 javascript를 포함하는 것이니 그렇고, src는 대상 js 파일을 명시한다.
2. "문법"
1) 기본틀
js 파일의 내용은
$(document).ready(function(){ });
이렇게 시작한다. 아무래도 HTML 파일쪽이 모두 준비가 되면 시작해야하니까 이런 틀을 가지는 것이다.
$()는 자바스크립트 동작을 적용시킬 대상을 지정하는 것이다. 보통 괄호 사이에 대상 태그들, 클래스 이름, id 이름을 적을땐 작은따옴표 사이에 넣지만, document는 문서 전역을 대상으로 하는 키워드이므로 따옴표를 넣지 않는다.
ready는 일종의 메서드로 보면 될 것이다. 그리고 그 안의 function에서는 HTML 파일이 다 읽어지면 수행할 동작들을 명시한다.
2) 변수 사용
자바스크립트이기에 변수를 사용할 수 있다. 이 때의 변수는 보통 HTML내의 컴포넌트를 저장해두는 것이며,
var $target = $("li:nth-child(4)");
이런 식으로 $()를 이용해 HTML 내의 컴포넌트를 추출해서 사용한다.
3) CSS class & id 사용
class의 경우 '.(클래스 이름)' , id의 경우 '#(id 이름)' 을 $()에 넣어줘서 사용한다. 마찬가지로 변수에 대입해서 사용할 수 있다.
4) 복수 컴포넌트 사용
여러개의 컴포넌트를 변경하고 싶으면 $('')에서 작은 따옴표 사이에 컴포넌트들을 콤마(,)로 구분해준다.
$('p, li').fadeTo('slow', 0);
이렇게!!
5) this 키워드
$(document).ready(function() { $('div').click(function() { $(this).fadeOut('slow'); }); });
일종의 Scope Rule을 따른다고 보면 됨. 아무래도 해당 중괄호의 영향을 받기 때문에 this라는 키워드가 먹힌다고 보면 된다.
이 예에서 this는 'div'와 같다고 보면 된다.
3. 응용
응용 부분은 본격적으로 jQuery의 API를 사용하면서 실제로 HTML의 내용을 바꿔보는 것을 한다.
1) 삽입
삽입을 하려고 할 때, HTML 컴포넌트가 통째로 객체화 될 수 있다.
var $h1 = $("<h1>Hello</h1>");
가령 이렇게 ㅇㅇ
이렇게 객체화한 컴포넌트를 실제 HTML 페이지에 추가할 수 있다.
$(document).ready(function(){ var $string = $("<p>I'm a paragraph</p>"); var $body = $('body'); $('body').append($string); });
요로콤!! (여기선 body 태그에 문단을 추가하는 것이다.)
ㄴ 유사한 메서드로는 prepend가 있으며, 이는 해당 태그(가령 body) 앞에 붙인다는 의미이다.
ㄴ 또 다른 메서드로는 appendTo, prependTo가 있으며, 이 경우는 주객이 전도됐다고 보면된다.
추가적으로, before, after 메서드가 있다.
(참고 : after 메서드 : http://api.jquery.com/after/ )
2) 컴포넌트 이동
아무래도 Javascrpit가 Java의 성격을 가지고 있기 때문에 이런 것이 가능하지 않을까 한다.
변수를 선언해서 selector를 이용해 해당 컴포넌트의 변수를 선언해놓는다는 것은, 그 컴포넌트에 대한 레퍼런스를 만들어놓는 것이라고 보면된다.
다음 예제를 보면
<!DOCTYPE html> <html> <head> <title>Result</title> <script type='text/javascript' src='script.js'></script> </head> <body> <div class="container"> <h2>Greetings</h2> <div id="one">Div #1</div> <div id="two">Div #2</div> </div> </body> </html>
(index.html)
$(document).ready(function(){ $('#one').after('<p>Hello</p>'); var $two = $('#two'); $two.after($('p')); });
(script.js)
one id에 붙여놨던 p를 two 이후에 붙이니 Hello가 Div#1 밑에서 Div #2로 이동한 효과를 보였다. (복사된 것이 아니라) 이를 통해 레퍼런스의 성격이 보인다는 것을 알 수 있다.
3) 삭제
remove()나 empty() 메서드를 사용한다.
다만, 유의할 점은, 가령 'ol' 태그를 지운다면, 그 안에 소속되어있는 'li' 태그들도 모두 지워지게된다.
4) Class 추가
CSS로 미리 속성들을 정의해놓고, 특정 이벤트가 발생하면 해당 속성을 추가할 수 있다.
$(document).ready(function(){ $('#text').click(function(){ $(this).addClass('highlighted'); }); });
위의 예제는 id가 text인 컴포넌트에 highligted라는 클래스를 추가해주는 것이다.(해당 컴포넌트가 클릭되었을때!)
(주) 이걸 이용해서 메뉴 구성할 수 있을 듯?? (마우스 올렸을때 세부 메뉴 나오게 하는 것!)
또한, 위 예제 코드에서 addClass를 toggleClass로 바꾸면, 클릭할때마다 해당 클래스 속성을 적용/해제할 수 있다.
5) 컴포넌트 스타일 바꾸기
style의 height, width를 바꾸는 것, 혹은 CSS의 속성을 바꿀 수 있다.
.height(크기), .width(크기)를 이용해 해당 속성의 높이, 너비를 조정할 수 있다.
아니면, 해당 컴포넌트의 CSS 속성을 변경할 수 있다.
이때는 .css(변경할 속성 이름, 변경할 값)을 이용한다.
$(document).ready(function(){ $('div').height('200px'); $('div').width('200px'); $('div').css('border-radius', '10px'); });
이렇게 사용!!
6) 이벤트 핸들러 사용
가령, input type="text"에 입력한 항목을 페이지에 추가하고 지우려고 한다.
그럴땐 보통 .remove()를 쓰는데, 먹히지가 않는다.
왜냐하면, HTML 문서가 준비가 됐을 경우, 그 준비됐을 때의 문서를 기준으로 함수가 작성되는데
준비가 됐을 때는 아무 항목도 추가되지 않았으니 먹히지가 않는 것이다.
(원문 : jQuery looks for all the '.item's when the DOM is loaded, so by the time your document is ready, it's already decided there are no '.item's to '.remove()', and your code won't work)
그래서 이 때는 이벤트 핸들러를 이용한다.
$(document).on('이벤트 이름', '대상 selector', 콜백함수)
로 작성을 해준다. 이렇게 하면 대상 selector에서 일어난 이벤트에 대한 콜백함수만을 정의를 해놓는 것이므로, 언제든 적용이 가능하기 때문이다.
<!DOCTYPE html> <html> <head> <title>To Do</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> <script type="text/javascript" src="script.js"></script> </head> <body> <h2>To Do</h2> <form name="checkListForm"> <input type="text" name="checkListItem"/> </form> <div id="button">Add!</div> <br/> <div class="list"></div> </body> </html
(index.html)
$(document).ready(function(){ $('#button').click(function(){ var toAdd = $('input[name=checkListItem]').val(); $('.list').append('<div class="item">' + toAdd + '</div>'); }); $(document).on('click', '.item', function(){ $(this).remove(); }); });
(script.js)
요런식으로 하는 것이다.
'Web > jQuery' 카테고리의 다른 글
| jQuery Event & Animation (Codecademy) (0) | 2016.06.03 |
|---|---|
| jQuery 효과들 (Codecademy) (0) | 2016.06.03 |
| .get() : DOM Elements Method (0) | 2016.06.03 |