jQuery 커맨드들을 사용하여 공통적으로 사용할 수 있도록 패턴화.

jQuery 유틸리티화.

 

- 잇점

사이트 전체에 (동일 플러그인을 가져다쓴 곳들에서) 일관된 jQuery 코드 스타일을 유지

jQuery의 라이브러리 구조/재사용성을 고려한 구성을 따라 설계

jQuery가 제공하는 코드들을 활용할 수 있다.

 

- 형식

$에 정의된 유틸리티 함수

jQuery 확장 집합에서 동작하는 메서드

 

- 명명

파일의 이름이 다른 파일과 충돌하지 않도록 만들어야

. 접두어로 jquery. 을 사용

. 이어서 플러그인 이름 (플러그인의 성격을 알 수 있는?)

. 확장자는 .js로

 

 

$의 변경에 영향을 받지 않는 유일한 방법은?

$를 사용하지 않는 것.

jQuery.say = function(what) { alert( what ); }

 

하지만, jQuery라고 사용하는 것보다는

$를 사용하는 것이 편하니...

 

( function($) { ... } )(jQuery);

$라는 매개변수를 정의한 함수에 jQuery를 전달하면

$는 함수안에서 jQuery의 참조임이 보장된다.

 

 

선택적인 매개변수는

이름/값 쌍 형식의 프로퍼티를 가지는 자바스크립트 Object 인스턴스로 전달한다.

complex( valueA, {p7:valueB, ...} );

 

 

function complex( p1, options ) {

   var settings = $.extend( {

      option1: defaultValue1,

      option2: defaultValue2,

      option3: defaultValue3

   }, options||{} );

}

options 객체가 null 이거나 undefined 인지를 확인

options 변수가 false라면(null과 undefined는 조건식에서 false) 빈 객체{}가 사용된다.

 

 

확장메서드는 $ namespace의 fn이라는 이름을 가진 객체의 프로퍼티로 할당해야 한다.

$.fn.wrapperFunctionName = function(params) { function-body };

 

메서드 본문에서 this는 확장집합을 나타낸다.

 

특정한 값을 return할 의도가 없다면,

항상 확장집합을 돌려주도록 만들어야 한다.

jQuery 커맨드 체인에서 사용할 수 있도록...

(그래야 더 많이 쓰일 수 있겠지?)

 

메서드에서 사용하는 변수가 유효 범위보다 길게 유지되는 경우가 많으니

클로저를 이해하고 있어야 한다.

 

 

더 많은 jQuery 플러그인 정보는...

http://jquery.com/plugins

 

 

'plming > jQuery' 카테고리의 다른 글

animation 효과  (0) 2015.05.19
Ajax 요청 직접 제어하기  (1) 2015.05.17
Ajax - GET/POST 요청 만들기  (0) 2015.05.15
Ajax - 엘리먼트에 콘텐츠 로드하기  (0) 2015.05.14
Ajax  (0) 2015.05.14

. hide( speed=Number|String, callback=Function )

확장 집합의 엘리먼트를 감춘다.

매개변수 없이 호출하면 엘리먼트의 display 스타일 프로퍼티 값을 즉시 none으로 설정한다.

speed 매개변수를 제공하면 크기와 불투명도(opacity)를 점차 0으로 줄여가다가 지정된 시간이 되면 display 스타일 프로퍼티 값을 none으로 설정해서 엘리먼트를 화면에서 감춘다.

선택적으로 애니메이션이 완료된 뒤 호출될 콜백 함수를 지정한다.

 

speed : 선택사항으로 효과가 지속될 시간을 1/1000초 단위의 숫자 또는

            미리 정의된 문자열(slow/normal/fast)가운데 하나로 명시한다.

            생략하면 애니메이션은 수행되지 않으며 엘리먼트는 즉시 화면에서 제거된다.

callback : 선택사항으로 애니메이션이 완료된 뒤 호출되는 함수

              매개변수는 전달되지 않지만, 애니메이션이 수행되는 엘리먼트가 this가 된다.

 

 

. show( spped=Number|String, callback=Function )

확장 집합의 감춰진 모든 엘리먼트를 보이게 한다.

매개변수 없이 호출되면 연산을 즉시 수행한다.

이때, 엘리먼트가 jQuery를 이용해 감춰졌단면 display 스타일 프로퍼티 값을 (block이나 inline같은) 이전 값으로 설정한다.  엘리먼트가 jQuery를 이용해 감춰지지 않았다면 display 스타일 프로퍼티 값을 block으로 설정한다.

speed 매개변수를 제공하면 크기를 키우고 불투명도를 높여가면서 엘리먼트가 정해진 시간 동안 서서히 나타난다.

선택적으로 애니메이션이 완료된 뒤 호출될 콜백 함수를 지정한다.

 

 

. toggle( speed=Number|String, callback=Function )

감춰진 확장 엘리먼트에는 show()를 수행하고,

드러난 확장 엘리먼트에는 hide()를 수행한다.

 

 

※ 파이어폭스와 인터넷 익스플로러에서는 폼 엘리먼트이 초기값이 없는 경우

    새로고침을 해도 기존에 입력한 값이 그대로 남아있다.

 

 

. fadeOut( speed=Number|String, callback=Function )

일치하는 엘리먼트 중 드러난 엘리먼트의 불투명도를 0%로 줄여가면서 화면에서 제거한다.

불투명도가 변경되는 지속시간은 speed 매개변수에 따라 변한다.

이미 감춰진 엘리먼트는 영향을 받지 않는다.

 

speed : 생략되면 기본값인 normal을 이용

 

 

. fadeIn( speed, callback )

일치하는 엘리먼트 중 감춰진 엘리먼트의 불투명도를 점차 원상태로 조절하면서 보이게 한다.

원상태 값은 엘리먼트에 원래 적용되어 있던 값 또는 100%다.

불투명도가 변경되는 지속 시간은 speed 매개변수에 따라 변한다.

이미 드러나 있는 엘리먼트는 영향을 받지 않는다.

 

 

. fadeTo( speed=Number|String, opacity=Number, callback=Function )

확장 엘리먼트의 불투명도를 현재의 설정 값에서 opacity 매개변수 값으로 설정

 

opacity : 0.0 에서 1.0 사이의 값으로 엘리먼트에 적용될 불투명도 값

 

fadeOut 효과와는 다르게 엘리먼트가 완전히 보이지 않아도 화면에서 제거하지 않는다.

 

 

. slideDown( speed, callback )

감춰진 모든 일치하는 엘리먼트가 높이 값이 증가하면서 나타난다.

드러나 있는 엘리먼트는 영향을 받지 않는다.

 

 

. slideUp( speed, callback )

드러나 있는 모든 일치하는 엘리먼트가 점차적으로 높이 값이 감소하면서 화면에서 제거된다.

 

 

. slideToggle( speed, callback )

감춰진 확장 엘리먼트에는 slideDown()을 수행하고

드러나 있는 엘리먼트에는 slideUp()을 수행한다.

 

 

. stop()

확장 집합에 있는 엘리먼트에 현재 진행하는 애니메이션을 중지한다.

 

 

. animate( properties=Object, duration=Number|String, easing=String, callback=Function )

. animate( properties=Object, options=Object )

모든 확장 집합의 엘리먼트에 properties와 easing 매개변수에 명시된 대로 애니메이션을 수행한다.

애니메이션 수행이 완료된 뒤 호출될 콜백 함수를 선택적으로 명시할 수 있다.

 

properties : 애니메이션의 마지막에 도달해야 하는 값을 명시하는 객체 해시

                 CSS스타일에서 지원하는 값을 허용

                 애니메이션은 엘리먼트의 스타일과 관련된 프로퍼티들의 현재 객체 해시에 명시된 값으로 프로퍼티 값을 조절함으로써 동작한다.

duration : 선택사항으로 효과가 지속되는 시간을 1/1000초 단위의 숫자 또는 미리 정의된 문자열 (slow/normal/fast) 가운데 하나로 명시한다.

              생략하면 애니메이션을 수행하지 않는다.

easing : 선택사항으로 애니메이션을 미묘하게(?) 바꿀 때 사용하는 함수 이름

             이러한 함수들은 반드시 등록되어 있어야 하며 플러그인으로 제공되기도 한다.

             jQuery는 linear와 swing 두 함수를 기본으로 제공한다.

options : 객체 해시를 이용해 애니메이션 매개변수를 명시한다.

             . duration, easing

             . complete - 애니메이션 수행이 완료된 뒤 호출될 함수

             . queue - false값이라면 애니메이션은 Queue에 쌓이지 않고 바로 동작을 시작한다.

 

애니메이션을 미묘하게(?) 바꾼다는 것

애니메이션 프레임의 프로세싱과 속도를 처리하는 방법을 조작한다는 의미.

 

 

선형적인 진행을 제공하는 linear나 애니메이션의 마지막 부분에 속도를 높이는 swing

이외의 예제를 찾아보려면 Easing 플러그인을 참조

http://gsgd.co.uk/sandbox/jquery.easing.php

 

색상을 명시하는 CSS값을 애니메이션으로 수행하려면

Color Animation 플러그인을 참조

http://jquery.com/plugins/project/color

 

 

기본적으로 애니메이션은 실행을 위해 Queue에 추가

다중 애니메이션을 객체에 적용하면 차례대로 수행

CSS 스타일 프로퍼티 중에서 숫자를 값으로 받는 것들만 애니메이션으로 처리 가능

 

크기를 나타내는 값으로 픽셀(pixel)을 기본 단위로 가정

em이나 %를 접미사로 이용하면 비율과 백분율도 이용 가능

 

 

animate()를 이용한 토글기능

$( '.animateMe' ).animate( {opacity:'toggle'}, 'slow' );

 

 

'plming > jQuery' 카테고리의 다른 글

jQuery 사용자 정의 플러그인  (0) 2015.05.22
Ajax 요청 직접 제어하기  (1) 2015.05.17
Ajax - GET/POST 요청 만들기  (0) 2015.05.15
Ajax - 엘리먼트에 콘텐츠 로드하기  (0) 2015.05.14
Ajax  (0) 2015.05.14

Ajax 요청의 생성과 관련된 jQuery의 모든 함수와 커맨드는 이 함수를 사용하여 요청을 전송

 

$.ajax( options=Object )

요청의 생성 방법과 통보 받을 콜백을 제어하고자 전달된 option을 사용하여 Ajax 요청을 전송

option : 요청에 대한 매개변수를 정의하는 프로퍼티를 소유한 객체 인스턴스

 이름

 타입

 설명

 url

 String

 요청 URL

 type  String

 사용할 HTTP 메서드.  일반적으로 POST나 GET을 사용.

 생략하면 기본 값으로 GET을 사용

 data  Object

 요청에 전달되는 프로퍼티를 가진 객체.

 GET요청이면 데이터는 쿼리 문자열로 제공

 POST요청이면 데이터는 요청의 본문으로 제공

 두 경우 모두 $.ajax() 유틸리티 함수가 값의 인코딩을 처리

 dataType

 String

 응답의 결과로 반환되는 데이터의 종류를 식별하는 키워드

 콜백 함수로 전달하기 전에 후처리가 발생할지 결정

 . xml - XML문서로 파싱, 콜백에 XML DOM을 전달

 . html - 응답 텍스트는 처리 과정없이 콜백 함수로 전달

            반환된 HTML에 있는 <script> 블록이 평가된다.

 . json - 응답 텍스트는 JSON문자열로 평가되어 콜백 함수로 전달

 . jsonp - 원격 스크립트를 허용한다는 점을 제외하고는 json과 유사

 . script - 응답 텍스트가 스크립트 구문으로 처리되어 콜백 함수로 전달

 . text - 일반 텍스트

 서버에서 올바른 content-type 응답 헤더를 설정해야 한다.

 생략하면 어떠한 처리나 평가 없이 콜백에 전달

 timeout

 Number

 Ajax 요청의 제한 시간을 밀리초 단위로 설정

 제한 시간이 지나면 취소하거나 error 콜백이 있으면 호출

 global  Boolean  전역 함수 활성화 여부.  생략하면 기본 값으로 활성화
 contentType  String

 요청에 명시되는 콘텐츠 타입. 생략하면 폼 전송이 기본으로 사용하는 'application/x-www-form-urlencoded'가 설정

 success  Function

 응답이 성공 상태코드를 반환하면 호출되는 함수

 응답 본문은 첫번째 매개변수로 전달

 두번째는 상태 값. 항상 success

 error  Function

 응답이 에러 상태코드를 반환하면 호출되는 함수

 XHR 인스턴스, error 상태문자, 예외 객체(선택적)가 매개변수로 전달

 complete

 Function

 요청이 완료되면 호출되는 함수

 XHR 인스턴스와 success/error의 상태문자

 success/error 콜백을 실행후 호출

 beforeSend

 Function

 요청이 전송되기 전에 먼저 호출되는 함수

 XHR 인스턴스를 전달, 헤더설정/요청전 필요연산을 수행

 Ajax 요청을 취소하려면 return true;

 async

 Boolean

 false이면 동기 호출로 전송.  기본은 비동기 요청

 processData

 Boolean

 false로 설정하면 인코딩된 형태의 데이터 금지

 기본은 폼 전송에 사용되는 URL인코딩 방식

 ifModified

 Boolean

 true일 때 Last-Modified 헤더를 확인하여 응답콘텐츠가 변경되지 않았다면 성공, 생략하면 확인하지 못함.

 

 

$.ajaxSetup( properties )

전달된 프로퍼티 집합을 이어지는 $.ajax()호출의 기본 옵션 값으로 할당

properties : 기본 Ajax 프로퍼티 집합을 정의하는 프로퍼티를 가진 객체 인스턴스

                 $.ajax()의 프로퍼티와 동일

 

설정하는 기본 프로퍼티 집합은 load() 컨맨드에 적용할 수 없다.

$.get()/$.post()같은 유틸리티 함수에서 HTTP메서든 기본 값으로 재정의될 수 없다.

 

그 이외의 모든 Ajax 호출이 기본 값 프로퍼티를 사용

 

 

* Ajax 전역 함수

Ajax 요청이 처리되는 각 단계나 요청이 성공하거나 실패할 때 실행되도록

특정 DOM 엘리먼트에 jQuery함수를 덧붙일 수도 있다.

 

ajaxStart( callback )

ajaxSend( callback )

ajaxSuccess( callback )

ajaxError( callback )

ajaxComplete( callback )

ajaxStop( callback )

 

전달된 함수는 모든 일치하는 엘리먼트에  덧붙여지고, Ajax 요청이 발생하는 과정에서 지정된 시점에 호출

 

 전역 콜백 타입

 호출 시점

 매개변수

 ajaxStart

 jQuery의 Ajax 함수나 커맨드가 실행될 때, 하지만 XHR 인스턴스는 생성되기 전이다.

 . 타입이 ajaxStart로 설정된 전역 콜백정보객체

 ajaxSend

 XHR 인스턴가 생성된 뒤, 하지만 서버로 전송하기 전이다.

 . 타입이 ajaxSend로 설정된 전역 콜백정보객체

 . XHR 인스턴스

 . $.ajax() 함수가 사용하는 프로퍼티

 ajaxSuccess

 서버에서 요청이 반환되고, 응답이 성공상태코드를 포함할 때

 . 타입이 ajaxSuccess로 설정된 전역 콜백정보객체

 . XHR 인스턴스

 . $.ajax() 함수가 사용하는 프로퍼티

 ajaxError

 서버에서 요청이 반환되고, 응답이 실패상태코드를 포함할 때

 . 타입이 ajaxError로 설정된 전역 콜백정보객체

 . XHR 인스턴스

 . $.ajax() 함수가 사용하는 프로퍼티

. XHR 인스턴스가 반환한 예외 객체

 ajaxComplete  서버에서 요청이 반환되고, 선언된 ajaxSuccess나 ajaxError 콜백이 호출된 후  . 타입이 ajaxComplete로 설정된 전역 콜백정보객체

 . XHR 인스턴스

 . $.ajax() 함수가 사용하는 프로퍼티

 ajaxStop

 모든 Ajax 진행이 완료되고, 다른 적용된 전역 콜백이 호출된 후

 . 타입이 ajaxStop로 설정된 전역 콜백정보객체

 

 

'plming > jQuery' 카테고리의 다른 글

jQuery 사용자 정의 플러그인  (0) 2015.05.22
animation 효과  (0) 2015.05.19
Ajax - GET/POST 요청 만들기  (0) 2015.05.15
Ajax - 엘리먼트에 콘텐츠 로드하기  (0) 2015.05.14
Ajax  (0) 2015.05.14
  1. 토마's 2016.09.06 16:38 신고

    많은 도움 되었습니다. 감사합니다 :)

GET 요청은 동일한 메서드를 여러번 반복호출해도 동일한 결과를 얻을 때 사용한다.

브라우저가 HTTP 메서드에 따라 캐싱여부를 결정하기 때문이다.

POST 요청은 서버로 전송한 데이터로 추가/변경 작업을 할 때 사용한다.

 

$.get( url, parameters=Object|String, callback=Function )

매개변수로 명시된 URL을 사용하여 서버에 대한 GET요청을 전송한다.

매개변수는 쿼리 문자열로 전달한다.

 

parameters : URL에 덧붙이는 쿼리 문자열을 구성하려고 이름과 값의 쌍으로 프로퍼티를 지닌 객체

                   미리 구성 및 인코딩된 쿼리 문자열

callback : 요청이 완료되면 호출되는 함수

               응답 본문은 이 콜백 함수의 첫 번째 매개변수로 전달되며, 상태 값두번째 매개변수로 전달

 

응답이 XML문서를 포함하면 문서는 파싱되어 DOM이 생성된다.

 

 

$.getJSON( url, parameters=Object|String, callback=Function )

매개변수로 명시된 URL을 사용하여 서버에 대한 GET 요청을 전송

매개변수는 쿼리 문자열로 전달

응답은 JSON 문자열로 해석되며, 결과로 만들어진 데이터는 콜백함수에 전달

 

callback : 응답에서 JSON문자열로 만들어진 데이터 값은 첫 번째 매개변수로 전달

 

 

$.post( url, parameters, callback )

매개변수로 명시된 URL을 사용하여 서버에 대한 POST 요청을 전송

parameters는 요청의 본문으로 전달

 

 

'plming > jQuery' 카테고리의 다른 글

animation 효과  (0) 2015.05.19
Ajax 요청 직접 제어하기  (1) 2015.05.17
Ajax - 엘리먼트에 콘텐츠 로드하기  (0) 2015.05.14
Ajax  (0) 2015.05.14
동적으로 스크립트 로드하기  (0) 2015.05.13

. load( url, parameters=Object, callback=Function )

URL과 선택적인 매개변수로 Ajax요청을 전송한다.

콜백 함수는 요청이 완료되면 호출된다.

응답텍스트는 일치하는 엘리먼트의 콘텐츠를 대체한다.

 

parameters : 요청으로 전달하기 위해 올바르게 인코드된 매개변수로 직렬화되는 프로퍼티를 가진 객체.

                   이 매개변수를 명시하면 요청은 POST메서드를 사용하고, 생략하면 GET메서드를 사용

callback : 응답 결과 데이터가 일치하는 엘리먼트로 로드된 이후에 호출되는 콜백함수.

               이 함수로 전달되는 매개변수는 응답텍스트, 상태코드, XHR인스턴스다.

 

응답으로 반환된 엘리먼트를 필터링하려고 할 때는 요청URL에 셀렉터를 추가하면 된다.

$('.injectMe').load( '/someResource #div' );

 

 

. serialize()

확장집합에 있는 전송할 수 있는 상태인 폼 엘리먼트에서 올바르게 구성되고 인코딩된 쿼리문자열을 생성

폼 컨트롤에서 전송할 수 있는 상태(successful)인 엘리먼트의 정보만 가져온다.

 

 

. serializeArray()

상태가 성공인 폼 컨트롤의 값을 컨트롤의 이름과 값을 포함하는 배열로 수집하여 반환한다.

 

 

'plming > jQuery' 카테고리의 다른 글

Ajax 요청 직접 제어하기  (1) 2015.05.17
Ajax - GET/POST 요청 만들기  (0) 2015.05.15
Ajax  (0) 2015.05.14
동적으로 스크립트 로드하기  (0) 2015.05.13
자바스크립트 객체와 컬렉션 조작하기  (0) 2015.05.08

Ajax(Asynchronous JavaScript and XML)

페이지를 다시 로드할 필요 없이 서버와 비동기 요청을 만드는 기법

XMLHttpRequest (XHR) 객체로 구현

 

 

* XHR 인스터스 생성하기

var xhr;

if( window.XMLHttpRequest ) {  ← XHR이 정의되었는지 검사
  xhr = new XMLHttpRequest();
}
else if( window.ActiveXObject ) {  ← ActiveX를 제공하는 검사, IE
  xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
else {
  throw new Error("Ajax 지원 안하는 가봐요");
}

 

 

* XHR 메서드와 프로퍼티

 메서드

 설명

 abort()

 현재 실행하는 요청을 취소

 getAllResponseHeaders()

 응답 헤더의 모든 이름과 값을 포함하는 문자열을 반환

 getResponseHeader(name)

 응답 헤더에서 name에 해당하는 값을 반환

 open(method, url, async, username, password)

 요청 메서드와 호출할 URL을 설정.

 선택적으로 요청은 동기 방식으로 선언할 수 있으며,

 컨테이너 기반 인증이 필요하면 사용자명과 암호를 제공

 send(content)

 요청을 선택사항인 본문 콘텐츠와 함께 전송

 setRequestHeader(name,value)

 name에 해당하는 요청 헤더에 value를 설정

 

 프로퍼티

 설명

 onreadystatechange

 요청의 상태가 변경될 때 사용하는 이벤트 핸들러를 할당

 readyState

 요청의 상태를 나타내는 정수 값

 0 - 초기화 되지 않은 상태 (Uninitialized)

 1 - 로드되지 않은 상태(Loading)

      send() 메서드가 호출되지 않은 상태

 2 - 로드된 상태(Loaded)

      헤더와 상태는 받았지만, 응답은 받지 못한 상태

 3 - 상호작용 상태(Interactive)

      데이터의 일부만 받은 상태

 4 - 완료상태(Complete)

      모든 데이터를 받아서 완료된 상태

 responseText

 응답에 반환된 본문 콘텐츠

 responseXML

 본문 콘텐츠가 XML이라면, 본문 콘텐츠에서 XML DOM을 생성

 status

 서버에서 반환한 응답상태코드.

 성공은 200, 찾을 수 없음은 404 등

 statusText

 응답으로 반환된 상태 메시지

 

 

* 요청 보내기

XHR의 open() 메서드를 호출

xhr.open( 'GET', '/some/resource/url', Boolean값 );

 

요청을 서버로 전송하지 않는다.

URL과 HTTP메서드를 설정하는 데 사용

Boolean값이 true이거나 생략하면 비동기 호출, false면 동기 호출

 

GET요청은

xhr.send(null);

 

POST요청은

send() 메서드에 전달된 문자열은 반드시 이름과 값이 올바르게 URL로 인코딩된 쿼리 문자열 형태여야

xhr.send( 'a=1&b=2&c=3' );

 

 

* 진행 상태 확인하기

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {  ← 완료상태
    if (xhr.status >= 200 && xhr.status < 300) {  ← 성공상태
      document.getElementById('someContainer').innerHTML = xhr.responseText;
    }
  }
}

 

* 응답 얻기

Ajax 요청의 응답은 일반텍스트, HTML, JSON(JavaScript Object Notation)형태의 자바스크립트 객체나 배열일 수 있다.

응답의 본문은 .responseText 프로퍼티를 사용

MIME타입이 'text/xml'등의 XML형태는 .responseXML 프로퍼티를 사용

 

 

$.getScript( url, callback=Function )

url 매개변수가 명시한 서버에 GET 요청을 사용하여 스크립트를 가져오며,

성공했을 때 선택적으로 콜백 함수를 실행한다.

 

callback : 스크립트 자원이 로드되고 평가된 이후에 선택적으로 호출되는 함수

               서버에서 로드된 텍스트와 success 문자열이 매개변수로 전달된다.

 

스크립트를 가져오려고 사용한 XHR 인스턴스가 return 된다.

 

스크립트 파일을 가져오는데 Ajax 기능을 사용

스크립트는 파일에서 가져오고 난 뒤

인라인 스크립트가 실행되고

정의된 변수나 함수를 사용할 수 있다.

 

 

자바스크립트의 String은 처음과 끝에 있는 공백 문자열을 제거하는 메서드를 제공하지 않는다.

 

$.trim( value=String )

전달된 문자열 앞뒤에 있는 공백 문자를 제거하고 결과를 반환한다.

이 함수에 정의된 공백문자는 자바스크립트 정규표현식 '\s'와 일치한다.

이 값은 공백문자뿐 아니라 폼 피드, 개행, 리턴, 탭, 수직 탭 문자와

그 외에도 유니코드 문자인 \u00A0, \u2028, \u2029와도 일치한다.

 

원본 값은 수정되지 않는다.

 

전달하는 매개변수가 문자열인지 여부를 확인하지 않는다.

다른 타입의 값을 전달하면 undefined나 자바스크립트 에러가 발생한다.

 

$('#someField').val( $.trim( $('#someField').val() ) );

 

 

$.each( container=Array|Object, callback=Function )

전달된 컨테이너의 아이템을 순회하면서 아이템마다 전달된 콜백함수를 호출한다.

container : 순회할 아이템을 가진 배열 혹은 프로퍼티를 가진 객체

callback : 컨테이너의 엘리먼트마다 호출되는 함수.

               컨테이너가 배열이면 배열의 아이템마다 호출되고, 객체면 객체의 프로퍼티마다 호출된다.

               첫번째 매개변수는 배열의 인덱스이거나 객체 프로퍼티의 이름.

               함수 콘텍스트(this)는 두번째 매개변수로 설정

 

var anArray = ['a','b','c'];

$.each( anArray, function(n,value) { ... } );

var anObject = {a:1,b:2,c:3};

$.each( anObject, function(name,value) { ... } );

 

※ 배열을 순회할 때 false를 반환하면 반복을 벗어나지만

    객체 프로퍼티를 순회할 때는 그러한 효과가 없다.

 

 

$.grep( array, callback=Function|String, invert=Boolean )

전달된 배열의 엘리먼트마다 콜백 함수를 호출하면서 순회한다.

콜백 함수의 반환값은 $.grep()의 반환값에 포함될지를 결정한다.

invert 매개변수를 생략하거나 false이면 콜백의 값이 true이면 값이 수집된다.

invert가 true이면, 콜백의 값이 false일 경우 수집된다.

 

array : 필터링될 데이터 값을 가진 배열.  이 배열은 변경되지 않는다.

callback : 현재 데이터 값을 수집할지 결정하는 값을 반환하는 함수

               invert가 true가 아니면, true를 반환할 때 결과에 포함

               이 함수는 현재 데이터 값과 원본배열의 인덱스를 매개변수로 전달 받는다.

 

원본 배열은 변경되지 않는다.

필터링 하는 조건은 정규 표현식이 아니다.

 

콜백이 문자열이면,

전달된 문자열을 return구문의 값으로 사용한 두 매개변수를 가진 콜백 함수를 자동으로 생성한다.

var bigNumbers = $.grep(originalArray, 'a>100');

요롷게 생성한다. function(a,i) { return a>100; }

 

 

String 클래스의 match() 메서드를 사용하여 (정규식)패턴과 일치하는 값을 확인할 수 있다.

return value.match( /^\d{5}(-\d{4})?$/) != null;

 

 

$.map( array=Array, callback=Function|String )

전달된 배열의 아이템마다 콜백 함수를 호출하면서 순회하며,

함수 호출로 반환된 값은 새로운 배열로 수집된다.

 

array : 새로운 배열로 변환될 값을 가진 배열

callback : $.map()함수 호출의 결과로 반환될 새 배열에 수집되는 반환값을 가진 함수.

              이 함수에 매개변수가 두 개 전달된다.

              각각은 현재 데이터 값원본 배열에서의 인덱스다.

              콜백 함수로 변환될 문자열도 전달할 수 있다.

 

var oneBased = $.map( [0,1,2,3,4], function(value){ return value+1; } );

 

구문을 간단하게 만드는 표현식 형태의 문자열을 전달할 수 있다.

var oneBased = $.map( [0,1,2,3,4], 'a+1' );

 

함수가 null이나 undefined를 반환하면, 결과가 수집되지 않는다.

 

변환 함수가 배열을 반환할 때, 반환된 값을 결과로 반환할 배열에 합칠수 있다.

var characters = $.map(

     ['this', 'that', 'other thing'],

     function(value){ return value.split(''); }

);

characters의 값은 ['t','h','i','s','t','h','a','t','o','t','h','e','r',' ','t','h','i','n','g']

 

 

https://msdn.microsoft.com/library/66ztdbe6(v=vs.94).aspx

isNaN('S') : 문자열에서 숫자로 변환해본 결과를 확인

                  숫자형 문자면 false, 문자형 문자면 true

 

 

$.inArray( value=Object, array=Array )

array에서 value값이 처음 나타나는 위치 인덱스를 반환

var index = $.inArray( 2, [1,2,3,4,5] );

 

 

$.makeArray( object )

NodeList 같은 유사 배열 객체를 자바스크립트 배열로 변환

 

 

$.unque( array=Array )

DOM 엘리먼트의 배열이 주어지면,

원본 배열에서 고유한 엘리먼트로만 구성된 배열을 반환

 

 

$.extend( target=Object, source1, source2, ...sourceN )

target에 전달된 객체를 함께 전달된 나머지 객체의 프로퍼티를 사용하여 확장

 

target : 원본 객체의 프로퍼티를 복사하여 프로퍼티가 증가한 객체.

           이 객체는 함수의 반환값으로 반환되기 전에 새로운 프로퍼티로 직접 수정된다.

           원본 객체의 프로퍼티와 이름이 동일한 프로퍼티는 원본 엘리먼트의 값을 재정의된다.

 

source1, ...sourceN : target 객체에 추가되는 프로퍼티를 가진 두 개 이상의 객체.

                               원본 객체가 하나 이상 제공되고 객체들 안에 이름이 동일한 프로퍼티가 있을 때,

                               인수 목록에서 뒤에 나오는 원본 객체의 프로퍼티가

                               목록의 앞에 있는 원본 객체보다 우선한다.

 

var target     = { a: 1, b: 2, c: 3 };

var source1 = { c: 4, d: 5, e: 6 };

var source2 = { e: 7, f: 8, g: 9 };

$.extend( target, source1, source2 );

결과는 { a: 1, b: 2, c: 4, d: 5, e: 7, f: 8, g: 9 }

 

 

'plming > jQuery' 카테고리의 다른 글

Ajax  (0) 2015.05.14
동적으로 스크립트 로드하기  (0) 2015.05.13
다른 라이브러리와 jQuery 사용하기  (0) 2015.05.07
유틸리티 함수 - 플래그 사용하기  (0) 2015.05.07
[기타] 이벤트 사용할 때 고려해야 할...  (0) 2015.05.06

$.noConflict

$ 변수를 다른 라이브러리가 사용할 수 있게 만들며,

페이지에서 jQuery를 다른 라이브러리와 함께 사용할 수 있게 한다.

이 함수를 실행하면 jQuery함수는 $가 아닌 jQuery를 사용해 호출해야 한다.

 

하지만, $를 계속 쓰고 싶다면, 유사한 별칭을 정의할 수도 있다.

var $j = jQuery;

 

function($) 처럼, 인자로 전달해 function 안에서는 $를 사용할 수도 있다.

 

재사용 컴포넌트를 작성할 때는 $의 재정의를 고려해야 한다.

 

 

유틸리티 함수는 $이름공간에 속하며, 확장집합에서 동작하지 않고

$인스턴스에 정의되어 있다.

 

DOM엘리먼트보다는 자바스크립트 객체를 기반으로 동작하며

그렇지 않으면 객체와 관련되지 않은 동작을 수행한다.

 

메서드가 아닌 $에 정의된 변수를 이용해 정보를 제공한다.

 

 

* 사용자 브라우저 확인 방법 (참고만)

  . 지원하지 않는 브라우저라면 갑자기 에러가 발생

  . 모든 브라우저의 경우를 처리하는 거대하고 중첩된 조건문이 필요하므로, 확장성이 떨어짐

  . 사용자 에이전트 정보를 다른 값으로 변경할 수 있으므로 신뢰할 수 없음.

 

  . isIE, isFirefox, isSafari식의 특정 브라우저에 따라 처리하는 코드보다는

    객체 탐지(Object Detection)가 조금 더 낫다.

    : 특정 객체나 프로퍼티/메서드가 존재하는지 확인하여 분기하는 코드

      if( element.attachEvent ) { element.attachEvent('onclick', someHandler ); }

      else if( element.addEventListener ) { element.addEventListener('click', someHandler ); }

      else { throw new Error('이벤트 핸들링이 지원되지 않습니다.'); }

 

  . 객체 탐지도 반드시 필요하지 않다면, 사용하지 않는 것이 최선

    하지만 크로스 브라우저 문제에 직면한다면 다른 방식보다 먼저 고려해야

 

  . 객체 탐지로 동일한 결과를 가지는 경우(매개변수의 타입이 다른 경우)에는

    최적화와 거리가 멀지만 브라우저 탐지에 의지해야...

    : 매개변수가 객체참조인지 정수값인지를 확인할 수 없으므로

 

 

$.browser.xxx

현재 사용자 에이전트가 속한 브라우저 종류를 찾으려고 사용하는 플래그 집합을 정의

- msie : 인터넷 익스플로러로 식별하면 true

- mozilla : 모질라 기반 브라우저로 식별하면 true. 파이어폭스, 카미노, 넷스케이프

- safari : 사파리/옴니웹같은 사파리 기반 브라우저로 식별하면 true

- opera : 오페라로 식별하면 true

- version : 브라우저가 사용하는 렌더링 엔진의 버전 (브라우저의 버전 아님)

 

 

* 박스 모델 확인 방법 : $.boxModel

  대부분의 브라우저는 W3C 박스 모델을 지원(true)하지만,

  인터넷 익스플로러는 strict모드와 quirks모드로 랜더링

  랜더링 방식에 따라 코드를 작성해야 하는 경우에 사용

 

  두 모델의 차이는 width와 heigh 스타일을 어떻게 해석하느냐

  W3C 모델 : 엘리먼트 콘텐츠의 크기에 패딩과 테두리의 넓이를 더하지 않음

 

 

$.styleFloat

   cssFloat / styleFloat=IE

 

 

이것들 대신,

jQuery.support.xxx 사용

$( "div#view" ).style[ jQuery.support.cssFloat ? "cssFloat" : "styleFloat" ] = "left";

 

 

+ Recent posts