JQUERY 코드 공부

 

JQUERY란?

미리 작성된 자바스크립트 함수 모음집( HTML, CSS 조작 함수를 미리 만들어서 제공해주는 것)

 

<JQUERY import하기>

https://www.w3schools.com/jquery/jquery_get_started.asp

 

// jQuery 임포트 코드
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

나타내기

$('#원하는 Html아이디 값').show();

숨기기

$('#원하는 Html아이디 값').hide();

 

input값 가져오기

$('#원하는 Html아이디 값').val();

 

input값 넣기

$('#원하는 Html아이디 값').val('new text');

Html 없애기

$('#원하는 Html아이디 값').empty();

Html 추가하기

$('#원하는 Html아이디 값').append(`//<div class="card">
   //내용물 넣기
  //  </div>
</div>`);

 

내용 불러오기

// 메모를 불러와서 보여줍니다.
function getMessages() {
    // 1. 기존 메모 내용을 지웁니다.
    $('#cards-box').empty();
    // 2. 메모 목록을 불러와서 HTML로 붙입니다.
    $.ajax({
        type: 'GET',
        url: '/api/memos',
        success: function (response) {
            for (let i = 0; i < response.length; i++) {
                let message = response[i];
                let id = message['id'];
                let username = message['username'];
                let contents = message['contents'];
                let modifiedAt = message['modifiedAt'];
                addHTML(id, username, contents, modifiedAt);
            }
        }
    })
}

내용 삭제하기

function deleteOne(id) {
    $.ajax({
        type: "DELETE",
        url: `/api/memos/${id}`,
        success: function (response) {
            alert('메시지 삭제에 성공하였습니다.');
            window.location.reload();
        }
    })
}

내용 업데이트하기

// 메모를 수정합니다.
function submitEdit(id) {
    // 작성 대상 메모의 username과 contents 를 확인합니다.
    let username = $(`#${id}-username`).text().trim();
    let contents = $(`#${id}-textarea`).val().trim();
    
    //  전달할 data JSON으로 만듭니다.
    let data = {'username': username, 'contents': contents};

    // PUT url에 data를 전달합니다.
    $.ajax({
        type: "PUT",
        url: `/api/memos/${id}`,
        contentType: "application/json",
        data: JSON.stringify(data),
        success: function (response) {
            alert('메시지 변경에 성공하였습니다.');
            window.location.reload();
        }
    });
}