본문 바로가기

plming/jQuery

jQuery 사용자 정의 플러그인 jQuery 커맨드들을 사용하여 공통적으로 사용할 수 있도록 패턴화. jQuery 유틸리티화. - 잇점 사이트 전체에 (동일 플러그인을 가져다쓴 곳들에서) 일관된 jQuery 코드 스타일을 유지 jQuery의 라이브러리 구조/재사용성을 고려한 구성을 따라 설계 jQuery가 제공하는 코드들을 활용할 수 있다. - 형식 $에 정의된 유틸리티 함수 jQuery 확장 집합에서 동작하는 메서드 - 명명 파일의 이름이 다른 파일과 충돌하지 않도록 만들어야 . 접두어로 jquery. 을 사용 . 이어서 플러그인 이름 (플러그인의 성격을 알 수 있는?) . 확장자는 .js로 $의 변경에 영향을 받지 않는 유일한 방법은? $를 사용하지 않는 것. jQuery.say = function(what) { alert( wha.. 더보기
animation 효과 . hide( speed=Number|String, callback=Function ) 확장 집합의 엘리먼트를 감춘다. 매개변수 없이 호출하면 엘리먼트의 display 스타일 프로퍼티 값을 즉시 none으로 설정한다. speed 매개변수를 제공하면 크기와 불투명도(opacity)를 점차 0으로 줄여가다가 지정된 시간이 되면 display 스타일 프로퍼티 값을 none으로 설정해서 엘리먼트를 화면에서 감춘다. 선택적으로 애니메이션이 완료된 뒤 호출될 콜백 함수를 지정한다. speed : 선택사항으로 효과가 지속될 시간을 1/1000초 단위의 숫자 또는 미리 정의된 문자열(slow/normal/fast)가운데 하나로 명시한다. 생략하면 애니메이션은 수행되지 않으며 엘리먼트는 즉시 화면에서 제거된다. call.. 더보기
Ajax 요청 직접 제어하기 Ajax 요청의 생성과 관련된 jQuery의 모든 함수와 커맨드는 이 함수를 사용하여 요청을 전송 $.ajax( options=Object ) 요청의 생성 방법과 통보 받을 콜백을 제어하고자 전달된 option을 사용하여 Ajax 요청을 전송 option : 요청에 대한 매개변수를 정의하는 프로퍼티를 소유한 객체 인스턴스 이름 타입 설명 url String 요청 URL type String 사용할 HTTP 메서드. 일반적으로 POST나 GET을 사용. 생략하면 기본 값으로 GET을 사용 data Object 요청에 전달되는 프로퍼티를 가진 객체. GET요청이면 데이터는 쿼리 문자열로 제공 POST요청이면 데이터는 요청의 본문으로 제공 두 경우 모두 $.ajax() 유틸리티 함수가 값의 인코딩을 처리 da.. 더보기
Ajax - GET/POST 요청 만들기 GET 요청은 동일한 메서드를 여러번 반복호출해도 동일한 결과를 얻을 때 사용한다. 브라우저가 HTTP 메서드에 따라 캐싱여부를 결정하기 때문이다. POST 요청은 서버로 전송한 데이터로 추가/변경 작업을 할 때 사용한다. $.get( url, parameters=Object|String, callback=Function ) 매개변수로 명시된 URL을 사용하여 서버에 대한 GET요청을 전송한다. 매개변수는 쿼리 문자열로 전달한다. parameters : URL에 덧붙이는 쿼리 문자열을 구성하려고 이름과 값의 쌍으로 프로퍼티를 지닌 객체 미리 구성 및 인코딩된 쿼리 문자열 callback : 요청이 완료되면 호출되는 함수 응답 본문은 이 콜백 함수의 첫 번째 매개변수로 전달되며, 상태 값은 두번째 매개변수.. 더보기
Ajax - 엘리먼트에 콘텐츠 로드하기 . load( url, parameters=Object, callback=Function ) URL과 선택적인 매개변수로 Ajax요청을 전송한다. 콜백 함수는 요청이 완료되면 호출된다. 응답텍스트는 일치하는 엘리먼트의 콘텐츠를 대체한다. parameters : 요청으로 전달하기 위해 올바르게 인코드된 매개변수로 직렬화되는 프로퍼티를 가진 객체. 이 매개변수를 명시하면 요청은 POST메서드를 사용하고, 생략하면 GET메서드를 사용 callback : 응답 결과 데이터가 일치하는 엘리먼트로 로드된 이후에 호출되는 콜백함수. 이 함수로 전달되는 매개변수는 응답텍스트, 상태코드, XHR인스턴스다. 응답으로 반환된 엘리먼트를 필터링하려고 할 때는 요청URL에 셀렉터를 추가하면 된다. $('.injectMe').l.. 더보기
Ajax 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() 현재 실행하는 요청을 취소 .. 더보기
동적으로 스크립트 로드하기 $.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( co.. 더보기
다른 라이브러리와 jQuery 사용하기 $.noConflict $ 변수를 다른 라이브러리가 사용할 수 있게 만들며, 페이지에서 jQuery를 다른 라이브러리와 함께 사용할 수 있게 한다. 이 함수를 실행하면 jQuery함수는 $가 아닌 jQuery를 사용해 호출해야 한다. 하지만, $를 계속 쓰고 싶다면, 유사한 별칭을 정의할 수도 있다. var $j = jQuery; function($) 처럼, 인자로 전달해 function 안에서는 $를 사용할 수도 있다. 재사용 컴포넌트를 작성할 때는 $의 재정의를 고려해야 한다. 더보기
유틸리티 함수 - 플래그 사용하기 유틸리티 함수는 $이름공간에 속하며, 확장집합에서 동작하지 않고 $인스턴스에 정의되어 있다. DOM엘리먼트보다는 자바스크립트 객체를 기반으로 동작하며 그렇지 않으면 객체와 관련되지 않은 동작을 수행한다. 메서드가 아닌 $에 정의된 변수를 이용해 정보를 제공한다. * 사용자 브라우저 확인 방법 (참고만) . 지원하지 않는 브라우저라면 갑자기 에러가 발생 . 모든 브라우저의 경우를 처리하는 거대하고 중첩된 조건문이 필요하므로, 확장성이 떨어짐 . 사용자 에이전트 정보를 다른 값으로 변경할 수 있으므로 신뢰할 수 없음. . isIE, isFirefox, isSafari식의 특정 브라우저에 따라 처리하는 코드보다는 객체 탐지(Object Detection)가 조금 더 낫다. : 특정 객체나 프로퍼티/메서드가 존.. 더보기