jQuery는 빠르고, 작고, 기능이 많은 자바스크립트 라이브러리이다.
jQuery는 다양한 브라우저에서 동작하는 쉬운 API로, HTML 문서에 대한 순회 및 조작, 이벤트 핸들링, 애니메이션, Ajax등을 더 간단하게 만든다. 다재다능성과 확장성을 겸비한 jQuery는 수많은 사람들이 자바스크립트를 쓰는 방식을 바꾸었다.
(출처: jQuery 홈페이지)
class가 'continue'인 <button>
요소를 가져오고, HTML을 'Next Step...'으로 바꾸기
$("button.continue").html("Next Step...");
#button-container
에 해당되는 button
을 클릭했을 때, CSS의 display:none
으로 숨겨진 #banner-message
요소를 보여주기
var hiddenBox = $("#banner-message");
$("#button-container button").on("click", function (event) {
hiddenBox.show();
});
서버의 /api/getWeather
에 있는 로컬 스크립트를 쿼리 파라미터 zipcode=97201
과 함께 호출하고, #weather-temp
의 HTML을 리턴된 값으로 교체하기.
$.ajax({
url: "/api/getWeather",
data: {
zipcode: 97201,
},
success: function (result) {
$("#weather-temp").html("<strong>" + result + "</strong> degress");
},
});
(출처: jQuery 홈페이지)
Ajax란?
Ajax는 비동기 자바스크립트와 XML(Asynchronous JavaScript And XML)을 의미한다. 서버와 통신하기 위해XMLHttpRequest
객체를 사용하며, JSON, XML, HTML, 일반 텍스트형식 등 다양한 포맷을 주고받을 수 있다.
Ajax의 가장 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행되는 비동기성이다. 이러한 비동기성을 통해 클라이언트의 이벤트가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다.
(출처: MDN - Ajax 시작하기)
document가 준비되면 파라미터의 콜백함수를 실행한다.
//`$(document)`라는 HTML이 전부 로딩되면 파라미터 안에 있는 함수가 실행된다.
$(document).ready(function () {
bingo.init();
});
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$(".inner").prepend("<p>Test</p>");
<h2>Greetings</h2>
<div class="container">
<div class="inner">
<p>Test</p>
Hello
</div>
<div class="inner">
<p>Test</p>
Goodbye
</div>
</div>
기존에 있는 요소를 인자로 넘길 수 있다.
$(".container").prepend($("h2"));
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
jQuery.get(url[, data][, success][, dataType])
parameters
url: 리퀘스트가 보내질 URL
data: 리퀘스트와 함께 보내질 객체나 문자열
success: 리퀘스트를 성공하면 실행되는 콜백 함수. dataType
이 제공된 경우 필요하지만, 콜백함수 대신 null
이나 jQuery.noop
을 사용할 수 있다.
dataType: 서버에서 예상되는 데이터 유형. 기본값: 지능형 추측(xml, json, script, text, html)
//jQuery.get() 예제
$.get("test.php", { name: "John", time: "2pm" }, function (data) {
alert("Data Loaded: " + data);
});
jQuery.get([settings])
parameters
url
은 필수값이며, 그 외 모든 속성은 옵션이다. $.ajaxSetup()
을 사용하여 모든 옵션에 대한 기본값을 설정할 수 있다. [jQuery.ajax(settings)]에서 모든 세팅 종류를 확인할 수 있다. type
속성은 기본적으로 get
으로 설정된다.//jQuery.get([settings]) 예제
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType,
});
jQuery.post(url[, data][, success][, dataType])
parameters
url: 리퀘스트가 보내질 URL
data: 리퀘스트와 함께 보내질 객체나 문자열
success: 리퀘스트를 성공하면 실행되는 콜백 함수. dataType
이 제공된 경우 필요하지만, 콜백함수 대신 null
이나 jQuery.noop
을 사용할 수 있다.
dataType: 서버에서 예상되는 데이터 유형. 기본값: 지능형 추측(xml, json, script, text, html)
//jQuery.post() 예제
$.post("test.php", { name: "John", time: "2pm" }, function (data) {
alert("Data Loaded: " + data);
});
jQuery.post([settings])
parameters
url
은 필수값이며, 그 외 모든 속성은 옵션이다. $.ajaxSetup()
을 사용하여 모든 옵션에 대한 기본값을 설정할 수 있다. [jQuery.ajax(settings)]에서 모든 세팅 종류를 확인할 수 있다. type
속성은 기본적으로 post
로 설정된다.//jQuery.get([settings]) 예제
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType,
});
jQuery.noop()
은 빈 함수이다. 아무것도 하지 않는 함수를 넘기길 원하는 경우 jQuery.noop()
을 사용할 수 있다.
콜백함수가 옵션으로 들어가는 메서드에서 유용하게 쓸 수 있다.