웹 개발일지-2주차 2일차 (JQ 입문)
JQuery의 경우 JavaScript에서 길게 쓰던 코드를 줄여서 쓸 수 있음.
JQuery=미리 작성된 JavaScript 코드
때문에 임포트가 반드시 필요하다!!
부트스트랩을 이용한 CSS를 사용하는 것과 비슷한 개념.
<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로 불러일으키면 아래와 같이 카드 수를 늘릴 수 있음
Author And Source
이 문제에 관하여(웹 개발일지-2주차 2일차 (JQ 입문)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dlacofls14/웹-개발일지-2주차-2일차-JQ저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)