서론
AJAX에 대한 글을 작성하면서 jQuery가 제공하는 Ajax의 메소드들을 공부하게 되었다.
근데 생각해보니 Ajax를 쓸 때나 평소에 jsp파일을 작성할 때 jQuery인지도 모르고 계속 써왔던 기본 문법인 $()함수를 공부해보고자 이 글을 쓰게 됐다.
개요
jQuery는 JavaScript의 오픈 소스 라이브러리이다.
jQuery를 통해 간결하게 웹 페이지에 효과와 연출을 적용할 수 있으며, DOM을 쉽게 처리할 수 있다.
<!--일반 자바스크립트 문법-->
document.querySelectorAll('.test')[0].innerHTML = 'Bye';
document.querySelectorAll('.test')[1].innerHTML = 'Bye';
document.querySelectorAll('.test')[1].innerHTML = 'Bye';
<!--jQuery 문법-->
$.('.test').html('Bye');적용
JavaScript에 적용하려면 .js 파일을 다운 받거나 CDN(Content Delivery Network)을 이용하여 로드하는 방법이 있다.
- js를 다운하는 방법
이 곳에서 js 파일을 다운받은 뒤 태그 내에 삽입한다.
<head>
<script src="/media/jquery-1.12.4.min.js"></script>
</head>- CDN을 이용하여 로드하는 방법
CDN(Content Delivery Network)이란 웹 사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때, 자동으로 가장 가까운 서버에서 다운받도록 하는 기술이다.
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>기본 문법
jQuery의 기본 문법은 다음과 같다.
$(선택자).동작함수();여기서 달러($) 기호는 jQuery를 의미하는 식별자이다.
이 $()를 통해 생성된 요소를 제이쿼리 객체(jQuery object)라고 한다.
선택자
jQuery에서는 CSS 선택자, 비표준 선택자들로 요소를 선택할 수 있다.
CSS 선택자
기존에 CSS를 쓸 때 쓰는 선택자들이 있다.
- 전체 선택자 :
* - HTML 요소 선택자 :
h1, h2, h3, p... - 아이디(id) 선택자 :
#id - 클래스(class) 선택자 :
.class
이 선택자들을 JavaScript와 jQuery에서 썼을 때의 차이점을 알아보자
아래는 JavaScript에서 CSS를 조작할 때 코드다.
document.addEventListener("DOMContentLoaded", function() {
const books = document.querySelectorAll(".book"); // ".book" 클래스를 가진 모든 요소를 선택합니다.
books.forEach(function(book) {
book.addEventListener("click", function() {
const spans = document.querySelectorAll("span"); // 모든 <span> 요소를 선택합니다.
spans.forEach(function(span) {
span.style.fontSize = "28px"; // 각 <span> 요소의 폰트 크기를 변경합니다.
});
});
});
});다음은 jQuery로 쓸 때 코드다.
$(function() {
$(".book").on("click", function() { // ".book" 요소를 모두 선택함.
$("span").css("fontSize", "28px"); // <span>요소를 모두 선택함.
});
});코드가 상당히 간결해진 것을 볼 수 있다.
비표준 선택자
jQuery는 선택한 요소를 저장하거나 그 요소들을 필터링 할 수 있다.
$(function() {
var items = $("li"); // <li>요소를 모두 선택하여 변수 items에 저장함.
$("button").on("click", function() {
$("#len").text("저장된 <li>요소의 총 개수는 " + items.length + "개 입니다.");
});
});위와 같이 변수에 li 요소를 저장하고 len 태그를 가진 요소에 출력할 수 있고,
$(function() {
$("button").on("click", function() {
$("li:has(span)").text("<span>요소를 가지고 있는 아이템이에요!");
});
});:필터링(파라미터) 를 통해 특정 요소에서 더욱 세분화한 필터링을 할 수가 있다.
| 선택자 | 설명 |
|---|---|
| :eq(n) | 선택한 요소 중에서 인덱스가 n인 요소를 선택함. |
| :gt(n) | 선택한 요소 중에서 인덱스가 n보다 큰 요소를 모두 선택함. |
| :lt(n) | 선택한 요소 중에서 인덱스가 n보다 작은 요소를 모두 선택함. |
| :even | 선택한 요소 중에서 인덱스가 짝수인 요소를 모두 선택함. |
| :odd | 선택한 요소 중에서 인덱스가 홀수인 요소를 모두 선택함. |
| :first | 선택한 요소 중에서 첫 번째 요소를 선택함. |
| :last | 선택한 요소 중에서 마지막 요소를 선택함. |
| :animated | 선택한 요소 중에서 애니메이션 효과가 실행 중인 요소를 모두 선택함. |
| :header | 선택한 요소 중에서 h1부터 h6까지의 요소를 모두 선택함. |
| :lang(언어) | 선택한 요소 중에서 지정한 언어의 요소를 모두 선택함. |
| :not(선택자) | 선택한 요소 중에서 지정한 선택자와 일치하지 않는 요소를 모두 선택함. |
| :root | 선택한 요소 중에서 최상위 루트 요소를 선택함. |
| :target | 선택한 요소 중에서 웹 페이지 URI의 fragment 식별자와 일치하는 요소를 모두 선택함. |
| :contains(텍스트) | 선택한 요소 중에서 지정한 텍스트를 포함하는 요소를 모두 선택함. |
| :has(선택자) | 선택한 요소 중에서 지정한 선택자와 일치하는 자손 요소를 갖는 요소를 모두 선택함. |
| :empty | 선택한 요소 중에서 자식 요소를 가지고 있지 않은 요소를 모두 선택함. |
| :parent | 선택한 요소 중에서 자식 요소를 가지고 있는 요소를 모두 선택함. |
요소 조작
요소 추가
- .append(), .prepend()
선택한 요소의 ‘마지막’, ‘처음’에 새로운 요소나 콘텐츠를 추가한다.
$(function() {
$("button").on("click", function() {
$("#list").append("<li>새로 추가된 아이템이에요!</li>");
// $("#list").prepend("<li>새로 추가된 아이템이에요!</li>");
});
});- .appendTo(), .prependTo()
선택한 요소를 '해당 요소의 마지막or처음'에 삽입한다.
$(function() {
$("#firstBtn").on("click", function() {
// id가 "list"인 요소의 맨 마지막or처음에 id가 "firstItem"인 요소를 추가함.
$("#firstItem").appendTo("#list");
// $("#firstItem").prependTo("#list");
});
});요소 복사 및 제거
- .clone()
선택한 요소를 복사하여 새로운 요소를 생성한다.
$(function() {
$("button").on("click", function() {
// id가 "firstItem"인 요소를 복사하여 id가 "list"인 요소에 추가함.
$("#firstItem").clone().appendTo("#list");
});
});.appendTo()만 하면 기존 요소가 자리를 이동하는 방식이지만 .clone().appendTo()를 하면 복사해서 추가하는 방식이라 기존 요소가 남아있다.
- .replaceAll(), .replaceWith()
replaceAll : 선택자나 제이쿼리 객체, HTML DOM 요소, 배열 등을 전달받아 선택한 요소를 지정된 요소로 대체한다.
replaceWith : ~ 전달받아 선택한 모든 요소를 지정된 요소로 대체한다.
$(function() {
$("button1").on("click", function() {
// class가 "item"인 각 요소를 id가 "firstItme"인 요소로 대체함.
$("#firstItem").replaceAll(".item");
});
$("button2").on("click", function() {
// class가 "item"인 모든 요소를 id가 "firstItme"인 요소로 대체함.
$(".item").replaceWith($("#firstItem"));
});
});- .remove()
선택한 요소를 DOM 트리에서 삭제한다. (연관된 제이쿼리 데이터나 이벤트도 같이)
$(function() {
$("button").on("click", function() {
// class가 "content"인 요소 중에서 class가 각각 "first", "second"인 요소를 모두 삭제함.
$(".content").remove(".first, .second");
});
});- .detach()
선택한 요소를 DOM 트리에서 삭제한다. 단, 반환하는 객체를 .append() 같은 함수로 복구 가능하다.
$(function() {
var data;
$("#detachBtn").on("click", function() {
data = $(".content").detach(); // class가 "content"인 요소를 모두 삭제함.
});
$("#restoreBtn").on("click", function() {
$("#container").append(data); // detach() 메소드로 삭제되었던 모든 요소를 다시 추가함.
});
});- .empty()
선택한 요소의 자식 요소를 모두 삭제한다. 단, 선택된 요소는 삭제되지 않는다.
$(function() {
$("button").on("click", function() {
$("#container").empty(); // id가 "container"인 요소의 자식 요소를 모두 삭제함.
});
});- .unwrap()
선택한 요소의 부모 요소를 삭제한다.
$(function() {
$("button").on("click", function() {
$("span").unwrap(); // 모든 <span>요소의 부모 요소를 삭제함.
});
});요소 탐색
부모 요소
| 메소드 | 설명 |
|---|---|
| .parent() | 선택한 요소의 부모(parent) 요소를 선택함. |
| .parents() | 선택한 요소의 조상(ancestor) 요소를 모두 선택함. |
| .parentsUntil() | 선택한 요소의 조상 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택함. |
| .closest() | 선택한 요소를 포함한 조상 요소 중에서 지정한 선택자에 해당하는 요소 중 가장 첫 번째 요소를 선택함. |
형제 요소
| 메소드 | 설명 |
|---|---|
| .siblings() | 선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택함. |
| .next() | 선택한 요소의 바로 다음에 위치한 형제 요소를 선택함. |
| .nextAll() | 선택한 요소의 다음에 위치한 형제 요소를 모두 선택함. |
| .nextUntil() | 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택함. |
| .prev() | 선택한 요소의 바로 이전에 위치한 형제 요소를 선택함. |
| .prevAll() | 선택한 요소의 이전에 위치한 형제 요소를 모두 선택함. |
| .prevUntil() | 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 다음까지의 요소를 모두 선택함. |
자식 요소
| 메소드 | 설명 |
|---|---|
| .children() | 선택한 요소의 자식(child) 요소를 모두 선택함. |
| .find() | 선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 요소를 모두 선택함. |
기타 탐색 요소
| 메소드 | 설명 |
|---|---|
| .add() | 선택한 요소의 집합에 전달받은 요소를 추가함. |
| .addBack() | 선택한 요소의 집합에 바로 전에 선택했던 요소를 추가함. |
| .each() | 선택한 요소 집합의 요소마다 전달받은 콜백 함수를 실행함. |
| .end() | 마지막으로 실행한 메소드의 실행 전 상태로 선택한 요소의 집합을 복원함. |
| .offsetParent() | 선택한 요소를 위치시킬 때 기준이 되었던 조상 요소를 선택함. |
| .contents() | 선택한 요소의 자식(child) 요소를 모두 선택함. (텍스트 노드와 주석 노드까지 모두 포함함) |
이벤트 처리
이벤트란? 웹 페이지와 Client의 상호작용을 수행하는 것이다.
이러한 event를 처리하기 위해 event handler라는 함수를 연결해야 한다.
.on() 메소드
특정 요소에 이벤트를 연결하기 위해 on 메소드를 사용할 수 있다.
- 선택한 요소에 어떤 타입의 이벤트라도 연결이 가능하다.
- 하나의
event handler에 여러 개의 event를 동시에 연결 가능하다. - 한 요소에 여러 개의
event handler와 여러 개의 event를 연결 할 수 있다. - event handler로 데이터를 넘길 수 있다.
$(function() {
$("button").on({ // 모든 <button>요소에
mouseenter: function() { // mouseenter 이벤트를 설정함.
$("#text").append("마우스가 버튼 위로 진입했어요!<br>");
},
click: function() { // click 이벤트를 설정
$("#text").append("마우스가 버튼을 클릭했어요!<br>");
},
mouseleave: function() { // mouseleave 이벤트를 설정함.
$("#text").append("마우스가 버튼 위에서 빠져나갔어요!<br>");
}
});
});.one() 메소드
.one() 메소드는 .on() 메소드와 같지만 한 번 실행된 후에는 다시 실행되지 않는다.
$(function() {
$("button").one("click", function() {
// 모든 <button>요소가 처음 클릭됐을 때에만 실행됨.
$("#text").append("첫 번째 클릭이에요!<br>");
// 모든 <button>요소가 두 번째 클릭됐을 때부터는 이 이벤트 핸들러가 실행됨.
$(this).click(function() {
$("#text").append("이 버튼을 벌써 클릭했네요!<br>");
});
});
});.off() 메소드
.off() 메소드는 더는 사용하지 않는 이벤트와의 연결을 제거한다.
$(function() {
$("#clickBtn").on("click", function() { // id가 "clickBtn"인 요소를 클릭했을 때 실행됨.
$("#text").append("버튼을 클릭했어요!<br>");
});
$("#removeBtn").on("click", function() {
$("#clickBtn").off("click"); // id가 "clickBtn"인 요소의 클릭 이벤트와의 연결을 제거함.
});
});이벤트의 위임
요소에 직접 등록하는 event handler는 현존하는 요소에만 연결되고 새롭게 추가되는 요소에는 연결 되지 않는다.
$(function() {
$("ul a").on("click", function(event) { // <ul>요소의 자식 요소 중 모든 <a>요소를 클릭했을 때,
event.preventDefault(); // <a>요소의 클릭시 기본 동작인 링크의 작동을 중지시킴.
$("#text").append("이 링크는 동작하지 않습니다!<br>");
});
$("button").one("click", function() {
$("ul").append('<li><a href="/jquery/intro">jQuery</a></li>');
});
});다만 이 부분을 이벤트의 위임을 적용시켜 수정하면 새로 발생한 요소에도 이벤트가 적용된다.
// 수정 전
$("ul a").on("click", function(event) { // <ul>요소의 자식 요소 중 모든 <a>요소를 클릭했을 때,
event.preventDefault(); // <a>요소의 클릭시 기본 동작인 링크의 작동을 중지시킴.
$("#text").append("이 링크는 동작하지 않습니다!<br>");
});
// 수정 후
$("ul").on("click", "a", function(event) {
event.preventDefault(); // <a>요소의 클릭시 기본 동작인 링크의 작동을 중지시킴.
$("#text").append("이 링크는 동작하지 않습니다!<br>");
});결론
평소에 jsp파일을 작성하면서 의미없이 썼던 $() 함수를 자세히 보다보니 생각보다 프론트 쪽이라 의외기도 했고 다양한 함수로 편리하게 쓰이고 있다는 것이 공부가 되었다.
