[JavaScript] jQuery란? 주요 문법과 메서드, jQuery ajax

[ JQuery ]

• 자바스크립트 프레임워크 또는 라이브러리
• 브라우저에 상관없이
• $표시를 쓰기 때문에 Vue나 React에선 못씀(순수 Javascript 써야함)

 

1. jQuery 라이브러리 사용

1) 라이브러리를 직접 다운

• 인터넷 없이도 사용 가능
• uncompressed(압축되지 않아 보기 편), minified, slim, slim minified

<!-- 다운받은 파일을 서버에 저장 후 링크 -->
<script src="./js/jquery-3.7.1.min.js"></script>

 

2) CDN 사용

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>

⚠️ CDN을 사용하는 이유
- 이미지와 스크립트를 여러 서버에 분산해 사용자가 더 빠르게 로드가능
- 많은 사이트가 같은 CDN을 사용하므로 방문자 브라우저에 이미 캐시되어 있을 가능성이 높아 다운로드 없이 바로 사용 가능할 수도 있음

 

2. JavaScript와 JQuery 차이

• JavaScript는 속성(property)으로 접근하는 방식
• JQuery는 메서드(method)로 호출하는 방식

 

1) DOM 요소 선택

// JavaScript
document.getElementById("id")
document.querySelector("선택자")
document.querySelectorAll("선택자")

// jQuery
$("선택자")

⚠️ JavaScript과 jQuery 방식은 리턴하는 객체의 타입이  다름

 

2) 이벤트 처리

• $객체는 Javascript 객체가 아니라 JQuery 객체여야함

// JavaScript
요소.addEventListener("이벤트명", 콜백);
요소.onclick = function() {};

// jQuery
$객체.on("이벤트명", 콜백);
$객체.bind("이벤트명", 콜백);
$객체.click(콜백);

// jQuery 여러 이벤트 한번에
$객체.on({
    이벤트명: 콜백,
    ...
});

 

3) 요소 값

• JS는 속성, jQuery는 메서드
• 자바스크립트의 변수와 겹치지 않도록 하기 위해 대부분 jQuery의 호출명과 다름(ex value()가 아닌 val())

// JavaScript - 속성(property) 방식
element.innerHTML    // 태그 포함 컨텐츠
element.textContent  // 텍스트
element.value        // input 값

// jQuery - 메서드(method) 방식
$el.html()   // 태그 포함 컨텐츠
$el.text()   // 텍스트
$el.val()    // input 값

 

4) DOM 로드 후 실행

// JavaScript
window.onload = function() {}
<script defer src="xxx.js">

// jQuery
$(function() {
    // 코드
});

 

5) 스타일 변경

// JavaScript - style 속성 방식
요소.style.color = "red";

// JavaScript - setAttribute 방식
요소.setAttribute("style", "color: red");

// jQuery
$객체.css("속성이름", "속성값");
$객체.css("color", "red");

 

6) 반복

// JavaScript
for(var i=0; i<elements.length; i++) {
    elements[i].addEventListener(...)
}

// jQuery 
$.each(elements, function(index, item) { //index=인덱스, item=현재 요소
    ...
})

 

7) 메서드 체인

// JavaScript 
// 대부분 속성으로 정의 → 체인 불가

// jQuery 
// 대부분 메서드로 정의 → 체인 가능
$("#box").css("color","red").text("내용").show();

 

3. jQuery 요소 관련 메서드

1) .val()

• input, select 등의 요소에서 value 값을 가져오거나 설정
• JS의 document.getElementById("txtName").value 와 동일

$("input").val()                         // 읽기
$("input").val("값")                     // 쓰기
$("input").val(function(index, value) {  // 함수로 쓰기
    return value + "추가"
})

 

2) .text() / .html()

구분	.text()	.html()
가져오는 것	순수 텍스트만	html 태그 포함 모든 내용
JS 대응	textContent	innerHTML

// .text()
$("div").text()                           // 읽기
$("div").text("텍스트")                    // 쓰기
$("div").text(function(index, text) {})   // 함수로 쓰기

// .html()
$("div").html()                               // 읽기
$("div").html("<b>html 포함</b>")             // 쓰기
$("div").html(function(index, oldhtml) {})    // 함수로 쓰기

 

 

4.  jQuery 속성 관련 메서드

1) .attr()

// 읽기
$("img").attr("src")              // 해당 속성 값 리턴

// 쓰기
$("img").attr("src", "img.png")   // 속성 값 설정

// 여러 개 한번에
$("img").attr({
    src: "img.png",
    alt: "이미지"
})

// 함수로 설정
$("img").attr("src", function(index, attr) {
    return attr + "_new.png"
})

2) .removeAttr()

• 값만 지우는게 아니라 속성 자체를 삭제함

$("img").removeAttr("src")  // 속성 자체를 삭제

 

5. jQurey AJAX

• 페이지 새로 고침 없이 서버와 비동기 통신하는 기술.
• jQuery는 $.ajax()를 통해 AJAX를 더 쉽게 사용할 수 있도록 지원

 

1) $.ajax() 기본 구조

$.ajax({
  url: 'https://api.example.com/posts',  // 요청 보낼 주소
  type: 'POST',                           // GET / POST / PUT / DELETE
  data: JSON.stringify({                  // 서버에 전송할 데이터
    title: 'foo',
    body: 'bar'
  }),
  contentType: 'application/json; charset=UTF-8',  // 전송 형식
  dataType: 'json',                                // 응답 예상 형식
  success: function(response) {
    console.log(response);               // 성공 시 처리
  },
  error: function(xhr, status, error) {
    console.error('에러:', error);        // 실패 시 처리
  }
});

 

2) jQuery AJAX 주요 메서드

메서드	설명
$.ajax()	AJAX 요청 수행 (가장 기본)
$.get()	GET 방식으로 데이터 로드
$.post()	POST 방식으로 데이터 로드
$.getJSON()	GET 방식으로 JSON 데이터 로드
$.getScript()	GET 방식으로 JS 파일 로드 및 실행
load()	서버 데이터를 선택한 요소 안에 삽입
ajaxComplete()	요청 완료 시 실행할 함수 지정
ajaxError()	요청 실패 시 실행할 함수 지정
ajaxSuccess()	요청 성공 시 실행할 함수 지정
serialize()	form 요소를 문자열로 인코딩