✅HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 라이브러리.
Javascript로 모든 기능을 구현할 수는 있지만,
1) 코드가 복잡하고
2) 브라우저 간 호환성 문제도 고려해야해서,
jQuery라는 라이브러리가 사용된다.

head에 script 삽입하자! 👉 jQuery Google CDN

👉css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" 조작할 수 있다.
~~ css는 선택자로 class를 썼다면
~~ jQuery는 id 값을 통해 가리킨다.

jQuery [console]

text 바꾸기

<button id="box-text" type="button">버튼이다</button>```

//// 크롬 개발자도구 콘솔찰에 ////
$('#box-text').text('텍스트 바꾸기');

input 박스의 값을 가져오기

<div>
   ...
   <input id="post-text" .... </input>
          🔺id값은 임의로 만듦
   ...
</div>

//// 콘솔찰에 ////
$('#post-text').val('여기에 택스트를 입력');

div 보이기 / 숨기기

<div id="post-box">
   ...
   ...
</div>

//// 콘솔창에 ////
$('#post-box').show(); ▶(=css display값을 none으로 바꾼다)
$('#post-box').hide(); ▶(=css display값을 block으로 바꾼다)

css값 가져오기

//// 콘솔창에 ////
$('#post-box').show();
$('#post-box').css('display');
$('#post-box').css('width','700px');
등등 웹 리프레시 없이 구현 가능.

태그 내 html 입력하기

🔹버튼 추가하기

<div id="btn-add">
   ...
</div>

//// 콘솔창 ////
let temp_html = `<button>추가될 버튼</button>` 주의❗: backtick(`)을 사용한다!
$('#btn-add').append(temp_html);

🔸카드 추가하기

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

let img_url = 'https://www.google.com/asdf.jpg';
let link_url = 'https://naver.com/';
let title = '제목이에요;
let desc = '내용이에요';
let comment = '코멘트에요';

let temp_html = `<div class="card">
                    <img class="card-img-top"
                        src=✍"${img_url}"
                        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>`;
$('#cards-box').append(temp_html);

jQuery 적용하기

포스팅박스 열기 / 닫기
닫을 때는 '포스팅박스 닫기'로 바꾸기

[1] '포스팅박스 열기' 버튼에 function 달기

<script>
    function openclose() {
        alert('잘 되는지 확인차 alert사용해주자')
    }
</script>

//// body //// onclick 속성(attribute)를 추가한다.
<button onclick="openclose()">포스팅박스 열기</button>

[2-1] 박스에 id 값 붙여주기

<div id="post-box">
   ... 아티클 URL ...
   ... 간단 코멘트 ...
   ... 기사 저장 ...
</div>

[2-2] 박스의 상태확인

//// 콘솔창에서 ////
$('#post-box').css('display');

▶"block"

[3] '포스팅 박스' 제어하기

<script>
    function openclose() {
        let status = $('#post-box').css('display'); 🔺정리: 해도 되고 안해도 되고.
        console.log(status); ✅if함수 넣기 전에 잘 찍히는지 콘솔창에서 확인하자.
        if (status == 'block') {
            $('#post-box').hide();
        } else {
            $('#post-box').show();
        }
    }
</script>

[4-1] 버튼에 id 값 주기

'포스팅 박스 열기' 버튼에 id 값 주기.

<button id="btn-posting-box" onclick="openclose()">포스팅 박스 열기</button>

[4-2] 버튼 텍스트 바꾸기

<script>
function openclose() {
    if('#post-box').css('display') == 'block') {
        $('#post-box').hide();
        $('#btn-posting-box').text('포스팅 박스 열기');
    } else {
        $('#post-box').show();
        $('#btn-posting-box').text('포스팅 박스 닫기');
    }
}
</script>

[4-3] 버튼을 시작부터 감춰두기 (2가지 방법)

(1) inline-style (인라인 스타일)

<div id="post-box" 태그 안에 style="display:none">을 넣어서
직관적이고 깔끔하다.

(2) css에 속성 달기

<style>
    .post-box {
        display: none
    }
</style>