JS - 제이쿼리(jQuery)

이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다.

제이쿼리는 DOM을 조작하거나 Ajax 요청을 실행할 때 널리 쓰이는 라이브러리입니다. 제이쿼리를 쓰면 얻을 수 있는 큰 갈래의 3가지 장점이 있습니다.

• 브라우저 호환성을 걱정하지 않아도 됩니다.
• 제이쿼리가 제공하는 Ajax API는 단순합니다.
• 내장된 DOM API를 더 유용하고 단순하게 바꾼 메서드를 제공합니다.

달러 기호

제이쿼리는 JS에서 달러기호를 식별자로 사용할 수 있다는 장점을 이용하여 제이쿼리를 사용할 때 달러기호를 이용하도록 했습니다.

 

제이쿼리 불러오기

<script src="http:''code.jquery.com/jquery-2.1.4.min.js"></script>

 

DOM 기다리기

$(document).ready(function() {
	// DOM이 구성된 다음 실행됨
});

//단축형
$(function(){
	// DOM이 구성된 다음 실행됨
});

브라우저가 페이지를 완전히 읽고 DOM을 구축한 다음 함수가 호출되도록 하는 코드입니다.

 

제이쿼리로 감싼 DOM 요소

제이쿼리로 DOM 요소를 감싸 제이쿼리 객체를 만들 수 있습니다. 제이쿼리 함수($, jQuery)를 호출할 때는 주로 CSS 선택자나 HTML을 사용합니다.

CSS 선택자로 제이쿼리를 호출하면 해당 선택자에 일치하는 제이쿼리 객체가 반환됩니다.

const $paras = $('p');

HTML로 제이쿼리를 호출하면 그에 맞는 DOM 요소가 새로 만들어집니다.

const $newPara = $('<p>hihiihihihihi!</p>');

제이쿼리 객체의 이름을 정할 때는 달러기호로 시작해 제이쿼리 객체임을 구별할 수 있도록 정하는 것이 좋습니다.

 

요소 조작

DOM API의 textContent, innerHTML과 대응하는 기능인 text, html 메서드가 제이쿼리 객체에 있습니다. 이 때 컬렉션의 경우 for문을 사용할 필요없이 전부 다 적용시켜 줍니다.(eq 메서드를 써서 특정 요소만 정할 수도 있습니다.) 이외에도 remove 메서드, append 메서드, before, after 메서드 등이 있습니다.

 

요소들의 부분집합만 남기고 싶다면 filter, not find를 써서 선택 범위를 줄일 수 있습니다.

 

제이쿼리 취소

get 메서드를 사용해서 제이쿼리 객체로 감싼 것을 취소하고 DOM 요소에 직접 접근할 수 있습니다.