jQuery 강좌

• 기초
  • HTML 문서와 연결하는 방법, 사용하는 방법
  • jQuery.noConflict() / 다른 라이브러리, 다른 버전의 jQuery와 충돌 방지하기
• Reference
  • Selector
    • :button
    • :checked
    • :contains()
    • :empty
    • :even
    • :has()
    • :nth-child()
    • :odd
    • :selected
  • Method
    • .add()
    • .addBack()
    • .addClass()
    • .after()
    • .animate()
    • .append()
    • .appendTo()
    • .attr()
    • .before()
    • .children()
    • .click()
    • .clone()
    • .css()
    • .delay()
    • .detach()
    • .each()
    • .empty()
    • .fadeIn()
    • .fadeOut()
    • .fadeToggle()
    • .find()
    • .get()
    • .has()
    • .hide()
    • .hover()
    • .html()
    • jQuery.inArray()
    • jQuery.trim()
    • .load()
    • .not()
    • .offset()
    • .parent()
    • .prepend()
    • .prop()
    • .remove()
    • .removeAttr()
    • .removeClass()
    • .replaceWith()
    • .resize()
    • .scrollTop()
    • .slice()
    • .slideDown()
    • .slideToggle()
    • .slideUp()
    • .submit()
    • .text()
    • .toggle()
    • .toggleClass()
    • .width()
    • .unwrap()
    • .val()
    • .wrap()
    • .wrapAll()
  • Property
    • .length
• 실전 예제
  • 맨 위로 부드럽게 이동하는 링크 만들기
  • 선택한 요소의 가로 크기 가져오기
  • 체크박스 모두 선택, 모두 선택 해제 만들기
  • HTML 태그 바꾸기
  • meta 태그의 값 가져오기
  • 스크롤해도 상단에 고정되는 메뉴 만들기
  • 자식 요소의 개수를 기준으로 부모 요소 선택하기
  • 특정 요소를 자식 요소로 갖지 않는 요소 선택하는 방법
  • 요소가 순서대로 나타나게 하는 방법
  • 동적 셀렉트(select) 만드는 방법
  • input 값 변화 감지하기
• Plugin & Library
  • 유용한 플러그인 모음
  • bxSlider / 슬라이더 플러그인
  • slick / 슬라이더 플러그인
  • jquery.mb.YTPlayer / 유튜브 영상을 배경으로 사용하게 해주는 플러그인
  • jquery.toc / H 태그로 목차 만드는 플러그인
  • jquery.toc / H 태그로 목차 만드는 플러그인 - 클릭 시 부드럽게 이동
  • jQuery Smooth Scroll
  • AOS / 스크롤하면 애니메이션 효과와 함께 나타나는 요소 만드는 라이브러리