[웹개발 종합반 2주차] 회고록 WIL

1. jQuery 개념

바닐라 자바스크립트보다 HTML 요소들을 조작하기 편하게 Javascript를 미리 작성해둔 라이브러리.

예) id가 'element' 인 HTML태그를 화면에서 안나오게 하고싶다.

 -Javascript

document.getElementById("element").style.display="none";

 

-jQuery

$('#element').hide();

 

jQuery를 사용하기 위해서 보통 CDN방식을 사용. 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

위 코드를 HTML의 head태그 내에 작성한다.

 

2. 기본사용법

input 박스의 값을 가져오기

<div class="form-floating mb-3">

  <input id="url" type="email" class="form-control" placeholder="name@example.com">

  <label>영화URL</label>

</div>

 

//값을 가져옴

$('#url').val();

 

//값을 넣음

$('#url').val('여기에 입력');

 

div 보이기/숨기기

아이디가 'post-box'인 태그를 보이기/숨기기

 

//숨기기

$('post-box').hide();

 

//보이기

$('post-box').show();

 

 

3. 서버-클라이언트 통신

서버와의 통신을 하려면 JSON형식을 이해해야함. JSON은 key:value로 이루어져있음. Dictionary 와 유사.

 

서울시 미세먼지OpenAPI를 JSON으로 보여주는 예시

 

Ajax 시작하기. (참고, Ajax는 jQuery를 임포트한 페이지에서만 동작 가능)

 

//Ajax 기본 골격

  $.ajax({

  type: "GET",

  url: "여기에URL을입력",

  data: {},

  success: function(response){ console.log(response)

 }

})