HTML 문서와 연결하기
CDN 이용하기
HTML 문서에 다음 코드를 추가합니다.
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>3.3.1은 버전입니다. 다른 버전을 사용하고 싶다면 숫자를 변경합니다.
다운로드 받아 연결하기
jQuery 다운로드는 여기에서 합니다. 압축된 파일도 있고, 압축되지 않은 파일도 있습니다. 그리고 HTML 문서에 다음 코드를 추가합니다.
<script src="path/jquery-3.3.1.min.js"></script>path와 파일 이름은 적절히 변경합니다.
jQuery 사용하기
다음은 ID가 jb인 h2 요소의 색을 빨간색으로 바꾸는 예제입니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> </head> <body> <h2 id="jb">Lorem Ipsum Dolor</h2> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( '#jb' ).css( 'color', 'red' ); </script> </body> </html>만약 jQuery 코드를 위로 올리고 싶다면 다음과 같이 합니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( '#jb' ).css( 'color', 'red' ); } ); </script> </head> <body> <h2 id="jb">Lorem Ipsum Dolor</h2> </body> </html>반응형에 따라 요소의 위치를 바꾸려고 한다.
css만으로 해결할 수 있다면 좋겠지만 단순하지 않은 레이아웃에서 css로 해결하기 어려운 경우가 있다.
이 때 자바스크립트, 특히 제이쿼리의 도움으로 요소를 재배치할 수 있다.
HTML
<div class="box_wrapper"> <div class="box box1">1번</div> <div class="box box2">2번</div> <div class="box box3">3번</div> </div>CSS
.box_wrapper { margin-top: 100px; font-size: 40px; } .box { width: 300px; height: 300px; margin: 0 auto; display: flex; justify-content: center; align-items: center; color: #FFF; } .box1 { background: #dc6851; } .box2 { background: #dcae51; } .box3 { background: #dc5180; }1. 요소 이동
1-1. append/appendTo
1번 박스의 위치를 3번 뒤로 이동시키고자 할 때,
제이쿼리의 append/appendTo로 마지막 자식 요소 뒤에 해당 요소를 추가할 수 있다.
append
let $box1 = $('.box1'); $('.box_wrapper').append($box1);appendTo
$('.box1').appendTo('.box_wrapper');1-2. prepend/prependTo
마지막 자식 뒤가 아니라 첫번째 자식 앞에 추가할 수도 있다.
prepend
prependTo
$('.box3').prependTo('.box_wrapper');1-3. after/inserAfter
자식 요소로 추가하는 방식이 싫다면 요소 바로 뒤에 추가할 수 있다.
after
let $box1 = $('.box1'); $('.box3').after($box1);inserAfter
$('.box1').insertAfter('.box3');1-4. before/insertBefore
before/insertBefore로 요소 바로 앞에 추가할 수도 있다.
before
let $box3 = $('.box3'); $('.box1').before($box3);insertBefore
$('.box3').insertBefore('.box1');2. 요소 삭제
요소를 삭제할 때는 remove 혹은 detach를 사용한다
$('.box2').remove(); $('.box2').detach();remove와 detach의 차이는 재사용할 때 알 수 있다.
remove는 해당 요소의 이벤트를 모두 삭제하지만 detach는 이벤트를 모두 보존한다.
따라서 삭제한 요소를 다시 삽입할 경우 remove는 관련 이벤트가 모두 사라진 상태로 삽입되지만 detach는 이벤트가 여전히 존재하는 상태로 삽입된다.
$('.box2').on('click', function(){ alert('클릭'); });3. 요소 추가
요소를 하나를 더 추가할 때는 특별히 다른 메서드를 사용하는 것이 아니라 clone 메서드로 해당 요소를 복사하여 앞서 배웠던 append 등으로 원하는 곳에 추가하면 된다.
let $box1 = $('.box1').clone();$('.box_wrapper').append($box1);4. 반응형 위치 조절
이제 브라우저의 가로 길이가 600px 이상일 때는 1번 -> 2번 -> 3번 순서로 박스가 정렬되고
599px 이하일 때는 3번 -> 1번 -> 2번 순서로 박스가 정렬되도록 해보겠다.
실제로 이 경우에는 css 미디어쿼리와 flex로 순서를 바꾸는 것이 훨씬 편하고 좋다.
어디까지나 예시를 들기 위해 간단하게 html을 만든 것이다.
resonsiveWidth(); function resonsiveWidth() { let ww = $(window).width(); $(window).on('resize', function () { ww = $(window).width(); if (ww < 600) { // 599 이하 mobileBox(); } else { // 600 이상 pcBox(); } }); }function mobileBox() { let $box3 = $('.box3'); $('.box1').before($box3); } function pcBox() { let $box3 = $('.box3'); $('.box2').after($box3); }DOM을 확인해보면 box3의 위치가 변경되는 것이 확인된다.