JQuery

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

탐색

.add(selector)

엘리먼트를 추가한다

.andSelf()

현재 엘리먼트 셋에 이전 엘리먼트 셋을 더 한다

.children([selector])

자식 엘리먼트를 선택한다

.closest(selector)

가장 가까운 selector 조상 엘리먼트를 탐색한다

.each(function(index,Element))

현재 엘리먼트 셋에 반복 작업을 실행한다

.end()

이전 체인 컨텍스트로 돌아간다.

.eq(index)

현재 엘리먼트 셋에서 index에 해당하는 엘리먼트를 선택한다

.filter(selector)

현재 엘리먼트 셋에서 selector에 해당하는 엘리먼트를 선택한다

.find(selector)

현재 엘리먼트 셋에서 selector에 해당하는 자손 엘리먼트를 선택한다

.first()

현재 엘리먼트 셋 중 첫번째 엘리먼트를 선택한다

.last()

현재 엘리먼트 셋 중 마지막 엘리먼트를 선택한다

.next()

각각의 엘리먼트에 대한 다음 형재 엘리먼트를 선택한다

.nextAll()

각각의 엘리먼트에 대한 다음 형재 엘리먼트 전부를 선택한다

.prev()

각각의 엘리먼트에 대한 이전 형재 엘리먼트를 선택한다

.prevAll()

각각의 엘리먼트에 대한 이전 형재 엘리먼트 전부를 선택한다

.siblings()

각각의 엘리먼트에 대한 형재 엘리먼트 전부를 선택한다

.slice(start, [end])

현제의 엘리먼트 셋 중 start에서 end까지의 엘리먼트를 선택한다