웹 개발일지-2주차 2일차 (JQ 입문)

JQuery의 경우 JavaScript에서 길게 쓰던 코드를 줄여서 쓸 수 있음.
JQuery=미리 작성된 JavaScript 코드

때문에 임포트가 반드시 필요하다!!

부트스트랩을 이용한 CSS를 사용하는 것과 비슷한 개념.

JQuery CDN 링크

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

위 의 코드를 head 영역에 삽입하면 임포트가 완료된다.

JQuery 다뤄보기

위와 같은 상태에서 아래와 같은 코드를 입력하면 '세종대왕'이 출력된다.

$('#article-url').val();
'세종대왕'

이때 article-url은 input box의 id값

$('#article-url').val('장영실');
S.fn.init [input#article-url.form-control]

이 코드를 입력하면 다음과 같이 변한다.

박스 숨기기

$('#post-box').hide()
S.fn.init [div#post-box.posting-box]

위 사진의 id명인 post-box를 숨기는 방법

보이게 하고 싶을 때는 반대로

$('#post-box').show()
S.fn.init [div#post-box.posting-box]

css의 값의 변경

가로로 길게 박스를 만들 수 있음

$('#post-box').css('width', '700px')
S.fn.init [div#post-box.posting-box]

숨겼을 때와 보여졌을 때 display값이 다르게 출력됨을 알 수 있음

$('#post-box').hide();
$('#post-box').css('display');


'none'

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

'block'

기존의 주어진 텍스트를 바꾸는 법

$('#btn-post-box').text('랄라')
S.fn.init [a#btn-post-box.btn.btn-primary.btn-lg]

html를 붙여넣기

append를 활용하여 동적으로 html를 넣어 줄 수 있다.

let temp_html = `<div class="card">
            <img class="card-img-top"
                 src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="https://www.naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text coment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>`
        
$('#cardsbox').append(temp_html)
S.fn.init [div#cards-box.card-columns]

$('#cards-box').append(temp_html)
S.fn.init [div#cards-box.card-columns]

$('#cards-box').append(temp_html)
S.fn.init [div#cards-box.card-columns]

.
.
.

위와 같이 먼저 html를 작성하고 해당 html를 append로 불러일으키면 아래와 같이 카드 수를 늘릴 수 있음