타쿠꺼
jQuery 간단정리 본문
Attributes: 속성값 다루기
- .attr() : attribute를 가져옴 / 설정 (첫번째요소 / 모든요소)
- .prop() : prop을 가져옴 / 설정 (첫번쨰요소 / 모든요소)
- .removeAttr() : attribute값을 지운다. (모든요소)
- .removeProp() : prop값을 지운다. (모든요소)
- .addClass() : 클래스 추가 (모든요소)
- .removeClass() : 클래스를 지운다. (모든요소)
- .hasClass() : 클래스 확인 (첫번째요소)
- .toggleClass() : 선택된 요소가 클래스가 있으면 지우고, 없으면 생성한다 (모든요소)
- .html() : html컨텐츠(여는태그와 닫는태그 사이)를 가져옴 / 설정 (첫번째요소 / 모든요소)
- .text() : text컨텐츠(텍스트 노드)를 가져옴 / 설정 (첫번째요소 / 모든요소)
- .val() : 폼태그와 연관되서 사용되며, 최근 값을 가져옴 / 설정함 (값을 가져올 때 2개 이상이면 배열을 리턴 / 모든요소)
CSS: CSS값 다루기
- .css() : css 가져옴 / 설정 (첫번째요소 / 모든요소)
- .height() : 높이(padding, border, margin 제외)를 가져옴 / 설정 (첫번째요소 / 모든요소)
- .width() : 넓이(padding, border, margin 제외)를 가져옴 / 설정 (첫번째요소 / 모든요소)
- .innerHeight() : 높이(padding만 포함)를 가져옴 / 설정 (첫번째요소 / 모든요소)
- .innerWidth() : 넓이(padding만 포함)를 가져옴 / 설정 (첫번째요소 / 모든요소)
- .outerHeight() : padding, border값을 포함한 높이값을 가져옴 / 설정 (첫번째요소 / 모든요소). true를 넘기면 margin도 가져옴.
- .outerWidth() : padding, border값을 포함한 높이값을 가져옴 / 설정 (첫번째요소 / 모든요소). true를 넘기면 margin도 가져옴.
- .offset() : document에서의 엘리먼트 위치값(top, left)을 포함한 객체를 반환시킴.
- .position() : parent에서의 엘리먼트 위치값(top, left)을 포함한 객체를 반환시킴.
- .scrollLeft() : 수평 스크롤바 위치값을 가져옴 / 설정 (첫번째요소 / 모든요소)
- .scrollTop() : 수직 스크롤바 위치값을 가져옴 / 설정 (첫번쨰요소 / 모든요소)
Traversing: DOM탐색하기
앞서 알아야 할 점.
- jQuery 집합을 Traversing 하면서 변화되는 jQuery집합은 내부적으로 stack구조로 저장이 된다. 따라서 이러한 stack구조를 활용하는 메서드들에 대한 이해를 해야할 필요성이 있다.
- 앞으로 집합이라 표현하는 것들은 jQuery 집합을 뜻한다.
- .add() : 기존 집합에 새로운 집합을 추가한다. 엘리먼트 생성의 개념이 아니라, 추가적으로 엘리먼트를 선택해서 넣는 것이다.
- .addBack() : 현재 집합에 그 이전의 집합을 추가한다.
- .children() : 직속자식요소들을 선택한다.
- .closest() : 시작요소를 포함해서 셀렉터 요소를 찾을때 까지 parent탐색을 시작한다. 셀렉터 요소가 발견되면 해당 요소를 리턴하고 탐색을 끝마친다. 즉 결과는 0개 혹은 1개이다. 시작요소가 셀렉터요소와 같으면 탐색을 시작요소부터 하므로 시작요소가 바로 리턴된다.
- .contents() : 집합요소들의 엘리먼트, 텍스트노드, 코멘트노드를 포함한 자식요소들을 가져온다.
- .each() : 집합요소들의 요소 각각 하나씩 모든 요소에 대해 함수를 사용한다.
- .end() : 현재 집합 이전의 집합요소를 선택한다.
- .eq(n) : 현재 집합 요소에서 n+1번째 요소를 선택한다.(index 시작이 0이므로)
- .filter() : 현재 집합 요소에서 1. 셀렉터로 선택, 2. 함수의 반환값이 true, 3. :연산자를 이용한 필터링 등에 의한 요소들을 선택한다. (each처럼 작동한다)
- .find() : children과 비슷하나 직속자식뿐 아니라 모든요소들을 선택한다.
- .first() : 첫번째 요소를 선택한다.
- .last() : 마지막 요소를 선택한다.
- .has() : 해당 요소를 갖고있는 요소를 선택한다.
- .is() : filter와 비슷하나 true, false값을 리턴한다. 즉, filter를 사용했을 때 집합의 갯수가 0이면 false를 반환한다.
- .map() : each()와 비슷하나 return값들을 포함한 집합을 반환한다.
- .next() : 집합요소들에 대해 각각 바로 다음 형제요소를 선택한다.
- .nextAll() : next에서 바로 다음 한개의
형제요소를 선택하는 것이 아닌 바로 다음 모든 형제요소를 선택한다.
- .nextUntil() : nextAll과 같은데 매개변수로 넘겨진 요소는 제외한다.
- .prev() : next()의 반대방향이다.
- .prevAll() : nextAll() 과 반대방향이다.
- .prevUntil() : nextAll() 과 반대방향이다.
- .not() : 현재집합요소들 중에서 매개변수로 넘겨진 요소들을 제외한다.
- .offsetParent() : 부모 엘리먼트를 리턴하는데, 포지션이 relative, absolute, fixed 로 특정지어져있는 상태여야 한다.
- .parent() : 집합요소들에 대해 각각의 직계부모요소들을 선택한다.
- .parents() : parent()와 같은데, 모든 부모요소를 선택한다.
- .parentsUntil() : parents()와 같은데, 매개변수의 요소는 제외한다.
- .siblings() : 형제요소들을 리턴한다. (자기 자신은 포함하지 않는다.)
- .slice(n) : 집합에서 index값이 n 이상인 요소들만 포함시킨다.
- .slice(n, m) : 집합에서 index값이 n인 요소들부터 m-1인 요소들까지 포함시킨다.
Selector: 요소선택하기
앞서 알아야 할 점.
- jQuery 셀렉터 문법은 CSS 셀렉터 문법 기반으로 만들어졌다.
- Filter 항목들은 BASIC, Hierarchy 셀렉터들과 연계하여 사용한다. (BASIC:Filter 형식)
- Attribute 항목은 BASIC[Attribute] 로 사용한다.
BASIC
- "*" : 모든 요소를 선택한다.
- ".class" : 클래스가 class인 요소들을 선택한다.
- "elem" : elem 태그들을 선택한다.
- "#id" : id가 id인 요소들을 선택한다.
- "selector1, selector2, selectorN" : 셀렉터1, 셀렉터2, ... 셀렉터N 인 요소들을 선택한다.
BASIC Filter
- :animated : 에니메이션중인 요소들을 선택한다.
- :even : 짝수 요소들을 선택한다. (zero-indexed)
- :odd : 홀수 요소들을 선택한다. (zero-indexed)
- :first : 맨 처음 요소를 선택한다.
- :last : 맨 마지막 요소를 선택한다.
- :focus : 포커스된 요소를 선택한다.
- :header : h1, h2, h3 등 헤더요소들을 선택한다.
- :eq(n) : index값이 n인 요소를 선택한다.
- :gt(n) : index값이 n보다 큰 요소들을 선택한다. (index > n)
- :lt(n) : index값이 n보다 작은 요소들을 선택한다. (index < n)
- :not(selector) : selector가 아닌 요소들을 선택한다.
Child Filter
- :first-child : 선택된 모든 요소들 중에서 각각의 첫번째 자식요소들을 선택한다.
- :last-child : 선택된 모든 요소들 중에서 각각의 마지막 자식요소들을 선택한다.
- :first-of-type : 선택된 모든 요소들 중에서 같은 타입의 첫번째 자식요소들을 선택한다.
- :last-of-type : 선택된 모든 요소들 중에서 같은 타입의 마지막 자식요소들을 선택한다.
- :nth-child(n) : 선택된 모든 요소들 중에서 n번째인 자식요소들을 선택한다.
- :nth-last-child(n) : 선택된 모든 요소들 중에서 마지막으로부터 n번째인 자식요소들을 선택한다.
- :nth-of-type(n) : 선택된 모든 요소들 중에서 같은 타입의 n번째 자식요소들을 선택한다.
- :nth-last-of-type(n) : 선택된 모든 요소들 중에서 마지막으로부터 n번째인 자식요소들을 선택한다.
- :only-child : 선택된 모든 요소들 중에서 자식요소가 한개인 자식요소들을 선택한다.
- :only-of-type : 선택된 모든 요소들 중에서 자식요소들 중 유일한 타입인 자식요소들을 선택한다.
Content Filter
- :contains('value') : value 단어를 포함한 요소들을 선택한다.
- :parent : text노드를 포함하여 최소 1개 이상의 자식요소를 갖고있는 요소들을 선택한다.
- :empty : text노드를 포함한 어떠한 자식도 갖지 않은 요소들을 선택한다.
- :has(selector) : .has()와 같음. 셀렉터 요소를 갖고있는 요소들을 선택한다.
Form
기본적으로 <input type="filter-name"> 에서 filter-name에 해당하는 요소들을 선택한다.
- :button
- :checkbox
- :checked : checked되거나 selected된 요소들을 선택한다.
- :disabled : disabled된 요소들을 선택한다.
- :enabled : enabled된 요소들을 선택한다.
- :file
- :focus : 현재 포커스된 요소를 선택한다.
- :image
- :password
- :radio
- :reset
- :selected : option태그 중 selected된 요소들을 선택한다. 보통 option:selected로 사용한다.
- :submit
- :text
Hierarchy
- "parent > child" : 직속자식요소들을 선택한다.
- "ancestor descendant" : ancestor 요소의 자식, 손자요소인 descendant들을 선택한다.
- "prev + next" : prev요소들의 바로 다음형제요소인 next들을 선택한다.
- "prev ~ siblings" : prev요소들의 형제요소들인 siblings들을 선택한다.
Attribute
- [name="value"] : name속성값이 정확히 value인 요소들을 선택한다.
- [name|="value"] : name속성값이 value인 값, 또는 value- 와 같이 하이픈이 포함된 요소들을 선택한다.
- [name*="value"] : name속성값이 value라는 단어를 포함한 요소들을 선택한다.
- [name~="value"] : name속성값에서 value값이 (공백으로) 독립된 단어로 포함된 요소들을 선택한다.
- [name^="value"] : name속성값이 value라는 단어로 시작하는 요소들을 선택한다.
- [name$="value"] : name속성값이 value라는 단어로 끝나는 요소들을 선택한다.
- [name!="value"] : name속성값 중에서 value가 없는 요소들을 선택한다.
- [name] : name속성값을 가진 요소들을 선택한다.
- [Attribute1][Attribute2]... : 여러개의 Attribute 셀렉터들을 만족하는 요소들을 선택한다.
Data : 데이터 저장하기
앞서 알아야 할 점
- .data 메서드는 HTML의 data-key="value" attribute로 저장된 값을 가져올 수 있다.
- HTML이 data-key-name="value"의 key-name과 같이 dash로 구분이 되어있는 경우, 이를 가져올 때에는
.data('keyName')같이 camel-case로 가져오면 된다.
- .data(key,value)는 HTML에 data-key="value" 형식으로 저장하는것이 아니라 jQuery 내부적으로 저장을 하는 것이다.
- .data(key,value)로 설정한 key와 HTML의 data-key값이 같을 때에는 .data(key, value)로 설정한 value값을 가져온다.
- .data(key[, value]) : key에 해당하는 value값을 가져오거나 셋팅한다.
- .data(obj) : obj{key1: value1, key2: value2, ...} 로 값을 셋팅한다.
- .data() : {key: value}의 객체로 값을 가져온다.
Effects : 효과
- .animate() : 애니메이션 효과를 준다.
- .delay(ms) : Effect를 여러개 체이닝 할 경우, ms만큼 딜레이를 주고 뒤의 Effect를 실행시킨다.
- .fadeIn(ms[, complete]) : ms만큼 페이드인(보여짐)효과를 준다. complete는 완료 후 콜백 메서드이다.
- .fadeOut(ms[, complete]) : ms만큼 페이드아웃(숨겨짐)효과를 준다.
- .fadeTo(ms, opacity[, complete]) or (ms, opacity[, easing][, complete] : ms만큼 opacity로 페이드효과를 준다.
- .fadeToggle(ms) : 숨겨져있는 경우 페이드인, 보이는 경우 페이드 아웃효과를 ms만큼 준다.
- .hide(ms[, complete]) : 요소를 숨긴다.
- .show(ms[, complete]) : 요소를 보이게 한다.
- .toggle(ms[, complete]) : 숨겨진 요소는 보이게, 보이는 요소는 숨긴다.
- .slideDown(ms[, complete]) : 요소를 ms만큼 슬라이드효과로 보여지게 한다.
- .slideUp(ms[, complete]) : 요소를 ms만큼 슬라이드효과로 숨긴다.
- .slideToggle(ms[, complete]) : 숨겨져있는 경우 슬라이드다운, 보이는 경우 슬라이드업을 ms만큼 한다.
- .stop([clearQueue][,jumpToEnd]) : 선택된 요소가 애니메이션중인 경우 멈춘다. 매개변수의 기본값들은 false이다.
Manipulation : DOM요소 조작하기
Copying
- .clone() : 선택된 요소들을 복사한다. 자식요소들까지 복사한다. 매개변수로 true를 넘기면 이벤트,데이터도 복사하여 개별 이벤트로써 존재하게 된다. 2번째 매개변수로 true를 넘기면 이벤트, 데이터 복사 범위가 자식요소들까지 확장된다.
DOM Insertion
- .wrap() : 선택된 요소 각각을 감싸는 부모요소를 추가시킨다. 매개변수로는 HTML String, Element, jQuery가 올 수 있다.
- .unwrap() : 선택된 요소를 감싸는 부모요소를 제거한다.
- .wrapAll() : 선택된 요소들 전부를 감싸는 부모요소를 추가시킨다. 보통 선택된 요소들의 DOM의 깊이가 같아야하며, 만약 깊이가 다른 여러개가 선택된 경우 첫 요소의 깊이와 같은 단계로 다른 요소들이 옮겨져 wrap된다. 이 때 옮겨진 요소들의 자식요소들도 함께 옮겨진다.
- .wrapInner() : 선택된 요소의 자식요소들을 감싸는 요소를 추가시킨다.
- .append() : 선택된 요소에 매개변수로 전달된 요소를 자식요소로 끝에 추가시킨다.
- .appendTo() : 선택된 요소를 매개변수로 전달된 요소에 자식요소로 끝에 추가시킨다.
- .prepend() : 선택된 요소에 매개변수로 전달된 요소를 자식요소로 맨 앞에 추가시킨다.
- .prependTo() : 선택된 요소를 매개변수로 전달된 요소에 자식요소로 맨 앞에 추가시킨다.
- .after() : 선택된 요소의 뒤에 매개변수로 전달된 요소를 형제요소로 추가시킨다.
- .before() : 선택된 요소의 앞에 매개변수로 전달된 요소를 형제요소로 추가시킨다.
- .insertAfter() : 선택된 요소를 매개변수로 전달된 요소 뒷쪽에 형제요소로 추가시킨다. 이 때, 매개변수로 셀렉터가 아닌 jQuery객체를 넘기면 선택된 요소를 추가시키는게 아닌 이동시킨다. 만약 매개변수로 넘겨진 jQuery객체가 여러 집합인 경우에는 최초의 한개만 이동되고, 나머지는 복사시켜서 추가시킨다.
- .insertBefore() : insertAfter의 반대이다.
DOM Removal
- .detach() : 선택된 요소를 DOM에서 떼어낸다. 이는 데이터로 계속 존재함을 의미하고, 이 데이터로 다시 붙여넣을 수 있다. 이벤트와 jQuery data 역시 계속 존재한다.
- .remove() : 선택된 요소를 DOM에서 제거한다. 모든 이벤트와 jQuery data가 삭제된다.
- .empty() : 선택된 요소의 자식요소, 텍스트노드를 모두 제거한다.
- .unwrap() : 선택된 요소를 감싸는 부모요소를 제거한다.
DOM Replacement
- .replaceAll() : 셀렉터된 요소들을 선택된 요소로 대체한다.
- .replaceWith() : 선택된 요소들을 매개변수로 넘겨진 요소로 대체한다.
Event : 이벤트
앞서 알아야 할 점
- 최근의 jQuery에서는 이벤트를 .on 메서드로 리스너를 설정한다. 따라서 on으로 충분한 이벤트들은 따로 정리하지 않겠다.
- .on(events[, selector][, data], handler)
- events : 이벤트 이름. event.namespace 와 같은 형식으로 이벤트들에게 네임스페이스를 부여해, 나중에 네임스페이스에 존재하는 이벤트들을 한번에 제거할 수 있다.
- selector : 선택된 이벤트들 중에서도 셀렉터 요소들만 설정한다.
- data : handler의 매개변수로 넘겨지는 이벤트객체의 data로 넘긴다.
- handler : 이벤트 내용을 다룬다.
- .on({event1: handler1, event2: handler2...}) : 다수의 이벤트를 설정한다. 이를 통해 hover를 구현할 수 있다.
ex) .on({
'mouseenter': function () { ... },
'mouseleave': function () { ... }
});
- $(parent).on(events, selector[, data], handler) : 나중에 추가된 DOM요소 selector에 대한 이벤트리스너를 설정한다. 보통 그냥 .on으로 이벤트를 설정하면, 나중에 동적으로 생긴 DOM요소에 대한 이벤트는 작동하지 않는다. 리스너가 바인딩 될 때 없던 요소였기 때문이다. 따라서 parent 엘리먼트에 이벤트리스너를 설정하고, 이벤트가 발생했을 때 셀렉터된 요소를 검사하게 한다면 동적으로 생성된 DOM요소에 대해서도 이벤트를 작동하게 할 수 있다. bubbling에 의해 이벤트는 parent에 도달하기 때문이다.
- .off() : 셀렉터된 요소의 이벤트를 모두 제거한다.
- .off(events[, selector][, handler])
- events : 특정 events를 제거한다. 네임스페이스로 묶인 이벤트들을 제거할 때에는 '.namespace'를 넘긴다.
- selector: 셀렉터된 요소의 이벤트를 제거한다.
- handler: handler가 익명함수가 아니면 함수객체를 넘겨서 해제한다.