Web - 8) 제이쿼리를 사용한 태그 제어와 Ajax

WEB

제이쿼리(jQuery)는 웹 개발에서 매우 유용한 JavaScript 라이브러리로, HTML 문서의 탐색, 이벤트 처리, 애니메이션, Ajax 요청을 간편하게 다룰 수 있게 도와줌

제이쿼리 기본 사용법

제이쿼리를 사용하려면 제이쿼리 라이브러리를 다운로드 받아서 소스에 포함하거나

CDN(Content delivery network, 컨텐츠 전송 네트워크)을 사용해 HTML 파일에 추가 해야됨

기본 문법

제이쿼리는 $() 함수를 사용하여 DOM(Document Object Model) 요소를 선택하고 조작할 수 있음

$(선택자).메소드();

 

선택자(selector)는 HTML 엘리먼트를 선택하는 방법이며, 메소드는 선택한 엘리먼트에 적용할 작업을 정의임

제이쿼리 셀렉터는 다양한 방법으로 HTML 엘리먼트를 선택할 수 있음

기본 셀렉터: HTML 태그, 클래스, ID로 선택

$("div"); // 모든 <div> 엘리먼트 선택
$(".class-name"); // 클래스가 "class-name"인 엘리먼트 선택
$("#id-name"); // ID가 "id-name"인 엘리먼트 선택

 

속성 셀렉터: 특정 속성 값을 가진 엘리먼트 선택

$("input[name='username']"); // name 속성이 'username'인 <input> 선택

 

자식 셀렉터: 특정 요소의 자식 요소 선택

$("ul > li"); // <ul>의 직계 자식 <li> 요소 선택

 

후손 셀렉터: 특정 요소의 모든 후손 요소 선택

$("div p"); // <div> 안의 모든 <p> 요소 선택

HTML 엘리먼트 내용에 접근하기 - get/set

제이쿼리를 사용하여 HTML 엘리먼트의 내용을 읽거나 수정할 수 있음

(1) 내용 읽기

text(): 엘리먼트의 텍스트 콘텐츠를 가져옴

var content = $("p").text(); // <p> 요소의 텍스트를 가져옴

 

html(): 엘리먼트의 HTML 콘텐츠를 가져옴

var content = $("div").html(); // <div> 요소의 HTML을 가져옴

(2) 내용 설정

text(): 엘리먼트의 텍스트 콘텐츠를 설정함

$("p").text("새로운 텍스트"); // <p> 요소의 텍스트를 "새로운 텍스트"로 설정

 

html(): 엘리먼트의 HTML 콘텐츠를 설정함

$("div").html("<span>새로운 HTML</span>"); // <div> 요소의 HTML을 새롭게 설정

 

val(): 폼 필드의 값을 지정하거나 얻어냄

제이쿼리 이벤트 처리

제이쿼리를 사용하면 다양한 이벤트를 쉽게 처리할 수 있음. 마우스, 키보드, 폼, 도큐먼트/윈도우 이벤트 등

(1) 마우스 이벤트

click(): 클릭 이벤트를 처리

mouseenter(): 마우스가 요소에 들어올 때 호출

mouseleave(): 마우스가 요소에서 나갈 때 호출

(2) 키보드 이벤트

keydown(): 키가 눌릴 때 호출

keyup(): 키가 떨어질 때 호출

(3) 폼 이벤트

submit(): 폼이 제출될 때 호출

change(): 입력 값이 변경될 때 호출

(4) 도큐먼트/윈도우 이벤트

ready(): DOM이 완전히 로드된 후 호출

resize(): 윈도우 크기가 조정될 때 호출

제이쿼리 Ajax

jQuery에서 Ajax는 Ajax 기능을 구현한 메소드들을 사용함. 이 메소드들은 서버로부터 TEXT, HTML, XML

또는 JSON 형태의 파일을 요청하고 응답답을 수 있는 기능을 제공함 이 메소드들을 사용하면 간단한 코드만을

사용해서 Ajax 기능을 구현할 수 있음

메소드명	설명
$.get()	서버로 HTTP get 방식의 요청을 함
$.getJSON()	HTTP get 방식을 사용해서 JSON 데이터를 요청함
$.post()	서버로 HTTP post 방식의 요청을 함
.load()	서버로 데이터를 요청하고 HTML 엘리먼트에 응답받은 결과를 로드함(넣음)
$.ajax()	비동기 Ajax 요청을 수행함. get, post 방식을 지정해서 사용

 

$.ajax()

가장 유연한 Ajax 메소드로, 다양한 설정을 통해 요청을 보낼 수 있음

$.ajax({
  url: "data.json",
  method: "GET",
  dataType: "json",
  success: function(data) {
    console.log(data); // 요청 성공 시 실행
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("요청 실패: " + textStatus); // 요청 실패 시 실행
  }
});

$.ajax() 메소드는 url, method, data, dataType, success, error 등 다양한 옵션을 통해 요청을 세밀하게 설정할 수 있음

(1) jqXHR

• 설명: jqXHR 객체는 제이쿼리의 XMLHttpRequest 객체. 표준 XMLHttpRequest 객체와 유사하지만, 제이쿼리에서 제공하는 추가적인 메소드와 속성들이 포함되어 있음
• 용도: jqXHR 객체를 사용하여 요청의 상태, 헤더, 응답 등을 조사할 수 있음. 예를 들어, 요청의 상태를 확인하거나, 서버에서 반환된 헤더 정보를 얻을 수 있음

(2) textStatus

• 설명: textStatus는 요청의 결과 상태를 나타내는 문자열임. 다양한 상태 값을 가질 수 있으며, 가장 일반적인 값들은 다음과 같음
  • "timeout": 요청이 시간 초과로 실패했음을 의미
  • "error": 요청이 실패했음을 나타냄
  • "abort": 요청이 중단되었음을 나타냄
  • "parsererror": 응답이 JSON 등으로 파싱될 수 없음을 나타냄
• 용도: textStatus는 오류의 유형을 파악하는 데 유용함

(3) errorThrown

• 설명: errorThrown은 실제로 발생한 오류 메시지 또는 예외를 설명하는 문자열임. 이 값은 주로 서버 측에서 발생한 오류를 의미함
• 용도: errorThrown을 통해 서버 측 오류 메시지나 예외에 대한 구체적인 정보를 얻을 수 있음