jQuery

jQuery

• HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리
• 크로스 플랫폼을 지원(어느 브라우저에서도 동일한 동작 보장)
• 네이티브 DOM API보다 직관적이고 편리한 API 제공, 개발 속도 향상
• 이벤트 처리, Ajax, 애니메이션의 쉬운 사용
• 다양한 Effect 함수 제공
• 기본 구문은 Selector를 사용하여 DOM 객체를 탐색, 반환된 래퍼 세트를 통해 함수 수행
• Selector 표현식과 Action 메서드를 조합한 형태로 사용
• jQuery로 DOM 탐색 전 웹 브라우저에 모든 문서가 로딩되어 있어야 함.
• 기존의 window.onload와 같은 document ready 이후 처리 방법을 두 가지로 제공

$(document).ready(function () {
});

$(function () {
});

• DOM(Document Object Model): HTML, XML 문서의 구조를 정의하고 API를 제공
• jQuery에서는 DOM 탐색을 위해 CSS Selector 표현 사용
• DOM 탐색 결과로 jQuery는 Wrapper Set 객체 반환
• 전체 선택: $(”*”)
• 아이디 선택: $(”#아이디”)
• 엘리먼트 선택: $(”엘리먼트 이름”) → 가장 빨리 탐색할 수 있다. “태그이름#아이디” 형식으로 특정 태그를 지정할 수 있다. ‘,’로 여러개를 적을 수 있다.
• 클래스 선택: $(”.클래스 이름”) → 클래스 속성이 2개 이상인 경우 그냥 이어서 바로 적는다. “.클래스이름1.클래스이름2”. 이럴 경우 AND 조건이 적용된다.
• 다중 선택: $(”선택자1, 선택자2, …”)
• 자식 선택: $(”부모 > 자식”)
• 자손 선택: $(”조상 자손”)
• 다음 인접 형제: $(”이전 + 다음”)
• 다음 모든 형제: $(”이전 ~ 다음”)

속성 선택자

• $(selector[속성값]): 속성값을 가지는 문서 객체

• $(selector[속성값=”value”]): 속성값이 value와 같은 문서 객체

• ≠ → 같지 않음, ~= → 공백과 함께 value를 포함(단어 단위), ^= → value로 시작, $= → value로 끝, *= → value를 포함

  	💡 nth-* 계열은 CSS에서 가져온 것으로 n값은 0부터 시작, 그러나 1이 첫번째 요소
  	💡 eq(), gt(), lt() 등은 n값이 0부터 시작, 0이 첫번째 요소

• $.each((배열이나 래퍼세트), function(인덱스, 엘리먼트) {} );

• $선택자.each(function(인덱스, 엘리먼트) {} ); → 특정 선택자

jQuery Event

• 이벤트 핸들러를 할당, 해제할 수 있는 통합 메서드 제공
• 표준 이벤트 타입명 사용
• bind(): 선택된 DOM 객체의 이벤트에 지정한 핸들러를 연결 → 동적으로 생성한 DOM 객체에는 적용되지 않음
• bind(이벤트 타입, 데이터, 리스너)
• unbind(): 객체 이벤트에서 지정한 핸들러를 지움
• on(): bind()와 마찬가지로 DOM 객체에 이벤트 핸들러 연결
  • delegate 방식으로 사용할 경우 현재 존재하는 DOM 객체 뿐 아니라 동적으로 생성한 DOM 객체에도 적용 가능(대리자)
• off(): on()과 반대로 DOM 객체의 이벤트 제거