jQuery 강좌

• 기초
  • HTML 문서와 연결하는 방법, 사용하는 방법
  • jQuery.noConflict() / 다른 라이브러리, 다른 버전의 jQuery와 충돌 방지하기
• Reference
  • Selector
    • :button - type이 button인 요소를 선택하는 선택자
    • :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자
    • :empty - 내용이 없는 빈 요소를 선택하는 선택자
    • :even - 짝수 인덱스 요소를 선택하는 선택자
    • :has() - 특정 요소를 포함하는 요소를 선택하는 선택자
    • :nth-child() - 형제 요소 중 an+b번째 요소들을 선택하는 선택자
    • :odd - 홀수 인덱스 요소를 선택하는 선택자
  • Method
    • .add() - 요소를 추가로 선택하는 메서드
    • .addBack() - 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하는 메서드
    • .addClass() - 클래스 값을 추가하는 메서드
    • .after() - 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드
    • .animate() - 애니메이션 효과 만드는 메서드
    • .append() - 선택한 요소의 내용의 끝에 콘텐트를 추가하는 메서드
    • .appendTo() - 선택한 요소를 다른 요소 안에 넣는 메서드
    • .attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드
    • .before() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드
    • .children() - 어떤 요소의 자식 요소를 선택하는 메서드
    • .click() - 선택한 요소를 클릭했을 때 특정 작업을 하는 메서드
    • .clone() - 선택한 요소를 복제하는 메서드
    • .css() - 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가하는 메서드
    • .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드
    • .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드
    • .each() - 선택한 요소 각각에 대하여 함수를 실행시키는 메서드
    • .empty() - 선택한 요소의 내용을 지우는 메서드
    • .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드
    • .fadeOut() - 선택한 요소를 서서히 사라지게 하는 메서드
    • .fadeToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드
    • .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드
    • .get() - 선택한 요소를 배열로 가져오는 메서드
    • .has() - 특정 요소를 가지고 있는 요소를 선택하는 메서드
    • .hide() - 선택한 요소를 사라지게 하는 메서드
    • .hover()
    • .html() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드
    • jQuery.inArray()
    • jQuery.trim() - 문자열에 있는 공백(whitespace)을 제거하는 메서드
    • .load()
    • .not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메서드
    • .offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시키는 메서드
    • .parent() - 부모 요소 선택하는 메서드
    • .prepend() - 선택한 요소의 내용의 앞에 콘텐트를 추가하는 메서드
    • .prop() - 속성값을 가져오거나 추가하는 메서드
    • .remove() - 선택한 요소를 제거하는 메서드
    • .removeAttr() - 선택한 요소의 특정 속성을 제거하는 메서드
    • .removeClass() - 선택한 요소의 클래스 값을 제거하는 메서드
    • .replaceWith() - 선택한 요소를 다른 것으로 바꾸는 메서드
    • .resize() - 윈도우 크기 변할 때 어떤 작업하기
    • .scrollTop() - 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정하는 메서드
    • .slice() - 일치하는 요소의 일부분만 선택하는 메서드
    • .slideDown() - 요소를 아래쪽으로 나타나게 하는 메서드
    • .slideToggle()
    • .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드
    • .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드
    • .toggle() - 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 하는 메서드
    • .toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드
    • .width() - 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경하는 메서드
    • .unwrap() - 선택한 요소의 상위 태그를 제거하는 메서드
    • .val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드
    • .wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드
    • .wrapAll() - 선택한 요소 모두를 새로운 태그로 감싸는 메서드
  • Property
    • .length - 선택한 요소의 개수를 반환하는 속성
• 실전 예제
  • jQuery / 맨 위로 부드럽게 이동하는 링크 만들기
  • jQuery / 선택한 요소의 가로 크기 가져오기 - width, innerWidth, outerWidth
  • jQuery / 체크박스 모두 선택, 모두 선택 해제 만들기
  • jQuery / HTML 태그 바꾸기
  • jQuery / meta 태그의 값 가져오기
  • jQuery / 스크롤해도 상단에 고정되는 메뉴 만들기
  • jQuery / 자식 요소의 개수를 기준으로 부모 요소 선택하기
  • jQuery / 특정 요소를 자식 요소로 갖지 않는 요소 선택하는 방법
  • jQuery / 요소가 순서대로 나타나게 하는 방법
• Plugin
  • 유용한 플러그인 모음
  • jquery.mb.YTPlayer / 유튜브 영상을 배경으로 사용하게 해주는 플러그인
  • jquery.toc / H 태그로 목차 만드는 플러그인
  • jquery.toc / H 태그로 목차 만드는 플러그인 - 클릭 시 부드럽게 이동
  • jQuery Smooth Scroll
  • AOS / 스크롤하면 애니메이션 효과와 함께 나타나는 요소 만드는 라이브러리