[펌]jQuery in Action 정리 9장 - 강력하고 실용적이며 유명한 플러그인

9.1 Form 플러그인

9.1.1 폼 컨트롤 값 가져오기

• 컨트롤 값 가져오기
  • fieldValue() - 확장 집합 내의 모든 전송 가능한 폼 컨트롤이 가진 값의 배열을 변환한다.
  • val() - 확장 집합내의 첫번째 전송 가능 폼 컨트롤 엘리먼트 값을 반환한다.
  • $(#testForm *').fieldValue()
  • $(#testForm *').fieldValue(false) - 전송 불가능한 컨트롤 제외하지 않음
• 컨트롤 값 직렬화하기
  • 인코딩된 쿼리문자열로 만든다
  • formSerialize() - 확장집합내의 폼을 받아서 폼에 있는 전송 가능한 자식 컨트롤의 값을 모두 직렬화
  • fieldSerialize() - 확장집합내의 모든 컨트롤을 직렬화
  • $('#testForm').formSerialize()

9.1.2 폼 컨트롤의 값 지우고 재설정하기

• clearForm() - 텍스트, 패스워드, 텍스트 영역 지운다. <select>엘리먼트 선택 취소, 체크박스 라디오버튼 해제
• resetForm() - HTML 마크업 지정값으로 되돌림 (reset() 메서드 호출)

9.1.3 Ajax를 사용하여 폼 값 전송하기

• Form플러그인의 formSerialize()메서드와 코어 Ajax함수를 조합하면 된다.
• Form플러그인의 ajaxSubmit()커멘드를 쓰면 Ajax를 통한 전체 폼 전송이 더 쉽다.
• $('#targetForm').ajaxSubmit(); - 폼 전송
• $('#targetForm').ajaxSubmit(function(response){

      /* response와 함께 어떠한 작업 처리 */

});

• ajaxForm() - 일반적인 의미의 이벤트로 발생한 폼 전송을 막고 요청을 모방하는 Ajax요청을 전송한다.
• ajaxFormUnbind() - 폼이 일반적인 방식으로 전송될 수 있도록 화장 집합내의 폼에 전용된 기능을 제거한다.

9.1.4 파일 전송하기

• Form플러그인은 file타입 입력 엘리먼트에 명시된 파일을 업로드하는 폼을 알아서 식별하고 처리한다.

9.2 Dimensions 플러그인

9.2.1 width height 메서드 확장하기

9.2.2 스크롤 크기 얻어내기

9.2.3 오프셋과 위치

9.3 Live Query 플러그인

• 셀렉터와 일치하는 엘리먼트에 이벤트 핸들러를 할당한다.
• 어떠한 엘리먼트가 셀렉터와 일치할 때 실행될 함수를 호출한다.
• 더는 어떠한 엘리먼트 셀렉터와 일치하지 않을 때 실행될 함수를 호출한다.

9.3.1 이벤트 핸들러 미리 할당하기

9.3.2 일치리스너와 불일치 리스너 정의하기

9.3.3 Live Query를 강제로 적용하기

9.3.4 Live Query 리스너 제거하기

9.4 UI 플러그인 소개

9.4.1 마우스 상호작용

• draggable(options)
• ui.mouse.js, ui.draggable.js를 포함 해야 한다.
• ui.draggable.ext.js 확장 옵션을 위해서 포함해야 함
• $('#testSubject').draggable({});

9.4.2 위짓과 시각효과

• 상세 내용은 http://docs.jquery.com/ui를 참조