코딩교육 2주차(이름도 생소한... JQuery)

자바스크립트를 배운 날, 자바스크립트만 알면 모든 웹사이트를 뚝딱 만들 수 있을 것만 같았다 ㅎㅎ 그런데 이름도 생소한 요녀석이 나타났다 ㅜ 

 

<정리>

JQuery는 편리한 자바스크립트를 미리 작성해둔 것!(CSS로 따지면 부트스트랩!!)

사용 전 반드시 임포트 먼저!!

id='~'을 통해 특정 요소를 가리킴(CSS의 경우는 class를 이용했었지 ㅎㅎ)

chrome 개발자도구 콘솔창을 이용해 즉각 확인가능(매번 새로고침 필요 x)

 

<예시>

>input 박스의 값을 가져오기

(id값이 url인 곳을 가리키고, val()로 값을 가져오기)

   $('#url').val();

>div 보이기/ 숨기기

(id값이 post_box인 곳을 가리키고, show(),hide()로 값을 가져오기)

   $('#post_box).hide();

   $('#post_box).show();

>태그 내 html 입력하기

(예시_포스팅되면 카드가 추가되는 기능)

카드가 붙는 div에 id를 추가해주는 것이 핵심!

   <div class="mycards">

       <div class="row row ~~~~~~ g-4" id="cards_box">

버튼 넣어보기

   let temp_html = `<button>나는 추가될 버튼이다!</button>`;

       $('#cards-box').append(temp_html);

카드 넣어보기

  // 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 한다.

  // 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력된다.

  // backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있다.

(무조건 <script></script> 안에!!!)

let title = '영화 제목이 들어갑니다.';
let temp_html =`<div class="col">
    <div class="card">
        
             class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">${title}</h5>
            <p class="card-text">여기에 내용이 들어갑니다.</p>
            <p>⭐⭐⭐</p>
            <p class="comment">여기에 코멘트가 들어갑니다.</p>
        </div>
    </div>
</div>`
$('#cards-box').append(temp_html);