20220310 JSON, jQuery

jQuery

• 크로스 플랫폼을 지원하며 어떠한 브라우저에서도 동일하게 동작
• 다운받아서 사용하거나, 사이트를 <script>를 이용하여 import함
• Selector를 사용하여 DOM 객체를 탐색하고, 반환된 래퍼세트를 통해 함수를 수행
• Selector 표현식과 Action 메소드를 조합한 형태로 작성 ex) $(selector).action();
• DOM 조작, Ajax 지원 등을 쉽고 빠른 개발을 지원
• 래퍼세트 객체는 메소드 체인을 제공하여, 메소드 호출에서의 반복적인 코딩을 줄임

Dom 탐색

• jQuery는 DOM 탐색을 위해 CSS에서 사용하는 Selector 표현 방식을 사용
• CSS 문법을 확장해서 태그를 찾는 selector 제공
• jQuery function의 기본 형식
  • $ (”h1”) . css(”color”, “blue”);
  • $ = jQuery, (”h1”) = selector, cee(”color”, “blue”) = function

Element Selector

• All Selector : $(”*”)
• Id Selector : $(”#id”)
• Element selector : $(”elementName”)
• Class selector : $(”.className”)
• Multiple selector : $(”selector1, selector2, selector3,....”)

DOM Hierarchy Selector

• $(”Parent > Child”) : 바로 인접한 하위 자식들
• $(”Ancestor Descendant”) : 모든 하위 자식들
• $(”Previous + Next”) : 인접한 바로 다음 형제
• $(”Previous ~ Next”) : Next에 대한 모든 형제들

Attribute Selector

• $(selector[attr]) : attr을 속성값으로 가지는 객체
• $(selector[attr=”value”]) : attr의 속성값이 value인 객체
• $(selector[attr!=”value”]) : attr의 속성값이 value아닌 객체
• $(selector[attr~=”value”]) : attr의 속성값이 공백과 함께 value을 포함하는 객체
• $(selector[attr^=”value”]) : attr의 속성값이 value로 시작하는 객체
• $(selector[attr$=”value”]) : attr의 속성값이 value로 끝나는 객체
• $(selector[attr*=”value”]) : attr의 속성값이 value를 포함하는 객체

Filter selector

• :first : 첫 번째 요소
• :last : 마지막 요소
• :first-child : 첫 번째 자식 요소
• :last-child : 마지막 자식 요소
• :only-child : 형제가 없는 모든 요소
• :even : 짝수 번째 요소
• :odd : 홀수 번째 요소

요소 반복

• jQuery.each() 함수는 배열이나 객체를 반복적으로 처리할 때 사용
• $.each(array, functon(index, item){ });

jQuery DOM Event 처리

• jQuery Event 처리
  • click 함수로 클릭 이벤트 처리
  • bind, on 함수를 이용한 모든 이벤트 처리
  • unbind, off 함수를 이용하여 이벤트 제거
• Window Event
  • ready : DOM 객체가 준비되면 발생
  • load : 윈도우를 불러들일 때 발생
  • unload : 윈도우가 닫힐 때 발생
  • resize : 윈도우 크기가 변화될 때 발생
  • scroll : 윈도우 스크롤을 할 때 발생
  • error : 에러가 있을 때 발생