[항해99] 2주차 JQuery

JQuery 란!? 

미리 작성된 javascript를 이용하는 것 ! but, JQuery 이용 할 때는 꼭 먼저 import 해줘야해

Javascript로 길고 복잡하게 써야 하는 것을

document.getElementById("element").style.display = "none";

jQuery로 보다 직관적으로 쓸 수 있지요!

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

---

JQuery 다뤄보기~

JQuery 값을 가져올 때 !

$( '#아이디값입력' ).val();

 

ex) $('#article-url').val();

아이디 값의 css 값을 알고 싶을 때 !

consoloe 창에서 확인해볼 수 있어 ( if문 사용 할 때, 도움이 됩니당!)

$( '#아이디값입력' ).css('width');
$( '#아이디값입력' ).css('display');

let temp_html 이부분이랑 

${변수명}  이부분 추가로 보완하기 ( 완벽하게 이해되지 않아서 ㅜ.ㅜ .)

---

JQuery 적용하기(나홀로메모장)~

주된 수업 내용 : 포스트박스 열기닫기 기능 추가!

중간중간에 alret / console.log 자주 써주면서 확인하기 

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

 

만약에 처음부터 박스를 안보이게 하고 싶다면 css <style> 부분에가서 display : none; 작업!

작업 할 수 있는 class가 없다면 <boby> 부분에 class 먼저 추가해야함! 

.posting-box {
    border-width: 3px;
    border-color: black;
    border-style: solid;
    border-radius: 10px;
    width: 500px;
    margin: 0px auto 30px auto;
    padding: 40px;

    display: none;