jQuery 기본개념 & 문법들

유진·2021년 1월 18일

jQuery란?

jQuery는 빠르고, 작고, 기능이 많은 자바스크립트 라이브러리이다.
jQuery는 다양한 브라우저에서 동작하는 쉬운 API로, HTML 문서에 대한 순회 및 조작, 이벤트 핸들링, 애니메이션, Ajax등을 더 간단하게 만든다. 다재다능성과 확장성을 겸비한 jQuery는 수많은 사람들이 자바스크립트를 쓰는 방식을 바꾸었다.

(출처: jQuery 홈페이지)

jQuery 간단하게 살펴보기

1) DOM 순회 및 조작

class가 'continue'인 <button> 요소를 가져오고, HTML을 'Next Step...'으로 바꾸기

$("button.continue").html("Next Step...");

2) 이벤트 핸들링

#button-container에 해당되는 button을 클릭했을 때, CSS의 display:none으로 숨겨진 #banner-message 요소를 보여주기

var hiddenBox = $("#banner-message");
$("#button-container button").on("click", function (event) {
  hiddenBox.show();
});

3) Ajax

서버의 /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 시작하기)

jQuery.ready(callbackF)

document가 준비되면 파라미터의 콜백함수를 실행한다.

//`$(document)`라는 HTML이 전부 로딩되면 파라미터 안에 있는 함수가 실행된다.
$(document).ready(function () {
  bingo.init();
});

.prepend(content[, content])

parameter: 삽입하고자 하는 content
jQuery 컬렉션의 각 요소의 맨 앞에 content를 삽입한다.

<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()

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
- settings: Ajax 리퀘스트를 구성하는 키값 쌍의 집합. url은 필수값이며, 그 외 모든 속성은 옵션이다. $.ajaxSetup()을 사용하여 모든 옵션에 대한 기본값을 설정할 수 있다. [jQuery.ajax(settings)]에서 모든 세팅 종류를 확인할 수 있다. type 속성은 기본적으로 get으로 설정된다.
```
//jQuery.get([settings]) 예제
$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType,
});
```

jQuery.post()

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
- settings: Ajax 리퀘스트를 구성하는 키값 쌍의 집합. url은 필수값이며, 그 외 모든 속성은 옵션이다. $.ajaxSetup()을 사용하여 모든 옵션에 대한 기본값을 설정할 수 있다. [jQuery.ajax(settings)]에서 모든 세팅 종류를 확인할 수 있다. type 속성은 기본적으로 post로 설정된다.
```
//jQuery.get([settings]) 예제
$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType,
});
```