Just Fighting

JQuery 사용하기 본문

Web/프론트엔드

JQuery 사용하기

yennle 2022. 1. 5. 22:00
728x90

JQuery는 Javascript를 미리 작성해둔 라이브러리!

코드가 훤씬 간결하고, 브라우저 간의 호환성 문제도 고려한 것.

 

 

사용하기 전에 import 해야 하며, 아래 코드를 head 태그 안에 써주면 된다.

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

 

 

닉네임과 응원댓글을 입력하고 응원 남기기 버튼을 누르면 글을 저장하는 기능을 만들고자 한다. (저장은 생략)

이름과 코멘트를 입력하는 칸을 만들고, id를 지정해준다.

<head>태그 안에 밑에 코드 추가해야함(*22.02.21 추가)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="mypost">
    <div class="form-floating mb-3">
        <input type="text" class="form-control" id="name" placeholder="url">
        <label for="floatingInput">닉네임</label>
    </div>
    <div class="form-floating">
	<textarea class="form-control" placeholder="Leave a comment here" id="comment"style="height: 100px"></textarea>
        <label for="floatingTextarea2">응원댓글</label>
    </div>
    <button onclick="save_comment()" type="button" class="btn btn-dark">응원 남기기</button>
</div>

부트스트랩을 사용하면 더 다양한 것을 만들 수 있다!

https://getbootstrap.com/docs/5.1/getting-started/introduction/

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

 

 

버튼을 눌렀을 때 내용이 저장되기 위해선 칸에 적혀진 내용을 가져와야 한다.

아래와 같은 코드를 사용하면 script 태그 내에서 body 태그 내에 있는 값을 가져올 수 있다.

let name = $('#name').val()
let comment = $('#comment').val()

 

 

 

728x90

'Web > 프론트엔드' 카테고리의 다른 글

Ajax와 OpenAPI 이용하기  (0) 2022.01.10
JQuery 연습  (0) 2022.01.06
'Web/프론트엔드' Related Articles more
Comments