this

this의 용법

• 여러개의 요소를 의미하는 css셀렉터를 사용하여 이벤트를 정의한 경우, 대상 요소들은 모두 동일한 이벤트를 발생시킬 수 있다.

• 이 때, $(this)는 현재 이벤트가 발생한 단 하나의 요소를 가리킨다.

this를 부정하는 not(this)

• $("요소") 객체의 not(this)함수는 여러 HTML요소들 중, 이벤트가 발생한 자신을 제외한 나머지 객체들을 가리킨다.

• not()함수의 기능은 "~중에서 대상은 제외"라는 의미

• ".btn"클래스를 갖는 요소중에서 "#mybtn"만 제외

  let mybtn = $("#mybtn");
  $(".btn").not(mybtn).css(...);
  -------------------------------
  $(".btn").not($("#mybtn")).css(...);

애니메이션

Each

• each() 메소드는 객체나 배열에서 모두 사용할 수 있는 범용적인 반복 함수이다.

• length 속성이 있는 배열이나 배열과 같은 객체를 전달받아, 그 길이만큼 반복해서 콜백함수를 실행한다.

• 객체의 경우는 객체가 가지고 있는 프로퍼티의 개수만큼 반복해서 콜백함수를 실행한다.

$.each(object, function(index, item){}};

object : 배열을 전달
        콜백함수 : index는 배열에서는 인덱스 값을 의미
                  item은 해당 인덱스가 가진 값을 의미

<예제>

1

2

3

4

5

6

엘리먼트 제어

자식으로 삽입

• append(), appendTo(), html(), prepend(), prependTo(), text()

형제로 삽입

• after(), before(), inserAfter(), insertBefore()

부모로 감싸기

• unwrap(), wrap(), wrapAll(), wrapInner()

삭제

• detach(), empty(), remove(), unwrap()

(클릭전)

(클릭후)

치환

• replaceAll(), replaceWith()

-> 얘는 조금 특이하게 타겟이 앞이 아닌, 뒤에 존재한다.

클래스

• addClass(), hasClass(), removeClass(), toggleClass()

속성제어

• attr(), prop(), removeAttr(), removeProp(), val()