JQuery 다뤄보기 (1)

1. input 박스의 값을 가져와보기

JavaScript

  <div class="form-floating mb-3">
      <input id="url" type="email" class="form-control" placeholder="name@example.com">
      <label>영화URL</label>
  </div>

JavaScript

  // 크롬 개발자도구 콘솔창에서 쳐보기
  // id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
  $('#url').val();

  // 입력할때는?
  $('#url').val('이렇게 하면 입력이 가능하지만!');

2. div 보이기 / 숨기기

  JavaScript

  <div class="mypost" id="post-box">
      <div class="form-floating mb-3">
          <input id="url" type="email" class="form-control" placeholder="name@example.com">
          <label>영화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 type="button" class="btn btn-outline-dark">닫기</button>
      </div>
  </div>

JavaScript

  // 크롬 개발자도구 콘솔창에 쳐보기
  // id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
  $('#post-box').hide();

  // show()로 보이게 한다.
  $('#post-box').show();