[LearningJS] jQuery

jQuery

• jQuery 에서는 브라우저가 페이지를 완전히 읽고 DOM을 구축한 다음에만 호출되는 콜백 안에 코드를 작성한다.

  • 브라우저가 DOM을 구축하기 전에 요소에 접근하는 문제를 회피하기 위함

• jQuery 로 DOM을 조작할 때 가장 많이 쓰이는 방법은 jQuery로 DOM 요소를 감싸는 방법이다.

• jQuery 함수($ 또는 jQuery)로 DOM 요소 셋을 감싼 것을 jQuery 객체라고 부른다.

• jQuery 함수를 호출할 때는 주로 CSS 선택자 또는 HTML을 이용한다.

• CSS 선택자로 jQuery를 호출하면 해당 선택자에 일치하는 jQuery 객체가 반환된다.

  • javaScript 에서 document.querySelectorAll이 반환하는 컬렉션과 비슷하다.

• HTML로 jQuery를 호출하면 그에 맞는 DOM 요소가 새로 만들어진다.

  • javaScript 에서 innerHTML 프로퍼티를 조작했을 때와 비슷하다.

• jQuery로 요소를 조작하는 메소드

  • .text() : 텍스트를 바꾼다.
    • JS의 textContent 프로퍼티와 비슷하다.
  • .html() : DOM을 수정한다.
    • JS의 innerHTML 프로퍼티와 비슷하다.
  • .eq(index) : 단일 요소를 바꾼다.
    • 인수로 받아온 index 번째의 요소만 선택한다.
  • .remove() : 요소를 제거한다.
  • .append() : 매개변수로 넘긴 콘텐츠를 이어붙인다.
    • 일치하는 요소에 자식으로 추가한다.
  • .before() / .after() : 형제레벨 요소를 삽입한다.
  • .appendTo() / .insertBefore() / .insertAfter() : 삽입할 요소에서 호출한다.
  • addClass() / .removeClass() : 클래스 추가 / 제거
  • .toggleClass() : 요소에 특정 클래스가 없으면 추가, 있으면 제거한다.
  • .filter() : 선택자에 맞는 요소만 남도록 선택 범위를 줄인다.
  • .not() : 선택된 요소가 없는 요소만 선택한다.
  • .find() : 주어진 선택자에 일치하는 자손만 남긴다.
  • .get(index) : index 번째 요소에 접근한다.
    • DOM API 요소에 직접 접근한다.

  ** :odd / :even - 홀수 / 짝수 번째 요소에 접근하기 위해 CSS 선택자에 붙여서 사용한다.