[JQuery] JQuery의 주요 컨셉 및 api 정리

레거시 프로젝트에 대한 대비용으로 간단하게 JQuery 사용법을 정리했다.

내용 대부분은 생활코딩님의 사이트를 참조하였으니 필요한 분들은 아래 링크를 참조바란다.

다만, 자료가 예전 것이다 보니 현재와 맞지 않는 부분도 있다.

예컨대, 설명에서는 JQuery가 인기가 많은 라이브러리이고, JQuery UI나 JQuery Mobile을 모바일 라이브러리로

소개하지만, 이 두 라이브러리는 이제 사양되고 있다. 또한, live 같은 일부 메소드는 on으로 대체되었다. 그러니 공식 사이트의 api 레퍼런스를 함께 참조하자.

 

 

기본 형식

제이쿼리 코드는 기본적으로 Wrapper와 method로 구성된다.

//html의 <div class="box">를 선택 후, innerHTML로 hello world, inline style로 color:red; 부여
$("div.box").html("hello world").css("color","red")

 

$로 시작하는 부분이 wrapper. 제어 대상에 해당한다.

chaining되는 부분이 method. 제어 내용을 담고 있다.

 

 

생산성에서의 장점

---

제이쿼리는 적은 코드로 목적을 달성할 수 있고 어떤 부분은 모던 자바스크립트와 비교했을 때 여전히 이점이 있다.

 

1. 크로스 브라우징

제이쿼리 메소드는 document 객체 내에 해당 api가 있는지 자동으로 검사한다.

 

2. 자동 순회 기능

wrapper가 반환한 대상이 iterator라면 일반적으로 메소드가 자동으로 순회되며 적용된다.

//wrapper의 요소가 array라도, 모든 대상에 html 메소드가 적용된다
$("li[class*='item']").html("hello")

 

3. 가독성

일반 자바스크립트에 비해 적은 코드로 작동하는 메소드가 존재한다.

메소드는 일반적으로 wrapper 본인을 반환하므로 연속적인 chainning으로 작업이 가능하다.

(자세한 건 탐색 챕터 참조)

// 동일한 wrapper에 여러 작업을 압축 가능하다.
$("li[class*='item']").html("hello").css("color","white").on("click",()=>console.log(this))

 

 

 

wrapper

---

wrapper의 형식은 $()이나 jQuery() 이다.

하지만, 생산성을 위해 $을 많이 사용한다.

이 경우에 문제가 있을 수 있는데, $가 다른 외부 스크립트의 변수와 겹치는 경우이다. 스크립트 파일 간에는 변수명이 격리가 안되고 공유되므로, 다른 라이브러리의 $변수가 jQuery의 $에 오버라이드 될 수 있다.

 

해결 방법. IIFE 사용

(function ($) {
$($("#test")).on("click", () => console.log("hello"));
//내부에서 $을 써도 외부의 스크립트와 중복되지 않음
})(jQuery);
// 이처럼 스크립트 파일을 IIFE로 작성하면 인자를 제외하고 로컬 변수를 캡슐화할 수 있다.

 

문법

$(selector, [context])

• seletor | css 선택자 또는 html 요소 객체. 다양한 css 선택자를 지원해서 자식이나 형제 외에도 다양한 selecting이 가능하다.
• context | 옵션이다. 탐색이 시작되는 위치이며, 기본값은 document.

참고, 표기법에서 
$(selector, [context]) 처럼 대괄호 부분은 옵션을 의미한다.

 

모범 사례

// 이벤트 리스너에서 this를 context로 전달했다. this의 하위 요소를 select하기 편리하다.
$("ul.foo").on("click", function () {
$("span", this).css("background-color", "red");
});


//selector 대신 html 요소가 들어가도 됨
$($("#test"))

 

 

chain과 탐색

---

제이쿼리의 메소드는 기본적으로 wrapper 본인을 반환하기 때문에 chaining으로 method를 연속 호출할 수 있다.

즉, chaining과 method의 context는 항상 wrapper을 유지한다.

다만, 때때로 wrapper의 형제 요소나 자식 요소에 작업을 해야할 때가 있는데, 그럴 때는 context를 wrapper가 아닌 걸로

바꿔줘야 한다. 이럴 때 traversing(탐색) method를 사용한다.

 

.find(selector or element)
래퍼 요소의 하위 요소를 셀렉터로 탐색 후 컨텍스트 설정

end()
현재 설정된 컨텍스트를 취소하고 이전의 컨텍스트로 전환

 

두 메소드를 이용한 탐색의 사례

(function ($) {
$("ul.first")
.find(".foo")
//ul.first의 자식 요소로 .foo 탐색 후 context 설정
.find("strong")
//.foo의 자식 요소로 strong 탐색 후 context 설정
.css("color", "red")
//strong에 적용
.end()
// 이전 context인 .foo로 전환
.css("color", "blue");
})(jQuery);

 

https://api.jquery.com/category/traversing/

 

 

이벤트

---

이벤트는 on으로 핸들러 추가.

off로 제거 가능.

 

trigger

할당된 이벤트를 실행시킨다.

 

이벤트 헬퍼

on이나 off를 사용하지 않고

click() 같은 방식으로 축약된 방법을 제공한다.

 

 

엘리먼트 제어 관련 주요 api

---

dom 삽입 및 제거

append

- 셀렉터가 컨테이너, 메소드 인자가 추가할 대상

- 컨테이너 내 뒷편에 추가

 

appendTo

- 셀렉터가 추가할 대상 메소드 인자가 컨테이너

- 체인으로 동일 대상 appendTo할 시, 대상이 복사되는 게 아니라 삽입 위치가 바뀜

 

$("<span>hello</span>").appendTo("#test2").appendTo("#test");

// test2에서 test1으로 위치 변경

 

after

- 형제로 추가

 

wrap

- 대상을 감싸는 부모 생성

- 중첩된 구조라 해도, 내부에서 가장 안쪽의 태그 내에 삽입

$("#test").wrap(

"<div class='container'>haha <section id=`sec`></section></div>"

);

// 가장 하위 요소인 section에 삽입

 

remove

- 삭제

 

 

클래스 제어 관련 메소드도 있다.

addClass

toggleClass

 

 

html 속성 변경

$("input[name='id']", "#form").attr("placeholder", "id");

 

참고자료

https://api.jquery.com/category/manipulation/

 

form 관련 이벤트

---

focus, blur, change, select 등에 이벤트 바인딩한다.

 

focus

요소가 선택되었을 때

 

blur

요소 선택 해제 시

 

change

선택 해제 + 원래 값과 비교하여 값 변경 시

 

select

인풋 내 text가 선택 블록 되었을 때

 

submit

제출 시 트리거된다.

 

val()

input의 value를 get한다.

인자를 주면, setter로 작동한다.

 

애니메이션

---

요즘 애니메이션은 간단한 건 transition, 조금 복잡한 건 @keyframe animation으로 css단에서 대개 구현가능하다.

반면, 옛날에 브라우저들은 이런 기능이 각자 지원 여부가 달랐기 때문에, 성능 이슈를 감수하고 js에서 setInterval 같은 걸로 직접 구현했다.

JQuery는 이런 상황에서 fadeIn, fadeOut같은 자주 사용되는 애니메이션을 축약 형태로 제공했다.

지금은 거의 레거시이니, 유지 보수용으로만 참고.

 

 

참고자료

https://www.opentutorials.org/course/53

https://api.jquery.com/