JQuery
Element를 선택하는 강력한 방법과
선택된 Element들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는
JS Library
HTML에서 태그(Tag)와 요소(Element)는 대부분 구별없이 사용한다. 허나 정확하게 구별하는 것이 좋은 듯 하다. 태그(Tag)는 단지 열기 태그와 닫기 태그 그 자체를 의미하며 요소(Element)는 해당 태그와 그 내용(자식)을 포함한 전체를 의미한다.
JQuery를 삽입하는 방법
JQuery 소스 다운로드
링크 복사해서 적용
문법 (제어대상).method1(0.method2();(제어대상) : 주어
method1(). ~ : 서술어 ('.anyClass').html('hello!'); 메소드 체이닝이 가능하다. 인간의 문법과 비슷하다. Wrapper : jQuery(element object|’CSS style 선택자’) ( = $(element object|’CSS style 선택자’)) jQuery로 wrap함으로서 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환 가능.를 사용할 경우 외부 라이브러리와의 충돌을 피하기 위해 jQuery라는 이름을 쓰거나 함수의 인자로 $를 선언해주기도 한다.
test2
test
자바의 스트림같은 느낌
Chaining → Traversing
$(~).method1.methode2. ~ .end()
end() 메소드를 호출함으로서 다시 엘리멘트 객체를 가리키게 된다.
선택자
jQuery wrapper에는 CSS 선택자가 위치할 수 있는데, 이를 통해서 제어하려는 엘리먼트를 빠르고 정확하게 지정할 수 있다.
Event
클릭, 마우스 이동, 타이핑, 페이지 로딩등
이벤트 핸들러
bind, unbind(=die), trigger
bind(이벤트타입, 행동) 으로 이벤트 컨트롤러를 하는 방법
trigger(이벤트타입) : Execute all handlers and behaviors attached to the matched elements for the given event type.
unbind : 이벤트 제거
이벤트 헬퍼 : 좀더 간결하고 편하다.
Element Control
자식으로 삽입 ( 태그 아래 )
.append(), .appendTo(), .html(), .prepend(), .prependTo(), .text()
형제로 삽입 ( 태그 )
.after(), .before(), .insertAfter(), .insertBefore()
부모로 감싸기
.unwrap(), .wrap(), .wrapAll(), .wrapInner()
삭제
.detach(), .empty(), .remove(), .unwrap()
치환
.replaceAll(), .replaceWith()
클래스
.addClass(), .hasClass(), .removeClass(), .toggleClass()
속성 제어
.attr(), .prop(), .removeAttr(), .removeProp(), .val()
FORM