8일차에는 서서히 쓰이지 않고 있는 jQuery에 대해서 살펴보았다.
jQuery는 Javscript 문법을 더 짧지만 기능을 더 담아서 실행할 목적으로 만들어졌다.
확실히 문법이 많이 짧아지고 기능은 많아졌다고 볼 수 있지만, React, vue 등의 등장과 함께 jQuery의 문법이 기존 Javascript의 표준 문법으로 릴리즈 되는 등의 이유로 점점 사용되지 않고 있다고 한다.
jQuery의 기본 문법과 중요한 부분에 대해서 알아볼 예정이다.
1. CDN (Content Delivery Network)
CDN이라는 기술을 이용해 jQuery를 주로 이용할 수 있는데, 처음에 jQuery를 이용할 때는 '아, 그런가보다'하고 넘어가곤 했다.
하지만 이 CDN이 '콘텐츠 배송 네트워크'라는 뜻을 가지고 있는데, 도대체 무슨 뜻인지, 왜 사용하는 것인지 궁금해서 IBM과 AWS에 서술되어 있는 글을 쭉 읽고 나서 나름대로 간단하게 정리해봤다.
간단하게 정리하자면 원래 서버(Origin Server) 말고도 여러 대의 서버를 두는 것이다.
단순히 서버의 수를 늘리는 것이 아니라 세계적으로 분산되도록 서버를 설치하는 것이다.
그림으로 보면 다음과 같다.
[CDN 적용 이미지 (출처: 갓대희의 작은공간(https://goddaehee.tistory.com/173)](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F99EA983C5C5304ED21)
그림에서 캐쉬서버(Cash Server)라고 지칭되어 있는 서버가 분산되도록 만든 서버라고 생각하면 된다.
이렇게 CDN을 적용하는 이유로 서버와 클라이언트간 네트워크 시간이 길어질 수 있는 점이다.
서버와 클라이언트간에 물리적으로 통신 시간이 길어지면 그 만큼 응답하는 데에도 시간이 길어지기 때문에 사용자가 응답이 끝날 때 까지 계속 기다려야하는 단점이 있다.
그 외에 트래픽 분산 등의 이유도 있었으나 jQuery를 사용하기 위해 CDN을 적용하는 이유는 위의 이유가 가장 크다고 생각했고, 다른 여러 이유에 대해서는 현재 글에서는 다루지 않으려고 한다.
<!-- jQuery CDN -->
<script
src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous"
></script>
오픈 소스를 다운로드 받지 않고 위의 소스 처럼 링크를 통해서,
인터넷만 연결되어 있다면 빠르게 사용할 수 있다는 장점이 있다고 생각했다.
2. jQuery 기본 문법
jQuery의 기본은 $를 사용하며, $()라는 문법으로 사용이 가능하다.
// id="div1"이라는 요소에 접근하기
// Javascript
document.querySelector('#div1');
// jQuery
$('#div1');위 코드처럼 순수 Javascript로는 document.xxx를 통해서 요소로 접근해야 했지만, jQuery로는 $()를 사용하면 바로 접근할 수 있다. 코드도 매우 간결해진 것을 확인할 수 있다.
1) jQuery로 요소와 관련된 값 조작하기
// jQuery로 요소 선택
const div1 = $('#div1');
div1.text('안녕히 계세요~'); // 요소 안에 있는 내용을 변경
div1.css('border', '2px dotted #00f'); // css(스타일) 변경
div1.setAttribute('name', 'goodBye'); // name이라는 속성과 속성값 추가위 코드를 보면 jQuery로 요소를 선택한 다음, 각각 text(), css(), setAttribute()를 통해서 요소안의 내용을 변경하고, css를 변경하고, name이라는 속성을 추가해 goodBye라는 속성값을 추가한 것을 볼 수 있다.
2) jQuery로 값 설정하고 가져오기
// [val()]
// 값 가져오기
function getValue() {
// js
const inputVal = document.querySelector('input').value;
alert(inputVal);
// jQuery
const value = $('input').val();
alert(value);
}
// 값 설정하기
function setValue() {
// js
document.querySelector('input').value = 'Hello World!';
// jQuery
$('input').val('Hello World!');
}위의 코드에서는 Javascript와 jQuery를 비교하여 작성한 코드이다.
생각보다 매우 간단한데, jQuery로 $().val()을 사용하면 된다.
값을 가져올 때는 $().val()로 가지고 오고, $().val(넣어줄 값)으로는 값을 설정할 수 있다.
3) jQuery로 CSS 설정하기
// [css()]
// js
function changeCssJS() {
const span = document.querySelector('span');
span.style = 'font-size: 20px; color: red;';
}
// jQuery
function changeCssJquery() {
// $('span').css('font-size', '40px');
// $('span').css('color', 'blue');
$('span').css({
'font-size': '40px',
'color': 'blue',
});
}
// jQuery get CSS
function getCssJquery() {
// js
// console.log(document.querySelector('span').style.color);
// jQuery
console.log($('span').css('color'));
}기존 방법과 유사하지만 조금 다른 방법인데, 여러 css를 적용하는 방법에 대해서 적용한 코드이다.
css()를 사용해서 적용하는 건 위에서 말한 것과 같은데, 여러 css를 적용할 때는 {key: value}인 객체로 만들어서 넣어주면 된다.
또한 css를 가지고 오고 싶을 때는 css()를 이용하되, 속성명만 넣어주면 가지고 올 수 있다.
4) jQuery로 속성(Attribute) 다루기
// [attr()]
// js
function changeAttrJS() {
// a 태그를 선택하고, href 속성값을 naver 주소로 변경
const a = document.querySelector('a');
// a.href = 'https://www.naver.com';
a.setAttribute('href', 'https://www.naver.com');
a.textContent = 'Naver';
}
// jQuery
function changeAttrJquery() {
$('a').attr('href', 'https://www.daum.net');
$('a').text('Daum');
}속성을 다룰 때는 attr()을 사용하면 된다.
CSS를 다룰 때와 마찬가지로 attr(속성명, 바꿀 속성값)으로 속성값을 바꿀 수 있으며, attr(속성명)만 작성하면 해당 속성에 맞는 속성값을 가지고온다.
3. jQuery로 요소 추가/삭제/찾기
지금까지는 jQuery로 요소를 다루는 기본적인 문법을 살펴보았다.
이제부터는 Javascript에서도 진행했던 요소를 추가하고, 삭제하고, 찾는 기능을 다뤄보려고 한다.
1) jQuery 요소 추가
요소를 추가하는 방법은 크게 4가지가 있다.
- append() : 선택한 자식 요소의 마지막에 추가
- prepend() : 선택한 자식 요소의 처음에 추가
- before() : 선택한 형제 요소 이전에 추가
- after() : 선택한 형제 요소 다음에 추가
아래 코드에서 javascript와 비교하여 동일한 기능을 하는 jQuery 구문을 작성해보았다.
// [요소 추가하기]
// 1) 선택된 요소의 자식 요소 중 마지막에 추가
// js
function appendJS() {
const colors = document.querySelector('.colors');
const li = document.createElement('li');
li.setAttribute('class', 'red');
li.setAttribute('style', 'color: red;');
li.textContent = 'red js';
colors.append(li);
}
// jQuery
function appendJquery() {
$('.colors').append('<li class="red" style="color: red">red jQuery</li>');
}
// =========================================
// 2) 선택된 요소의 자식 요소 중 맨 처음에 추가
// js
function prependJS() {
const colors = document.querySelector('.colors');
const li = document.createElement('li');
li.setAttribute('class', 'blue');
li.setAttribute('style', 'color: blue;');
li.textContent = 'blue js';
colors.prepend(li);
}
// jQuery
function prependJquery() {
$('.colors').prepend('<li class="blue" style="color: blue">blue jQuery</li>');
}
// =========================================
// 3) 선택된 요소의 형제 요소로 이전 형제로 추가
// js
function beforeJS() {
// green을 기준으로
const green = document.querySelector('.green');
const li = document.createElement('li');
li.setAttribute('class', 'pink');
li.setAttribute('style', 'color: pink;');
li.textContent = 'pink js';
green.before(li);
}
// jQuery
function beforeJquery() {
$('.green').before('<li class="pink" style="color: pink;">pink jQuery</li>');
}
// =========================================
// 4) 선택된 요소의 형제 요소로 이후 형제로 추가
// js
function afterJS() {
const green = document.querySelector('.green');
const li = document.createElement('li');
li.setAttribute('class', 'skyblue');
li.setAttribute('style', 'color: skyblue;');
li.textContent = 'skyblue js';
green.after(li);
}
// jQuery
function afterJquery() {
$('.green').after(
'<li class="skyblue" style="color: skyblue;">skyblue jQuery</li>'
);
}
2) jQuery 요소 삭제
요소를 삭제하는 방법은 2가지가 있다.
- remove() : 요소 삭제
- empty() : 모든 자식 요소 삭제
// [요소 삭제하기]
// 1) 선택된 요소 모두 삭제
// js
function removeJS() {
const li2 = document.querySelector('#li2');
li2.remove();
}
// jQuery
function removeJquery() {
$('#li2').remove();
}
// =========================================
// 2) 선택된 요소의 자식 요소 모두 삭제
// js
function emptyJS() {
const nums = document.querySelector('.nums');
nums.textContent = '';
}
// jQuery
function emptyJquery() {
$('.nums').empty();
}이 중에 주의해야할 것이 empty()인데, Javascript상에서는 해당 함수가 없어서 다른 방법으로 적용해야 한다.
두 가지의 차이점은 remove()는 요소 하나를 삭제하는 것에 반해 empty()는 자식 요소를 모두 삭제하는 기능이다.
3) jQuery 요소 찾기
단순 요소를 찾는 것은 $() 구문이면 충분했으나, 부모·조상·다음/이전 형제·모든 자식 을 찾기 위해서는 아래 함수를 사용하면 된다.
- parent() : 부모
- parents() : 조상
- next() : 다음 형제
- prev() : 이전 형제
- children() : 모든 자식
// [요소 탐색하기]
// 1) 부모 찾기
function findParent() {
// js
console.log(document.querySelector('.child2').parentElement);
// jQuery
console.log($('.child2').parent());
}
// =========================================
// 2) 조상 찾기
function findParents() {
// js는 존재하지 않으므로 pass
// jQuery
console.log($('.child2').parents());
}
// =========================================
// 3) 다음 형제 찾기
function findNext() {
// js
console.log(document.querySelector('.child2').nextElementSibling);
// jQuery
console.log($('.child2').next('div'));
}
// =========================================
// 4) 이전 형제 찾기
function findPrev() {
// js
console.log(document.querySelector('.child2').previousElementSibling);
// jQuery
console.log($('.child2').prev('div'));
}
// =========================================
// 5) 모든 자식 찾기
function findChildren() {
// js
console.log(document.querySelector('.parent').children);
// jQuery
console.log($('.parent').children());
}조금 흥미로운 부분이 몇 가지 있다.
첫 번째로 조상을 찾는 코드인 parents()인데, 조상을 찾는 코드는 Javascript에는 존재하지 않는다.
또한 코드를 실행하면 상위 요소 ~ 그 다음 상위 요소 ~~ <body> ~ <html>로 나오는 것을 알 수 있다.
모든 조상을 전부 찾아주는 코드인 듯 하다.
다음으로 비교적 Javascript와 jQuery의 함수가 같아서 외우기 편했으나, 다음/이전 형제 찾는 코드는 매우 다르다.
Javascript는 nextElementSibling, previousElementSibling을 사용하고
jQuery는 next(), prev()를 사용한다.
4. jQuery로 클래스 조작하기
클래스 조작하는 부분은 Javascript와 아예 다른데, 충분히 살펴 볼 필요가 있다.
크게 4가지 부분으로 나뉜다.
- 클래스 추가
- 클래스 삭제
- 클래스가 포함되어 있는지 확인
- 클래스 토글
코드로 살펴보면 다음과 같다.
1) 클래스 추가
function addClass() {
// js
// hi 아이디 갖는 요소 선택하여 "fs-50" 클래스 추가
const hi = document.querySelector('#hi');
hi.classList.add('fs-50');
// jQuery
$('#hi').addClass('fs-50');
}Javascript는 xxx.classList.add()로 추가하고,
jQuery는 addClass()를 사용한다.
2) 클래스 삭제
function removeClass() {
// js
// hi 아이디 갖는 요소 선택하여 "fs-50" 클래스 삭제
const hi = document.querySelector('#hi');
hi.classList.remove('fs-50');
// jQuery
$('#hi').removeClass('fs-50');
}Javascript는 xxx.classList.remove()로 삭제하고,
jQuery는 removeClass()를 사용한다.
3) 클래스가 포함되어 있는지 확인
function hasClass() {
// js
// hi 아이디 갖는 요소 선택하여 "fs-50" 클래스 포함 여부 확인
const hi = document.querySelector('#hi');
console.log(hi.classList.contains('fs-50'));
// jQuery
console.log($('#hi').hasClass('fs-50'));
}Javascript는 xxx.classList.contains()로 클래스가 있는지 확인하고,
jQuery는 hasClass()를 사용한다.
4) 클래스 토글
function toggleClass() {
// js
// hi 아이디 갖는 요소 선택하여 "bg-pink" 클래스 토글 (있으면 삭제, 없으면 추가)
const hi = document.querySelector('#hi');
hi.classList.toggle('bg-pink');
// jQuery
$('#hi').toggleClass('bg-pink');
}Javascript는 xxx.classList.toggle()로 클래스가 있는지 확인하고,
jQuery는 toggleClass()를 사용한다.
눈치챘겠지만, Javascript는 xxx.classList로 클래스를 조작하며, jQuery는 xxxClass()로 사용하는 것을 알 수 있다.
5. jQuery Event
jQuery로 이벤트도 다룰 수 있는데, 아래 코드로 Javascript와 어떤 부분이 다른지 먼저 살펴보자.
※ 클릭 이벤트를 한다는 가정하에 코드를 작성했다.
// Click Event
// jQuery
// $('.num').on('click', function () {
$('.num').click(function () {
$('.num').css('color', 'blue'); // class="num" 요소들 모두 선택
// $(this): 자기 자신 = 이벤트가 허용된 요소
$(this).css('color', 'blue');
});
// js
const nums = document.querySelectorAll('.num');
for (let num of nums) {
num.addEventListener('click', function (e) {
this.style.color = 'green';
});
}jQuery는 적용할 이벤트를 함수명으로 사용하거나 on함수에 첫 번째 인자로 이벤트를 넣어주는 2가지 방법으로 이벤트를 다룰 수 있다.
반면 Javascript는 addEventListener로 이벤트를 다룬다.
위의 코드를 잘 살펴보면 엄청난 차이가 존재하는데, jQuery는 여러 요소를 선택하더라도 반복문 없이도 모두 적용할 수 있는 것을 알 수 있다.
Javascript는 여러 요소를 선택한 경우, 반복문을 통해서 각각 적용해주는 반면, jQuery는 바로 적용할 수 있다.
그리고 이벤트가 동작한 요소 하나만 선택하고 싶은 경우 this키워드를 사용하면 된다.
[Reference]
1) [갓대희의 작은공간] (https://goddaehee.tistory.com/173)
[Image]
1) [CDN 적용 이미지 (출처: 갓대희의 작은공간)] (https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F99EA983C5C5304ED21)