Jquery핵심노토

jQuery 핵심노트

하드코딩하는사람들 - 야쿠

jQuery introduction

하드코딩하는사람들 - 야쿠 ([email protected])

-

Introduction

• 오픈소스, 일반 공개 라이선스 ( MIT & GPL )

• W3C 명세를 수용하며, CSS3 셀렉터 대부분을 지원 함

• 브라우저에서 개발을 위한 테스트 및 최적화를 수행 함

• 체인 연결 패턴

• 다양한 jQuery 플러그인들이 존재 한다.

• 빠르게 배울 수 있다.

이래서 jQuery 를 사용해야 한다.


-

Introduction

좀


-

Introduction

• Write less, do more ( 적게 작성하고, 보다 많이 한다. )

jQuery 철학


-

Introduction


• 몇몇 요소 (Dom Elements) 를 찿아서 어떤 작업을 작성한다.

jQuery 철학


-

Introduction



• 요소의 집합에 대해 여러 메서드를 체인으로 연결한다.

jQuery 철학


-

Introduction



• 요소의 집합에 대해 여러 메서드를 체인으로 연결한다.

• jQuery Wrapper Set을 암시적인 반복을 통해 사용한다.

jQuery 철학


-

Introduction

• 테이블들에 홀수열 tr 에 클래스명 odd 추가하기

– Javascript

– jQuery

Write less, do more Example

jQuery('table tr:nth-child(odd)').addClass('odd');

jQuery core


-

Core

• jQuery( selector, [ context ] )

– Css 선택자를 이용하여 요소를 탐색한다.

– Selector Context

• 검색 범위를 현재 문맥 범위로 좁혀서 사용할 수 있다.

jQuery()


-

Core

• jQuery( element ), jQuery( elementArray )

– Dom 요소를 jQuery Object 반환한다.

• this를 참조하여 jQuery객체로 반환하여 사용할 수 있다

• ajax 를 통해 받은 XML 문서를 $에 넘겨서 사용할 수 있다.

jQuery()


-

Core

• jQuery( jQuery object )

– 존재하는 jQuery Object 복제한다.

• jQuery()

– Returning an Empty Set

– .length 가 0 인 빈 객체를 반환한다.

jQuery()


-

Core

• jQuery ( html, [ ownerDocument] )

– HTML 문자열을 인수로 받으면 새로운 요소를 생성한다.

– 입력된 문자열에 따라 jQuery 내부적으로 createElement나 innerHTML 을 사용해서 문서에 적용하게 된다.

– Html, title, head 등의 요소는 브라우저에 따라서 누락될 수 있다.

– 입력하는 HTML 의 문법은 브라우저 호환성을 위해서 정확히 지켜져야 한다.

jQuery()


-

Core

• jQuery ( html, props )

– 새로운 요소를 생성하고 속성을 정의한다.

jQuery()


-

Core

• jQuery ( callback )

– $(document).ready() 와 같이 Dom 이 완료될 때 까지 기다렸다가 콜백 함수를 실행한다.

jQuery()


-

Core

• 대부분의 jQuery 메서드는 jQuery 객체를 반환한다.

Chaining


-

Core

• 속성 Setting

• Getter & Setter ( attr, html, text, val )

• 속성의 추가, 제거

Attribute

jQuery selectors

http://codylindley.com/jqueryselectors/

http://codylindley.com/jqueryselectors


-

Selector

• Css1-3의 셀렉터를 빌려와 사용하여 강력한 셀렉터를 제공한다.

– All Selector( “*” )

– Class Selector( “.class” )

– Element Selector( “element” )

– ID Selector( “#id” )

– Multiple Selector( “selector1, selector2, selectorN”)

Basic


-

Selector

• $(li[class]’)

– Li 요소 중에 클래스 속성을 가진 요소를 선택

• $(‘a[rel=“self”]’)

– A 요소 중에 rel 속성 값이 self 와 같은 요소를 선택

• $(‘a[rel!=“nofollow”]’)

– A 요소 중에 rel 속성 값이 nofollow와 다른 요소를 선택

• $(‘[class^=“my”]’)

– Class 속성을 갖고, 값의 시작이 my인 요소를 선택

• $(‘a[title$=“blog”]’)

– A 요소 중에 title 속성을 갖고, 값의 끝이 blog인 요소를 선택

Attribute


-

Selector

• $(‘a[href*=“zip”]’)

– A 요소 중에 href 속성을 갖고, 값이 zip을 포함하는 모든 값을 요소를 선택

• $(‘a[rel][href][title$=“blog”]’)

– A 요소 중에 rel, href, title 속성을 갖고, title 속성 값의 마지막 blog를 포함하는 요소를 선택

• $(‘a[rel|=“en”]’)

– A 요소 중에 rel 속성을 갖고, 값의 prefix 가 en인 값을 선택

• $(‘input[name~=“man”]’)

– <input name=“milk man” />

Attribute


-

Selector

• $(‘div code’)

• $(‘li > ul’)

• $(‘strong + em’)

– Strong 다음에 인접한 em 요소로를 선택

– Next Adjacent Selector(“prev + next”)

• Prev 다음에 인접한 next 요소를 선택

• $(‘strong ~ em’)

– Strong 이후에 나오는 em 요소를 선택

Hierarchy


-

Selector

• $(‘li:first’)

• $(‘li:last’)

• $(‘li:not(li:first)’)

• $(‘li:even’)

• $(‘li:odd’)

• $(‘li:eq(1)’)

• $(‘li:gt(2)’)

• $(‘li:lt(2)’)

• $(‘:header’)

• $(‘:animated’)

Basic Filters


-

Selector

• $(‘li:contains(second-level)’)

• $(‘:empty’)

• $(‘li:has(a)’)

• $(‘p:parent’)

Content Filters


-

Selector

• $(‘:hidden’)

• $(‘:visible’)

Visibility Filters


-

Selector

• $(‘li:nth-child(even)’)

• $(‘li:nth-child(odd)’)

• $(‘li:nth-child(2)’)

• $(‘li:nth-child(2n)’)

• $(‘li:first-child’)

• $(‘li:last-child’)

• $(‘code:only-child’)

Child Filters


-

Selector

Forms

• $(‘:input’)

• $(‘:text’)

• $(‘:password’)

• $(‘:radio’)

• $(‘:checkbox’)

• $(‘:submit’)

• $(‘:image’)

• $(‘:reset’)

• $(‘:button’)

• $(‘:file’)

• $(‘:hidden’)


-

Selector

Form Filters

• $(‘input:enabled’)

• $(‘:disabled’)

• $(‘:checked’)

– $(“:input:radio[name=sample]:checked”).val();

• $(‘:selected’)


-

Selector

Custom Filter and Selector

• jQuery.expr[:] 개체로 만들 수 있다.

jQuery traversing


-

Traversing

• .children()

– 자식요소를 취한다. 셀렉터를 추가로 명시할 수 있다.

Tree Traversal


-

Traversing

• .siblings()

– 형제 요소를 취한다.

– 퀴즈) 위 결과는?

Tree Traversal


-

Traversing

Tree Traversal

• .closest()

– 현재 요소를 포함해서 셀렉터에 해당하는 가까운 조상 요소를 취한다.

• .find()

– 자손 요소 중에 셀렉터, jQuery 객체, Dom 요소에 해당하는 요소를 취한다.


-

Traversing

Tree Traversal

• .next()

– 다음에 오는 요소를 취한다.

• .nextAll()

– 다음에 오는 모든 요소를 취한다.

• .nextUntil()

– 셀렉터에 해당하는 요소 전까의 다음 요소를 취한다.


-

Traversing

Tree Traversal

• .prev()

– 이전에 오는 요소를 취한다.

• .prevAll()

– 이전에 오는 모든 요소를 취한다.

• .prevUntil()

– 셀렉터에 해당하는 요소전까지의 이전 요소를 취한다.


-

Traversing

Tree Traversal

• .parent()

– 부모 요소를 취한다.

• .parents()

– 루트 요소 까지의 모든 부모 요소를 취한다.

• .parentsUntil()

– 셀텍터와 매칭되는 요소 전까지의 조상 요소를 취한다.

• .offsetParent()

– 위치가 지정된 가장 가까운 조상 요소를 취한다.


-

Traversing

Filtering

• .eq()

– N 번째 요소를 취한다.

• .first()

– 첫 번째 요소를 취한다.

• .last()

– 마지막 요소를 취한다.

• .slice()

– 시작과 끝 사이에 해당하는 요소를 취한다.


-

Traversing

Filtering

• .has()

– 셀렉터에 해당되는 요소나 해당 Dom 요소를 가지고 있는 요소를 취한다.

• .not()

– 해당되는 요소를 제외한다.

• .is()

– 현재 요소들이 셀렉터나 요소, jQuery 객체에 해당하는지를 확인한다.


-

Traversing

Filtering

• .map()

– 현재 선택된 요소들을 콜백함수에 보내서 새로운 jQuery 객체를 반환한다.

• .filter()

– 셀렉터나 함수, jQuery 객체, 요소에 해당하는 요소를 취한다.


-

Traversing

Miscellaneous Traversing

• .add()

– 인수의 요소가 추가된 jQuery 객체를 반환한다.

• .end()

– 최근 필터링 결과를 끝내고 체인을 이전 상태로 되돌린다.


-

Traversing


• .contents()

– 안에 포함하고 있는 자식들을 가져온다. .children()과 유사하지만 .contents()는 텍스트 노트도 같이 포함한다.


-

Traversing


• .andSelf()

– 이전 체이닝 스택과 자기 자신을 합친다.

jQuery mainpulation

http://codylindley.com/jquerymanipulation/



-

Manipulation

• .attr()

– HTML 속성 값을 취하거나 추가, 변경한다.

– Json 객체를 사용하여 여러 속성을 동시에 적용 할 수 있다.

• .removeAttr()

– HTML 속성을 지운다.

General Attributes


-

Manipulation

General Attributes

• .prop() ( jQuery 1.6 이상 )

– 집합( selectbox, checkbox)등의 속성값을 취하거나 추가, 변경한다.

• .removeProp()

– 속성값을 지운다.


-

Manipulation

General Attributes

• .val()

– 값을 얻거나, 변경한다.


-

Manipulation

Class Attributes

• .addClass()

– 클래스를 (class) 를 추가한다.

• .removeClass()

– 한 개 또는 여러 개의 클래스를 지운다.

• .hasClass()

– 클래스가 지정되어 있는지를 확인한다. boolean


-

Manipulation

Class Attributes

• .toggleClass()

– 현재 클래스명에 따라 지우거나 추가한다.


-

Manipulation

DOM Insertion, Inside

• .text()

– 텍스트 내용을 취하거나 추가, 변경한다.

• .html()

– HTML 내용을 취하거나 추가, 변경한다.


-

Manipulation


• .prepend()

– 인수를 jQuery 객체 시작 지점에 자식 노드로 추가한다.

• .prependTo()

– jQuery 객체를 인수의 시작 지점에 자식 노드로 추가한다.


-

Manipulation


• .append()

– 인수를 jQuery 객체의 끝나는 지점에 자식 노드로 추가한다.

• .appendTo()

– jQuery 객체를 인수의 끝나는 지점에 자식 노드로 추가한다.


-

Manipulation

DOM Insertion, Outside

• .before()

– 인수를 jQuery 객체의 이전에 형제 노드로 추가한다.

• .insertBefore()

– jQuery 객체를 인수의 이전에 형제 노드로 추가한다.


-

Manipulation

DOM Insertion, Outside

• .after()

– 인수를 jQuery 객체의 이후에 형제 노드로 추가한다.

• .insertAfter()

– jQuery 객체를 인수의 이후에 형제 노드로 추가한다.


-

Manipulation

DOM Removal

• .remove()

– DOM 요소를 삭제한다.

• .detach()

– DOM 에서 요소를 삭제한다. 데이터가 유지되기 때문에 저장했다가 다른 곳에 사용할 수 있다.

• .empty()

– DOM에서 자식 요소를 모두 삭제한다.


-

Manipulation

DOM Replacement

• .replaceWith()

– 인수의 요소로 jQuery 객체를 대체한다

• .replaceAll()

– jQuery 객체로 인수의 요소를 대처한다.


-

Manipulation

DOM Insertion, Around

• .wrap()

– 감싸는 요소를 추가한다.

• .wrapAll()

– 전체 감싸는 요소를 추가한다.


-

Manipulation

DOM Insertion, Around

• .unwrap()

– 감싸고 있는 부모 요소를 제거한다.

• .wrapInner()

– 내부의 콘텐츠를 감싸는 요소를 추가한다.


-

Manipulation

Copying

• .clone()

– 요소를 복제한다.

• .clone( true )

– 요소와 이벤트를 같이 복제한다.


-

Manipulation

Style Properties

• .css()

– 스타일 속성에 따른 값을 취하거나 추가, 변경한다.

– 높이 등을 취할 때에도 단위 같이 반환한다.

– index를 취해 함수를 사용할 수 있다.


-

Manipulation

Style Properties

• .height()

– 요소의 높이를 취하거나 설정한다.

• innerHeight()

– 패딩 영역을 포함한 요소의 내부 높이를 취한다.

• outerHeight(), outerHeight( true )

– 패딩, 보더 영역을 포함한 요소의 외부 높이를 취한다.

– 마진 영역 포함을 선택할 수 있다.


-

Manipulation

Style Properties

• .width()

– 요소의 너비를 취하거나 설정한다.

• .innerWidth()

– 패딩 영역을 포함한 요소의 내부 너비를 취한다.

• .outerWidth()

– 패딩, 보더 영역을 포함한 요소의 외부 너비를 취한다.


-

Manipulation

Style Properties

• .position()

– 부모 요소로 부터의 위치 값을 취한다.

• .offset()

– 문서로부터의 위치 값을 취한다.


-

Manipulation

Style Properties

• .scrollLeft()

– 좌우 스크롤 바의 위치를 취한다.

• .scrollTop()

– 상하 스크롤 바의 위치를 취한다.

jQuery event


-

Event

• 이벤트가 발생할 때 실행 될 함수를 지정한다.

Event Handling


-

Event

• 이벤트 전파

– 계층적 구조의 포함되어 있는 특정 엘리먼트에 이벤트가 발생할 경우, 연쇄적인 반응을 설명함

• Capturing

• Bubbling

Bubbling And Capturing


-

Event

• pageX, PageY

– 마우스의 이벤트가 발생한 좌표(x,y) 를 얻는다.

• Type

– 발생한 이벤트 타입을 가진다. 예를 들어 클릭이벤트라면 ‘Click’ 값을 가진다.

• which(keyCode)

– 키 눌렸을때의 키값

• Target

– 이벤트가 발생한 DOM element 얻기

• currentTarget

– 현재 발생한 이벤트 대상

Event Object


-

Event

Event Object

• .data

– 핸들러를 할당할 때 bind() 메서드의 두번째 매개변수로 전달된 값

• .preventDefault()

– 폼 전송이나 링크 이동, 체크박스 상태 변경등의 기본 동작의 발생을 막는다.

• .stopPropagation()

– Dom 트리에서 이벤트 전파를 멈춘다.

• .stopImmediatePropagation()

– jQuery 객체의 이벤트를 중지한다.


-

Event

Keyboard Events

• .focusin()

– 포커스를 받을 때 발생하는 focusin 이벤트를 붙힌다.

• .focusout()

– 포커스를 잃을 때 발생하는 focusout 이벤트를 붙힌다.

– Blur는 버블링이 발생하지 않지만 focusout은 발생한다.


-

Event

Keyboard Events

• .keydown()

– 키가 내려갈 때 발생하는 keydown 이벤트를 붙인다.

• .keyup()

– 키가 올라올 때 발생하는 keyup 이벤트를 붙인다.

• .keypress()

– 키가 눌릴 때 발샏ㅇ하는 keypress 이벤트를 붙인다.


-

Event

Mouse Events

• .click()

• .dbClick()

• .hover()

• .mousedown()

• .mouseenter()

• .mouseleave()

• .mouseover()

• .mouseout()

• .mouseup()

• .mousemove()


-

Event

Mouse Events

• .toggle() ( jQuery 1.9 버전이상에서는 제거 )

– 두개 이상의 핸들러를 순차적으로 실행하되록 한다.

– 링크나 버튼에 선언된 경우 .preventDefault()를 수행하기 때문에 원래의 동작은 하지 않는다.


-

Event

Form Events

• .focus()

• .blur()

• .change()

• .select()

• .submit()

– Return false 로 폼 전송을 막을 수 있다.


-

Event

Document Loading

• .load()

– 페이지의 로딩이 완료되었을 때 발생하는 load 이벤트

• .ready()

– DOM의 로딩이 완료되었을 때 작동 될 함수를 지정한다.

• .unload()

– 페이지를 벗어날 때 발생하는 unload 이벤트를 붙인다.


-

Event

Browser Events

• .error()

– 오류가 발생할 때 발생하는 error 이벤트를 붙인다.

• .resize()

– 화면 크기가 변경 될 때 발생하는 resize 이벤트를 붙인다.

• .scroll()

– 스크롤이 움직일 때 발생하는 scroll 이벤트를 붙인다.


-

Event

Event Handler Attachment

• .bind()

– 요소에 이벤트 핸들러를 지정한다.

• .unbind()

– 요소에 이벤트 핸들러를 삭제한다.

• .one()

– .bind() 와 동일한지만 이벤트가 한번만 실행된 후 .unbind()가 실행된다.


-

Event


• .live()

– 지금,앞으로 생성될 요소에도 이벤트 핸들러를 지정한다.

• .die()

– .live() 이벤트 핸들러를 삭제한다.


-

Event


• .delegate()

– 하나 혹은 그 이상의 요소에 이벤트 핸들러를 추가한다.

– 미래에 생성할 요소에도 이벤트 핸들러를 지정한다.

– 루트 요소에 이벤트 핸들러를 지정한다.

• .undelegate()

– .delegate() 이벤트 핸들러를 제거한다.


-

Event


• .on()

– 선택된 요소의 하나 혹은 다수의 이벤트 핸들러를 지정한다.

– Selector 을 인자로 추가할 수 있다.

– .bind() 와 .delegate() 이벤트를 대처할 수 있다.

• .off()

– .on() 이벤트 핸들러를 제거한다.

• 예제 , 다운로드

http://coding.kr/apps/study/event/event0.html

http://coding.kr/apps/1020/event.rar

http://coding.kr/apps/1020/event.rar


-

Event


• .trigger()

– 요소에 지정된 이벤트 핸들러를 실행한다.

• .triggerHandler()

– .trigger() 와 동일하지만 이벤트 핸들러의 동작만 수행한다.

http://jsfiddle.net/yakuball/d2JtP/8/

jQuery effect


-

Effect

• .show()

– 선택된 요소를 보여준다.

• .hide()

– 선택된 요소를 감춘다.

• .toggle()

– 선택된 요소의 상태에 따라서 감추거나 보여준다.

Basic


-

Effect

Fading

• .fadeIn()

– 선택된 요소를 투명를 조절 하여 서서히 보여준다.

• .fadeOut()

– 선택된 요소를 투명도를 조절하여 서서히 감춘다.


-

Effect

Fading

• .fadeTo()

– 선택된 요소를 지정된 투명도로 서서히 조절한다.

• .fadeToggle()

– 선택된 요소를 투명도를 조절하여 감추거나 보여준다.


-

Effect

Sliding

• .slideUp()

– 선택된 요소의 높이를 줄여서 감춘다.

• .slideDown()

– 선택된 요소의 높이를 원상태로 복원한다.

• .slideToggle()

– 선택되 요소를 슬라이드 효과로 감추거나 보여준다.


-

Effect

Custom

• .animate()

– Css 속성( 숫자 값을 갖는 속성들만 해당)을 제어할 수 있다.

– scrollTop, scrollLeft 속설을 제어 할 수 있다.

– Pixel, em, inche, 퍼센티지 등을 사용할 수 있다.

– 요소의 현재 상태에 대한 상대값 또는 고정 값으로 효과의 종점을 지정할 수 있다.

– 상태를 전환하기 위한 값으로 toggle 값을 사용할 수 있다.

– 애니메이션 이지(easing) 메서드를 지정할수 있다.

– 애니메이션 모든 저점에서 콜백을 설정할수 있다.

– 애니메이션에 큐에 넣거나 혹은 동시에 실행 하도록 지정 할수 있다.


-

Effect

Custom

• .stop( [clearQueue] [, jumpToEnd])

– 현재 보여지는 있는 애니메이션을 멈춘다.

– .stop( true, true )

• .delay()

– 실행을 주어진 시간만큼 연기한다.


-

Effect

Custom

• .queue()

– jQuery의 애니메이션은 기본값으로 fx라 불리는 큐(queue)에 의해서 관리가 된다. 이러한 큐를 확인하거나 수정하는데 사용된다.

• .dequeue()

– 큐에 있는 다음 함수를 실행하게 한다.

• .clearQueue()

– 실행되지 않는 큐에 있는 함수들을 모두 제거한다.

http://jsfiddle.net/yakuball/S9pAb/4/


-

Effect

Custom

• jQuery.fx.interval

– 초당 프레임 수를 조절한다.

– 기본값은 초당 13 프레임이다.

• jQuery.fx.off

– 모든 애니메이션이 종료되고 최종 상태를 보여준다.

– 이후에 실행되는 애니메이션도 건너뛰게 된다.


-

Effect

Custom

• .finish( [queue] ) * 1.9 이상 부터 추가 된 메서드

– 현재 실행 중인 애니메이션 중지

– 모든 큐의 애니메이션 의 제거

– 모든 애니메이션의 완료의 처리

http://jsfiddle.net/yakuball/LgzEL/2/

jQuery Miscellaneous


-

Miscellaneous

• .each()

– jQuery 객체를 각각 반복하면서 함수를 실행하거나 일치하는 요소를 처리한다.

Collection Manipulation


-

Miscellaneous

Collection Manipulation

• .param()

– 배열 혹은 객체를 Url Query string 으로 변환한다.


-

Miscellaneous

Data Storage

• .data()

– 요소 및 이름을 지정하여 데이터를 저장한다.

• .removeData()

– 저장된 데이터를 삭제한다.


-

Miscellaneous

DOM Element Methods

• .get()

– jQuery 객체를 Dom 요소로 변경한다.

• .index()

– 일치하는 요소의 인덱스 값을 취한다.

• .size()

– jQuery 객체 엘리먼트의 수를 취한다.

• .toArray()

– jQuery 객체를 배열로 변경한다.


-

Miscellaneous

Setup Methods

• .noConflict()

– $ 변수의 사용을 버린다.

– 타 프레임워크의 충돌할 경우 사용함.

jQuery utilites


-

Utilites

• jQuery.browser

– $.browser.mise

– $.browser.webkit

– $.browser.mozilla

• jQuery.contains()

– 인자의 요소가 자식 요소인지 체크해준다.

Basic


-

Utilites

Basic

• jQuery.extend()

– 두개 이상의 오브젝트를 첫번째 오브젝트와 병합한다.

• jQuery.globalEval( code )

– 자바스크립트 코드를 전역으로 실행한다.

• jQuery.grep()

– 배열의 요소에서 필터 함수를 사용하여 원하는 결과를 추려낸다.


-

Utilites

• jQuery.browser

– $.browser.mise

– $.browser.webkit

– $.browser.mozilla

• jQuery.contains()

– 인자의 요소가 자식 요소인지 체크해준다.

Basic


-

Utilites

Basic

• jQuery.inArray()

– 배열값 중에서 인자 값에 따라 인덱스를 반환한다.

• jQuery.isEmptyobject()

– 빈 객체인지 체크한다.


-

Utilites

Basic

• jQuery.isFunction( obj )

– Obj 가 함수인지 아닌지 판별한다.

• jQuery.isNumeric( value )

– Value 가 숫지인지 아닌지 판별한다.

• jQuery.isPlainObject( object )

– Object( “{}” or “New object” ) 생성되었는지 판별한다.

• jQuery.isXMLDoc()

– 요소가 XML DOCUMENT 인지 판별한다.

• jQuery.isWindow()

– 인자가 window 인지 판별한다.


-

Utilites

Basic

• jQuery.makeArray( obj )

– Obj 를 배열 로 변환한다.

• jQuery.map()

– 배열 혹은 객체를 새로운 배열 아이템으로 변환한다.

• jQuery.merge()

– 두개의 배열을 첫번째 배열 요소로 병합한다.

• jQuery.noop()

– 빈 함수

• jQuery.now()

– 현재 시간을 숫자로 반환한다.


-

Utilites

Basic

• jQuery.parseHTML()

– 문자열을 DOM nodes 배열로 변환한다.

• jQuery.parseJSON()

– Well-formed JSON 문자열을 객체로 변환한다.

• jQuery.parseXML()

– 문자열을 XML DOCUMENT로 변환한다.


-

Utilites

Basic

• jQuery.trim()

– 양쪽 공백을 제거한다.

• jQuery.type()

– 인자의 타입을 검사한다.

• jQueyr.unique()

– 배열 혹은 DOM 요소의 중복되는 요소를 제거한다.

• jQuery.proxy()

– 특정 함수의 context에서 인자의 함수를 실행한다.

jQuery ajax


-

Ajax

• jQuery.get()

– 서버에 HTTP GET 요청을 실행하고 데이터를 얻는다.

• jQuery.post()

– HTTP POST 요청을 실행하고 데이터를 얻는다.

• jQuery.getJSON()

– HTTP GET 요청을 실행하고 JSON 데이터를 반환한다.

Shorthand Methods


-

Ajax

Shorthand Methods

• jQuery.getScript()

– GET HTTP 요청을 수행하여 자바스크립트 파일을 로드한다.


-

Ajax

Shorthand Methods

• jQuery.load()

– HTTP 요청을 수행한 후 HTML 데이터를 요소내에 반환한다.

– Url에 공백으로 분리된 인수가 있을 경우 이를 셀렉터로 인식하고 해당 콘텐츠를 반환한다.

– 객체로 data 전송할 경우 post, 다른 경우 get로 동작한다.

– 콜백 함수를 지정할 수 있다.


-

Ajax

Global Ajax Event Handlers

• .ajaxComplete() – Ajax 요청이 완료 되었을 때 호출되는 핸들러를 등록한다.

• .ajaxError() – Ajax 요청이 완료 되었을 때 에러가 발생할 때의 핸들러를 등록한

다. • .ajaxStart()

– Ajax 요청이 시작되었을때 호출되는 핸들러를 등록한다. • .ajaxStop()

– 모든 ajax 요청이 완료 되었을 때 핸들러를 등록한다. • ajaxSuccess()

– Ajax 요청이 성공되었을 때 실행되는 함수를 지정한다. • .ajaxSend()

– Ajax 요청을 보낼 때 실행되는 함수를 지정한다.


-

Ajax

Helper Function

• jQuery.param()

– 배열, 객체를 url query string으로 변환한다.

• .serialize()

– Form 요소 집합을 query string으로 변환한다.

• .serializeArray()

– Form 요소 집합을 배열 요소로 변환한다.

jQuery CallBacks Object


-

Callbacks Object

• 콜백 리스트를 관리할 수 있는 함수

• 많은 종류의 콜백 리스트 객체를 사용할 수 있다.

• .ajax() , .deferred() 함께 사용하면 좋다.

jQuery.Callbacks()


-

Callbacks Object

CallBacks Object List

• callbacks.add( callback )

– 콜백 리스트에 callback 를 추가한다.

• callbacks.disable()

– 콜백 리스트에 사용을 막는다.

• callbacks.empty()

– 콜백 리스트를 모든 callbacks을 제거한다.

• callbacks.fire( arguments )

– 인자에 맞는 콜백을 호출한다.

• callbacks.has( callback)

– 콜백 리스트에서 callback 이 존재하는지 체크한다.


-

Callbacks Object

CallBacks Object List

• .lock()

– 콜백 리스트를 .lock() 호출 순간 부터 잠금다.

• .remove( callbacks )

– 콜랙 리스트에서 콜백을 제거한다.

• .fireWidth( [context] [, args] )

– Context 범위 내에서 콜백 리스트의 콜백을 호출한다.

jQuery Deffered Object


-

Deferred Object

• .promise()

– 액션을 끝나거나, 수행시 처리할 약속을 정한다.

Deferred Object List


-

Deferred Object


• jQuery.when( deferreds )

– 하나 혹은 여러 콜백함수의 실행 방법을 deferred object 와 함께 제공한다.


-

Deferred Object


• Deferred.done()

– 호출 되었을 때 핸들러를 추가한다.

– Deferred object 객체가 resolved 댈 때의 호출된다.


-

Deferred Object


• Deferred.fail()

– Deferred object 가 rejected 되었을때 핸들러 추가

• Deffered.reject()

– Deferred object 를 거절하다. .fail() 메서드 호출한다.

• Deffered.resove()

– Deferred object 를 승인한다. .done() 메서드 호출한다.

• Deffeered.than()

– Deferred object 가 resolved, rejected 에 따라 핸들러를 추가한다.

jQuery Plugins


-

Plugins

• jQuery Object 를 확장하여 jQuery 메서드와 함수에 사용자 정의 함수를 작성하여 재사용 할 수 있도록 하는 것

• 사용자 정의 jQuery 메서드

• 사용자 정의 jQuery 함수

What’s jQuery Plugins?

$(‘ul’).myPlugin();

jQuery.myPlugin();


-

Plugins

Custom jQuery Method Create

• jQuery.fn 개체에 Custom 메서드 추가

• jQuery.extend 를 사용


-

Plugins

Custom jQuery Method Create

• jQuery 개체 자체에 Custom 메서드 추가


-

Plugins

$ 단축 표현 사용하기

• (function($) { … })(jQuery) 인 익명함수로 플러그인을 감싸다.

– $ 사용 함에 따라 코드를 크기 줄 일수 있다.

– Private 변수를 사용하여 플러그인을 제작할수 있다.


-

Plugins

기본 옵션 추가하기

• 기본 데이터 추가


-

Plugins

사용자 정의 옵션 추가하기

• $.extend 활용하여 사용자 정의 옵션 추가하기

http://jsfiddle.net/yakuball/XyKqT/1/

jQuery Performance


-

Performance

• Dom 엘리멘트를 추가하는 하는 작업은 많은 비용이 발생한다. 그에 따라 가능한 한번에 작업하도록 하면 많은 비용을 줄일 수 있다.

Append Outside of Loops


-

Performance

Cache Length During Loops

• 반복하는 동안 매번 Length 를 얻기보다 Cache 하여 한번만 수행하도록 한다.


-

Performance

Detach Elements to Work with Them

• Dom 은 느리다. Dom 요소를 제거 하고 다시 얻어올 경우가 있으면 $.fn.detach 를 사용하여 작업하면 유용하다.


-

Performance

Don’t Act on Absent Elements

• 엘리멘트가 존재하지 않는 요소에 특정 행위를 하지말아라.


-

Performance

Optimize Selectors

• ID-Based Selectors

• Specificity

• Avoid excessive specificity.


-

Performance

Optimize Selectors

• Avoid the Universal Selector

jQuery Practice


-

Practice

• FQA 메뉴 만들기

• 결과 화면

Simple Accordion Menu Making

http://coding.kr/apps/study/demo/event1.html







http://jsfiddle.net/Cx6E5/74/





-

Practice

• 이미지 슬라이드 효과를 만들어 봅시다.

• 결과 화면

Slider Making

http://coding.kr/apps/study/slide/slide.html








http://jsfiddle.net/yakuball/Mqdrd/9/




-

Practice

• 이미지 2장을 이용한 커튼 효과 만들기

• 결과 화면

jQuery Plugin Making

마우스오버

마우스아웃








http://jsfiddle.net/yakuball/73sf9/6/




-

jQuery 관련 사이트

• 웹눈이야기

• 생활코딩

• coderUl

• jQueryRain

– 다양한 종류의 플러그인이 존재

– 신규 플러그인 자료 업데이트가 활성화

• HtmlDrive

유용한 사이트 안내

http://webnoon.net/category/

http://opentutorials.org/course/53

http://coderul.cafe24.com/

http://www.jqueryrain.com/

http://www.htmldrive.net/


-

jQuery 핵심노트

• jQuery.com

• 신현석님의 제이쿼리 기본 API

• http://codylindley.com/jqueryselectors

• http://codylindley.com/jquerymanipulation/

자료 출처 및 참고자료

http://api.jquery.com/

http://hyeonseok.com/soojung/javascript/2011/06/04/658.html










Technology

Jquery핵심노토