JQuery?

• javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드이다.
  JQuery를 이용하면 문서객체모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현 할 수 있다.
  또한,Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있다.

실습

1주차에서 실습했던 영화 목록 사이트에서 계속 진행된다.
닉네임과 별점을 선택할수 있었던 mypost 클래스에 id를 추가한다. id = "post-box"

실습 홈페이지를 실행하고 콘솔창(오른쪽 마우스 누르고 '검사'를 누르면 된다)을 띄워서
코드를 입력해보자

$('#post-box').hide() //mypost화면은 사라지게 한다.

원래 있어야할 포스트 화면이 사라졌다.

$('#post-box').show() // 다시 나타나게 된다.

다시 원래대로 돌아왔다.

이번엔 포스트 아래의 영화포스터가 들어있는 카드를 손쉽게 추가 할수 있는 방법을 알아보자.
- 영화 포스터 card들을 담고 있는 그릇을 찾아서 id를 card-box라고 정의했다.

-해당 card-box안에 있는 4개의 col 클래스가 각각 영화포스터와 정보를 담고 있는 카드이며 card-box 안에 card를 추가할 것이다.

let temp_html = ` <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                         class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                            additional content. This content is a little bit longer.</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">코멘트가 들어갑니다.</p>
                    </div>
                </div>
            </div>`

-콘솔창에 이런식으로 temp_html 이라는 변수에 col 클래스의 내용을 복사하여 붙여넣는다.
이때 ``으로 둘러 싸서 작성하는 것을 잊지말자.

-card-box안에 위에서 정의한 temp_html를 추가하는 명령어를 적어보자

$('#card-box').append(temp_html) // card-box에 card를 추가한다.

입력후 엔터를 누르고 난뒤 사이트로 돌아가보면...

왼쪽 아래에 2개가 더 생성 된 것을 볼 수 있다.

이런 느낌으로 jquery를 사용하면 적은 내용의 코드로도 간단하게 실행이 가능하다.