HTML을 조작하는 기본적인 Javascript

querySelector('.className') //- css 문법 대상으로 찾아낸다, 맨 위에 첫번째 대상만 지목
querySelectorAll('#idName')[0] //- css 문법 대상으로 찾아낸다. 뒤의 [0] 를 이용해 몇번째 것인지 지목할 수 있다.
getElementById('idName1') //- id로 찾아낸다
getElementsByClassName('.classname') //- class 이름으로 찾아낸다.
getElementsByTagName('') //- HTML tag name으로 찾아낸다. ex) <header> 등...

기본적으로 사용되는 형태

//네비게이션바의 토글 버튼을 누르면 리스트가 나오는 스크립트
      document.getElementsByTagName
        .querySelector('.navbar-toggler')
        .addEventListener('click', function () {
          document.querySelectorAll('.list-group')[0].classList.toggle('show');
        });

// helloHello라는 클래스를 가진 테그의 내용을 바꾸는 스크립트
	  document.querySelector('.helloHello').innerHTML = '안녕하세용';

// id="testBtn"을 가진 버튼을 누르면
//(helloHello2라는 클래스에 display:none;붙어서 기본적으로 보이지 않는 상태)
// class에 show가 붙어서 보이게 만든다.
      document.querySelector('#testBtn').addEventListener('click', function () {
        document.querySelector('.helloHello2').classList.toggle('show');
      });

Jquery

Jquery는 javascript를 줄여 쓰게 만든다.

      $('.helloHello').css('color', 'red'); //css 바꾸는 방법
      $('.helloHello').html('하이'); //innerHtml 변경 - 같은 클래스에 모두 적용됨
      $('.helloHello').addClass('show'); //class 붙이기
      $('.helloHello').removeClass('show'); //class 빼기
      $('.helloHello').toggleClass('show'); //class 땟다가 붙이기

	 //위와 같은 Class토글 버튼
     $('#testBtn').on('click', function () {
        $('helloHello2').toggleClass('show');
      });
      // 숨기기만
      $('#testBtn').on('click', function () {
        $('.helloHello').hide();
      });
      // 위로 사라지는 애니메이션
      $('#testBtn').on('click', function () {
        $('.helloHello').slideUp();
      });

flatpickr

플렛피커는 날짜 입력을 도와주는 라이브러리다.

html상단에 css와 함께 아래 주소를 붙여넣는다.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

본문에는 다음과 같이 들어갔다.

          <p>예약 일정</p>
          <div class="datePickerContainer">
            <input
              class="dateSelector"
              type="text"
              name="reserve_date"
              placeholder="날짜를 선택하세요"
            />
          </div>

input type="text" 입력칸을 클릭하면 달력이 뜨면서 일정을 선택할 수 있다.

바디 테그를 닫기 전에 아래와 같이 스크립트를 넣는다.

<script defer src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
<script defer src="https://npmcdn.com/flatpickr/dist/l10n/ko.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    let dateSelector = document.querySelector('.dateSelector');
    flatpickr(dateSelector, {
  //속성을 넣는다-flatpickr 공식문서에 잘 나와있다.
      position: 'above',
      mode: 'range',
      minDate: 'today',
      dateFormat: 'Y-m-d',
      locale: 'ko',
    });
  });
</script>

에쁜 달력 달기 완성