스파르타 코딩 클럽 웹개발 종합반 - 2주차[사전스터디]

Jquery란?

HTML의 요소들을 조작하는 편리한 javascript를 미리 작성해둔 것(라이브러리)

전문 개발자들이 짜둔 코드를 잘가져와서 사용하는 것으로 길고 복잡하게 써야 하는 것을 간단하고 직관적이게 표현할 수 있다.

Bootstrap 기본 템플릿으로 시작을 하면 Jquery CDN이 이미 import 되있다.

문법 예시

$('#post-box').hide()
$('#post-box').show()
$('#post-box').val()
$('#post-box').css('width')
$('#post-box').css('width', '600px')
$('#post-box').css('display')
$('#names-q3').append(pastingtext)
$('#names-q3').empty();
 $('#img-cat').attr('src', newPic) // 이미지의 src를 변경

포스팅 박스 버튼으로 show/hide 구현

        function openclose() {
            let status = $('#post-box').css('display');
            if (status == 'block') {
                $('#post-box').hide();
                $('#btn-posting-box').text('포스팅박스 열기');
            } else {
                $('#post-box').show();
                $('#btn-posting-box').text('포스팅박스 닫기');
            }
        }

서버 클라이언트 통신

Get 방식으로 데이터를 전달하는 방법

예시)google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

?: 여기서부터 전달할 데이터가 작성된다는 의미
$: 전달할 데이터가 더 있다는 뜻

q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)

"?q=아이폰&sourceid=chrome&ie=UTF-8" 이 부분은 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속입니다.

Ajax

jQuery를 import한 페이지에서만 동작 가능하다.

기본골격

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})