jQuery 사용하기

HTML 요소들을 조작하는 편리한 Javascript 라이브러리로 사용전에 import 해주어야 한다.

jQuery를 사용하기 위해서는 미리 작성된 자바스크립트 코드를 import 해와야 하는데, bootstrap css 파일을 가져올 때와 마찬가지로 내 컴퓨터에 해당 파일을 저장해서 사용할 수도 있지만 온라인 상의 파일을 참조할 수도 있다. 이를 head 태그 안에 넣어주면 된다.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>

또한 CSS와 마찬가지로 특정 요소를 가리켜야 조작할 수 있는데, CSS에서는 주로 class를 사용했다면 jQuery에서는 고유한 하나의 요소를 가리키는 id를 주로 사용한다.

input 박스의 값 가져오기, 값 변경하기

let url = $('#article-url').val()
url
'https://kimjingyu.tistory.com/entry/jQuery%EB%9E%80'

$('#article-url').val('http://www.naver.com')
E.fn.init [input#article-url.form-control]

div 숨기기, 보이기

$('#post-box').hide();
E.fn.init [form#post-box.posting-box]

$('#post-box').show();
E.fn.init [form#post-box.posting-box]

div 가 없어졌다가 나타났다 할 때마다 개발자도구의 Element 탭에서 해당 div에 적용된 css 중에 display 속성이 none과 block 둘 중 하나로 바뀌는 것을 확인할 수 있다.

<form class="posting-box" id="post-box" style="display: none;">
<form class="posting-box" id="post-box" style="">

CSS의 속성 값 가져오기

Elements 탭을 보지않고, 직접 css display 속성이 변하는 것을 볼 수 있다.

$('#post-box').hide()
E.fn.init [form#post-box.posting-box]

$('#post-box').css('display')
'none'

$('#post-box').show();
E.fn.init [form#post-box.posting-box]

$('#post-box').css('display')
'block'

태그 내 텍스트 입력하기

input 태그의 .val() 메서드를 제외하고, 태그 내 텍스트를 입력하고자 하면 .text() 메서드를 이용하여 접근할 수 있다.

let btn_text = $('#btn-posting-box').text();
undefined

btn_text
'포스팅박스 열기'

$('#btn-posting-box').text('포스팅박스 닫기')
E.fn.init [button#btn-posting-box.btn.btn-primary.btn-lg]

태그 내 html 입력하기

포스팅하면 카드를 추가하기 등 특정 태그 안에 새로운 html 요소를 동적으로 추가하고 싶을 때는 .append() 메서드를 사용할 수 있다.

$('#cards-box').append('추가 텍스트')

let temp_html = `<button>추가 버튼</button>`
undefined

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

let img_url = 'https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg'
undefined

let link_url = 'https://google.com/'
undefined

let title = '제목 - 구글'
undefined

let desc = '구글에 대한 설명이 여기 들어간다.'
undefined

let comment = '여기는 개인적인 코멘트가 들어간다.'
undefined

let temp_html = `<div class="card">
                <img src="${img_url}"
                    class="card-img-top" alt="Card image cap">
                <div class="card-body">
                    <a href="${link_url}" class="card-title">${title}</a>
                    <p class="card-text">${desc}</p>
                    <p class="card-text comment">${comment}</p>
                </div>
            </div>`
undefined

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

페이지 로딩이 완료되면 실행하기

어떤 기능이 페이지가 로딩되자마자 실행되기를 바란다면 아래와 같이 써 줄 수 있다.

<script>
    $(document).ready(function(){
        alert('페이지가 로딩되었습니다.')
    })
</script>