[Web] jQuery 기본 문법 및 Ajax

sua_ahn·2023년 2월 7일
2

Web

목록 보기
7/13
post-thumbnail

jQuery

: JavaScript를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 JavaScript 라이브러리

jQuery 사용

→ jQuery를 사용하기 위해서 보통 CDN을 script 태그의 src 속성값으로 불러옴
→ 일반적으로 head 태그에 삽입

CDN (Content Delivery Network)
: 콘텐츠를 효율적으로 전달하기 위해 네트워크에 데이터를 저장하여 제공하는 시스템

  1. Google 호스팅 라이브러리 또는 W3Schools jQuery CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  1. jQuery 공식 홈페이지
<script src="https://code.jquery.com/jquery-latest.min.js"></script>

 


기본 문법

// 기본 형태
$(선택자).함수();

작성 시작

JavaScript 코드는 웹 브라우저가 HTML 문서의 모든 요소를 로드한 뒤에 실행되어야 함!
(문서 로드 전에 JavaScript로 HTML 요소를 조작하거나, 이미지 등의 외부리소스를 사용하려고 할 경우 오류가 발생하므로)

document 객체의 ready() 메소드를 이용
(JavaScript에서는 window 객체의 onload() 메소드 이용)

$(document).ready(function() {
	// 문서 로드 완료
  	// 코드 작성
});

 

선택자 Selector

주로 사용하는 선택자 종류

선택자예시
객체object
태그"element"
아이디"#id"
클래스".class"
속성"[attr='value']"
input요소 속성":checked", ":selected"

 

함수

getter & setter

함수설명
.html()선택 요소의 html코드에 접근
.text()선택 요소의 text요소에 접근
.attr()선택 요소의 html 속성값에 접근
.prop()선택 요소의 JavaScript 특성값에 접근
.val()선택한 form 요소의 값 접근
// html
$("div").html("<span>텍스트</span>");	// setter
let newCode = $("span").html();			// getter

// text
$("p").text("텍스트만");				// setter
let newText = $("p").text();		// getter

// attr
$("img").attr("src", "image.png");	// setter
let imgSrc = $("img").attr("src");	// getter

// val
$('input[type=text]').val("텍스트값 추가");	// setter
const name = $("#name").val();				// getter

요소 탐색

함수설명
.parent()부모 요소 선택
.siblings()형제 요소들 선택
.children()자식 요소들 선택

요소 조작

함수설명
.css()선택 요소의 CSS 스타일에 접근
.append()선택 요소의 마지막에 콘텐츠 추가
.appendTo()선택 요소를 해당 요소의 마지막에 추가
.remove()선택 요소 삭제
.empty()자손 요소 삭제

이펙트

함수설명
.hide()선택 요소 숨김 (css display: none → 영역 차지X)
.show()선택 요소 표시
.toggle()선택 요소의 현재 표시 상태에 따라 숨기거나 표시

이벤트 처리

함수설명
.on()선택 요소에 이벤트 연결
.off()이벤트 연결 해제
.click()선택 요소를 마우스로 클릭했을 때
.mouseenter()마우스가 선택 요소 위에 있을 때
.mouseleave()마우스가 선택 요소 위에서 벗어날 때
.change()input 요소값이 바꼈을 때
.submit()form 요소 제출
$("ul").children().css("list-style", "none");

$("#formBtn").click(function() {
  	// 제출 전 유효성 검사 가능
	$("form").attr("action", "index.jsp").submit();
});


// on
$("button").on({
    mouseenter: function() {
        $("#text").append("Hi!<br>");
    },
  	click: function() {
    	$("#text").toggle();
    },
    mouseleave: function() {
        $("#text").append("Bye!<br>");
    }
});

// script로 추가한 요소 선택 후 이벤트 처리 시
$(document).on("click", "#btn", function(){
	$("#text").text("버튼 클릭!");
});

 


jQuery를 이용한 Ajax

.ajax()함수의 property

$.ajax ({
  url	: "url", // (Required) 요청이 전송될 URL 주소
  type	: "GET", // (default: ‘GET’) http 요청 방식
  async : true,  // (default: true, asynchronous) 요청 시 동기화 여부
  cache : true,  // (default: true, false for dataType 'script' and 'jsonp') 캐시 여부
  timeout : 3000, // (ms) 요청 제한 시간 안에 완료되지 않으면 요청을 취소하거나 error 콜백 호출
  data  : {key : value}, // 요청 시 전달할 데이터
  processData : true, // (default: true) 데이터를 컨텐트 타입에 맞게 변환 여부
  contentType : "application/json", // (default: 'application/x-www-form-urlencoded; charset=UTF-8')
  dataType    : "json", // (default: Intelligent Guess (xml, json, script, or html)) 응답 데이터 형식
  beforeSend  : function () {
    // XHR Header 포함, HTTP Request 하기전에 호출
  },
  success : function(data, status, xhr) {
    // 정상적으로 응답 받았을 경우 파라미터는 응답 바디, 응답 코드 그리고 XHR 헤더
  },
  error	: function(xhr, status, error) {
    // 응답을 받지 못하거나, 정상 응답이지만 데이터 형식을 확인할 수 없는 경우
  },
  complete : function(xhr, status) {
    // success와 error 콜백이 호출된 후에 반드시 호출, finally 구문과 동일
  }
});

콜백 동작 순서

success/error → complete → done/fail → always

사용 예시

success / error 형태

$.ajax({
  	// 송신
  	url: "data.json",
  	type: "get",
  	datatype: "json",
  	// 수신
  	success: function(data){
      	$("div").append(JSON.stringify(data));
    },
  	error: fundciont(){
  		alert('AJAX error');
	}
});

done() / fail() 형태

function xhr_get(url) {
    return $.ajax({
        url: url,
        type: 'get',
        dataType: 'json',
        beforeSend: showLoadingImgFn
    })
    .always(function() {
      	// remove loading image
    })
    .fail(function() {
      	// handle request failures
    });
}
 
xhr_get('index.jsp').done(function(data) {
  // do stuff with index data
});
 
xhr_get('/id').done(function(data) {
  // do stuff with id data
});
profile
해보자구

0개의 댓글