jQuery
: JavaScript를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 JavaScript 라이브러리
jQuery 사용
→ jQuery를 사용하기 위해서 보통 CDN을 script 태그의 src 속성값으로 불러옴
→ 일반적으로 head 태그에 삽입
CDN (Content Delivery Network)
: 콘텐츠를 효율적으로 전달하기 위해 네트워크에 데이터를 저장하여 제공하는 시스템
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script><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
});
해보자구