Jquery핵심노토

jQuery 핵심노트

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

Introduction

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

오픈소스, 일반 공개 라이선스 ( MIT & GPL )
W3C 명세를 수용하며, CSS3 셀렉터 대부분을 지원 함
브라우저에서 개발을 위한 테스트 및 최적화를 수행 함
체인 연결 패턴
다양한 jQuery 플러그인들이 존재 한다.
빠르게 배울 수 있다.

하드코딩하는사람들 - 야쿠 (yakuyaku@gmail.com)

Introduction

-

좀


Introduction

- jQuery 철학

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


Introduction

- jQuery 철학

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


Introduction

- jQuery 철학

• 몇몇 요소 (Dom Elements) 를 찿아서 어떤 작업을 작성한다.
• 요소의 집합에 대해 여러 메서드를 체인으로 연결한다.


Introduction

- jQuery 철학
•
•
•
•

Write less, do more ( 적게 작성하고, 보다 많이 한다. )
몇몇 요소 (Dom Elements) 를 찿아서 어떤 작업을 작성한다.
요소의 집합에 대해 여러 메서드를 체인으로 연결한다.
jQuery Wrapper Set을 암시적인 반복을 통해 사용한다.


Introduction

-

Write less, do more Example

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

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


Core

- jQuery()
• jQuery( selector, [ context ] )
– Css 선택자를 이용하여 요소를 탐색한다.
– Selector Context
• 검색 범위를 현재 문맥 범위로 좁혀서 사용할 수 있다.


Core

- jQuery()
• jQuery( element ), jQuery( elementArray )
– Dom 요소를 jQuery Object 반환한다.
• this를 참조하여 jQuery객체로 반환하여 사용할 수 있다

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


Core

- jQuery()
• jQuery( jQuery object )
– 존재하는 jQuery Object 복제한다.
• jQuery()
– Returning an Empty Set
– .length 가 0 인 빈 객체를 반환한다.


Core

- jQuery()
• jQuery ( html, [ ownerDocument] )
– HTML 문자열을 인수로 받으면 새로운 요소를 생성한다.
– 입력된 문자열에 따라 jQuery 내부적으로 createElement
나 innerHTML 을 사용해서 문서에 적용하게 된다.
– Html, title, head 등의 요소는 브라우저에 따라서 누락될
수 있다.
– 입력하는 HTML 의 문법은 브라우저 호환성을 위해서 정확
히 지켜져야 한다.


Core

- jQuery()
• jQuery ( html, props )
– 새로운 요소를 생성하고 속성을 정의한다.


Core

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


Core

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


Core

- Attribute
• 속성 Setting

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

• 속성의 추가, 제거


jQuery
selectors
http://codylindley.com/jqueryselectors/

Selector

- Basic

• Css1-3의 셀렉터를 빌려와 사용하여 강력한 셀렉터를 제공한다.
– All Selector( “*” )
– Class Selector( “.class” )
– Element Selector( “element” )
– ID Selector( “#id” )
– Multiple Selector( “selector1, selector2, selectorN”)


Selector

- Attribute

• $(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인 요소를 선
택

Selector

- Attribute

• $(‘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” />


Selector

- Hierarchy

• $(‘div code’)
• $(‘li > ul’)
• $(‘strong + em’)
– Strong 다음에 인접한 em 요소로를 선택
– Next Adjacent Selector(“prev + next”)
• Prev 다음에 인접한 next 요소를 선택
• $(‘strong ~ em’)
– Strong 이후에 나오는 em 요소를 선택


Selector

- Basic Filters
•
•
•
•
•
•
•
•
•
•

$(‘li:first’)
$(‘li:last’)
$(‘li:not(li:first)’)
$(‘li:even’)
$(‘li:odd’)
$(‘li:eq(1)’)
$(‘li:gt(2)’)
$(‘li:lt(2)’)
$(‘:header’)
$(‘:animated’)

Selector

- Content Filters
•
•
•
•

$(‘li:contains(second-level)’)
$(‘:empty’)
$(‘li:has(a)’)
$(‘p:parent’)


Selector

- Visibility Filters
• $(‘:hidden’)
• $(‘:visible’)


Selector

- Child Filters
•
•
•
•
•
•
•

$(‘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’)


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[:] 개체로 만들 수 있다.


Traversing

- Tree Traversal
• .children()
– 자식요소를 취한다. 셀렉터를 추가로 명시할 수 있다.


Traversing

- Tree Traversal
• .siblings()
– 형제 요소를 취한다.

– 퀴즈) 위 결과는?


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

- General Attributes
• .attr()
– HTML 속성 값을 취하거나 추가, 변경한다.

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

• .removeAttr()
– HTML 속성을 지운다.


Manipulation

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

• .removeProp()
– 속성값을 지운다.


Manipulation

• .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()
– 상하 스크롤 바의 위치를 취한다.


Event

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


Event

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

• Bubbling


Event

- Event Object
• pageX, PageY
– 마우스의 이벤트가 발생한 좌표(x,y) 를 얻는다.
• Type
– 발생한 이벤트 타입을 가진다. 예를 들어 클릭이벤트라면
‘Click’ 값을 가진다.
• which(keyCode)
– 키 눌렸을때의 키값
• Target
– 이벤트가 발생한 DOM element 얻기
• currentTarget
– 현재 발생한 이벤트 대상

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() 이벤트 핸들러를 제거한다.
• 예제 , 다운로드

Event

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

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

Effect

- Basic

• .show()
– 선택된 요소를 보여준다.
• .hide()
– 선택된 요소를 감춘다.
• .toggle()
– 선택된 요소의 상태에 따라서 감추거나 보여준다.


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()
– 실행되지 않는 큐에 있는 함수들을 모두 제거한다.


Effect

- Custom
• jQuery.fx.interval
– 초당 프레임 수를 조절한다.
– 기본값은 초당 13 프레임이다.
• jQuery.fx.off
– 모든 애니메이션이 종료되고 최종 상태를 보여준다.
– 이후에 실행되는 애니메이션도 건너뛰게 된다.


Effect

- Custom
• .finish( [queue] ) * 1.9 이상 부터 추가 된 메서드
– 현재 실행 중인 애니메이션 중지
– 모든 큐의 애니메이션 의 제거
– 모든 애니메이션의 완료의 처리


Miscellaneous

- Collection Manipulation
• .each()
– jQuery 객체를 각각 반복하면서 함수를 실행하거나 일치하
는 요소를 처리한다.


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()
– $ 변수의 사용을 버린다.
– 타 프레임워크의 충돌할 경우 사용함.


Utilites

- Basic

• jQuery.browser
– $.browser.mise
– $.browser.webkit
– $.browser.mozilla
• jQuery.contains()
– 인자의 요소가 자식 요소인지 체크해준다.


Utilites

- Basic

• jQuery.extend()
– 두개 이상의 오브젝트를 첫번째 오브젝트와 병합한다.
• jQuery.globalEval( code )
– 자바스크립트 코드를 전역으로 실행한다.
• jQuery.grep()
– 배열의 요소에서 필터 함수를 사용하여 원하는 결과를 추려
낸다.


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에서 인자의 함수를 실행한다.


Ajax

- Shorthand Methods
• jQuery.get()
– 서버에 HTTP GET 요청을 실행하고 데이터를 얻는다.

• jQuery.post()
– HTTP POST 요청을 실행하고 데이터를 얻는다.
• jQuery.getJSON()
– HTTP GET 요청을 실행하고 JSON 데이터를 반환한다.


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 요소 집합을 배열 요소로 변환한다.


Callbacks Object

- jQuery.Callbacks()

• 콜백 리스트를 관리할 수 있는 함수
• 많은 종류의 콜백 리스트 객체를 사용할 수 있다.
• .ajax() , .deferred() 함께 사용하면 좋다.


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 범위 내에서 콜백 리스트의 콜백을 호출한다.


Deferred Object

- Deferred Object List

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


Deferred Object


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


Deferred Object


• Deferred.done()
– 호출 되었을 때 핸들러를 추가한다.
– Deferred object 객체가 resolved 댈 때의 호출된다.


Deferred Object

• Deferred.fail()
– Deferred object
• Deffered.reject()
– Deferred object
• Deffered.resove()
– Deferred object
• Deffeered.than()
– Deferred object
추가한다.

가 rejected 되었을때 핸들러 추가

를 거절하다. .fail() 메서드 호출한다.
를 승인한다. .done() 메서드 호출한다.
가 resolved, rejected 에 따라 핸들러를


Plugins

- What’s jQuery Plugins?
• jQuery Object 를 확장하여 jQuery 메서드와 함수에 사용자
정의 함수를 작성하여 재사용 할 수 있도록 하는 것
• 사용자 정의 jQuery 메서드
$(‘ul’).myPlugin();

• 사용자 정의 jQuery 함수
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 활용하여 사용자 정의 옵션 추가하기


Performance

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


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


Practice

- Simple Accordion Menu Making
• FQA 메뉴 만들기

• 결과 화면


Practice

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

• 결과 화면


Practice

- jQuery Plugin Making
• 이미지 2장을 이용한 커튼 효과 만들기
마우스오버

마우스아웃

• 결과 화면


jQuery 관련 사이트

- 유용한 사이트 안내
•
•
•
•

웹눈이야기
생활코딩
coderUl
jQueryRain
– 다양한 종류의 플러그인이 존재
– 신규 플러그인 자료 업데이트가 활성화
• HtmlDrive


jQuery 핵심노트

- 자료 출처 및 참고자료
•
•
•
•

jQuery.com
신현석님의 제이쿼리 기본 API
http://codylindley.com/jqueryselectors
http://codylindley.com/jquerymanipulation/


Jquery핵심노토

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to Jquery핵심노토

Similar to Jquery핵심노토 (20)

Jquery핵심노토