SW/JavaScript

JQuery 기초

ahhyeon 2023. 2. 28. 16:37

1. JQuery란?

HTML의 요소들을 조작하고 편리한 Javascript를 미리 작성한 것. 

→ Javascript의 라이브러리

 

💡 Javascript VS JQuery

JQuery로 보다 직관적으로 쓸 수 있음
// Javascript

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

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

1-1. JQuery 사용

미리 작성된 JS 코드 가져오기 ➡️ import

💡JQuery CDN 부분 참고
https://www.w3schools.com/jquery/jquery_get_started.asp

 

<head> ~ </head> 사이에 넣기

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

 

1-2. JQuery 적용하기(포스팅박스)

 

HTML / CSS 기본 개념 정리

1. HTML과 CSS의 개념 ✏️HTML은 뼈대, CSS는 뼈대 꾸미기! 1) HTML 기초 HTML은 크게 와 구역으로 나뉜다. head 화면에 보여주기 위한 정보를 어떻게 보여줄지 추가적인 정보를 담고 있다(메타정보) body는

cookie-log.tistory.com

 

포스팅박스 열기/닫기 기능 추가

 

1) 포스팅 박스 열기 버튼에 function 달고 제어하기

<sciprt> 

function show_box() {
    $('.mypost').show();
}

function close_box(){
    $('.mypost').hide();
}

</script>

 

2. 클릭 해서 포스팅 박스를 여닫게 하기

// <body>

    <div class="mainpage">
        <h1>내 생애 최고의 영화들</h1>
        <button onclick="show_box()">영화 기록하기</button>
    </div>

    <div class="mypost">
        <div class ="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">영화URL</label>
    </div>
    
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="inputGroupSelect01">
          <option selected>--선택하기--</option>
          <option value="1">⭐</option>
          <option value="2">⭐⭐</option>
          <option value="3">⭐⭐⭐</option>
          <option value="4">⭐⭐⭐⭐</option>
          <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
      </div>

      <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
      </div>

      <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
      </div>
</div>

 

3) 완성

 

➡️ 닫기 버튼을 누르면 창이 없어짐(오른쪽 사진처럼 뜸)

➡️ 영화 기록하기 버튼을 누르면 숨겨진 창이 나타남(왼쪽 사진처럼 뜸)