jQuery

jQuery

jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. 존 레식이 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다. jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다.

jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서v2의 듀얼 라이선스를 가진 자유 오픈 소프트웨어이다. jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다.

마이크로소프트와 노키아는 자사 플랫폼에 jQuery를 포함하는 계획을 발표한 바 있다. 마이크로소프트는 비주얼스튜디오의 ASP.NET AJAX 프레임워크와 ASP.NET MVC 프레임워크에 적용했고, 노키아는 자사의 런타임 웹 위젯 개발 플랫폼에 통합하였다. 또한, jQuery는 미디어위키에도 1.16 버전부터 사용되고 있습니다.

jQuery 구문

jQuery 구문은 HTML 요소 를 선택 하고 요소에 대한 작업 을 수행 하도록 맞춤화되었습니다 .

기본 구문은 $(selector).action() 입니다

• jQuery를 정의 / 액세스하기위한 $ 부호
• HTML 요소를 "쿼리 (또는 찾기)" 하는 A ( selector )
• 요소에서 수행 할 jQuery 작업 ()

예시 :

$(this).hide() -현재 요소를 숨 깁니다.

$("p").hide() -모든 <p> 요소를 숨 깁니다.

$(".test").hide() -class = "test"인 모든 요소를 ​​숨 깁니다.

$("#test").hide() -id = "test"로 요소를 숨 깁니다.

jQuery이벤트

웹 페이지가 응답 할 수있는 모든 다른 방문자의 조치를 이벤트라고합니다.

이벤트는 무언가가 발생하는 정확한 순간을 나타냅니다.

예 :

• 요소 위로 마우스 이동
• 라디오 버튼 선택
• 요소를 클릭

일반적인 DOM 이벤트는 다음과 같습니다.

마우스 이벤트	키보드 이벤트	폼 이벤트	윈도우 이벤트
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

Jquery로 ajax 사용하기

 jquery를 이용하면 좀 더 간편하게 ajax 통신을 할 수 있습니다. 

 

기본 사용법

$.ajax({
    type: "post",
    url: "/test",
    data: {param: 'string'},
    success: function() {
        alert('성공');
    }
         ...
});

 기본 사용법은 ajax 괄호 안에 ajax 관련 속성과 값을 설정하여 통신할 수 있습니다. ajax 관련 속성은 아래와 같습니다.

 

분류	속성	설명
기본	type	통신 타입을 설정합니다. (get, post)
	url	요청할 url을 설정합니다.
	data	서버에 요청할 때 보낼 매개변수를 설정합니다.
	dataType	응답 받을 데이터 타입을 설정합니다.(xml, plain, html, json 등)
설정	async	비동식으로 처리할지의 여부를 설정합니다. (true일 경우 비동기식, false일 경우 동기식)
	statusCode	HTTP 상태코드에 따라 분기처리되는 함수를 설정합니다.
	jsonp	jsonp를 사용할 때 이용하는 파라미터명을 설정합니다.
	async	비동기 통신의 여부를 설정합니다.
	contentType	서버로 요청할 데이터 타입을 설정합니다. (application/json, text/plain, text/html 등)
처리함수	success	요청 및 응답에 성공했을 때 처리 구문을 설정합니다.
	error	요청 및 응답에 실패했을 때 처리 구문을 설정합니다.
	complete	모든 작업을 마친 후 처리 구문을 설정합니다.
	beforeSend(xhr)	ajax 요청이 가기 전에 실행하는 처리 구문을 설정합니다.

 

예시

$.ajax({
    type: "post",
    url : "/url",
    data : {sampleInput : "sampleData"},
    success : function(data) {
        // Sucess시, 처리
        alert(data);
    }, 
    error : function(xhr, textStatus, errorThrown){
        // Error시, 처리
        alert(xhr);
        alert(textStatus);
        alert(errorThrown);
    }
});

 

Ajax와 콜백함수

ajax 통신을 하고 나서 실행되는 콜백 함수를 설정하여 후처리를 통신 후 처리를 진행할 수 있습니다.

 

콜백함수	설명
done(callback)	요청 성공 시에 호출되는 함수입니다.
fail(callback)	요청 실패 시에 호출되는 함수입니다.
always(callback)	성공, 실패 관계 없이 항상 호출되는 함수입니다.

done

$.ajax({
    url : "/url",
    data : {
      name : "gil-dong",
      location : "seoul"
    },
})
.done(function(data) {
    // 전송한 data를 출력 
    alert(data);
});

ajax 콜백 함수는 ajax 함수에 연결 연산자를 붙여서 사용합니다.