JQuery - HTML의 요소들을 조작하는 편리한 Javascript를 미리 작성해둔 라이브러리, Javascript보다 직관적으로 쓸 수 있음
JQuery CDN
https://www.w3schools.com/jquery/jquery_get_started.asp
미리 작성된 Javascript 코드를 임포트한다.
<head>~</head> 사이에 임포트
input 박스 값 가져오기
<input id="val">
-> $('#val').val();
div 보이기 / 숨기기
<div class="posting-box" id="box">
-> $('#box').hide(); //숨기기
-> $('#box').show(); //보이기
css 값 가져오기
$('box').css('display'); //display 속성 값 가져오기
태그 내 텍스트 입력
- input box
$('#id').val('텍스트');
- button
$('#id').text('텍스트');
태그 내 html 입력
- 버튼 넣기
let temp_html = <button>'추가'</button>
$('#id').append(temp_html);
- 카드 넣기
let temp_html = `<div class="card">
<img class="card-img-top"
src="${img_url}"
alt="Card image cap">
<div class="card-body">
<a href="${link_url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p>
</div>
</div>`;
$('#cards-box').append(temp_html);
Ajax
Ajax 기본 골격
$.ajax({
type: "GET", //Get 방식으로 요청
url: "URL입력", //요청 url
data: {}, //요청하면서 함께 줄 데이터(GET 요청 시 비워둠)
success: function(response){ //서버에서 준 결과를 response 변수에 담음
console.log(response) //서버에서 준 결과를 이용해 나머지 코드 작성
}
})