[스파르타 웹개발의 봄 spring] 03.09~10 jQuery기초

##jquery 기초 공부 사이트

https://www.w3schools.com/jquery/jquery_get_started.asp

jQuery Get Started

 

##jQuery 임포트 (head 태그 사이에!)

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

 

##jQuery  기본 문법

- $ 로 시작하고, 괄호 안에 선택자로 대상을 적으면 됩니다.

 

1.HTML 숨기기

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

2. HTML 나타내기

$('#post-box').show();

 

3.input값 가져오기

- $('id이름').val()

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

 

4.input값 업데이트

- $('id이름').val(새로 들어갈 내용)

- $('#post-url').val("컨텐츠");

 

5. HTML 없애기

- $('#cards-box').empty();

6. HTML 추가하기

- // 주의: html 백틱으로 감싼다.

 

$('#cards-box').append(`<div class="card">
    <img class="card-img-top"
         src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
         alt="Card image cap">
    <div class="card-body">
        <a href="#" class="card-title">여기 기사 제목이 들어가죠</a>
        <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
        <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
    </div>
</div>`);