jQuery

jQuery : 미리 작성된 javascript코드.

전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것이기 때문에 쓰기 전에 임포트를 해줘야한다!

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

위처럼 javascript로 길고 복잡하게 써야하는 것을,

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

jQuery로 보다 직관적으로 쓸 수 있어서 편리하다.

• 부트스트랩 템플릿으로 시작할 때는 안에 jquery임포트문이 포함되어 있음.

• 부트스트랩 쓰지 않는 경우에는 꼭 따로 임포트해줘야한다.

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

• jQuery튜토리얼 : https://www.w3schools.com/jquery/jquery_get_started.asp

• 명령을 내리기 위해 지칭한다 => id사용

$('#id이름').val('값')
// $('#')은 지칭, .val('')은 명령

• 같은 html형식 붙이기

let temp_html = `html형식 복사해서 붙이기`
$('# 붙일<div>의 id').append(temp_html)

• temp_html안의 값 바꾸고 싶을 때 : ${..}사용

let name = '세정'
let temp_html = `<div>.......${name}.......</div>`

• 클릭하면 나타나고 사라지게 하기

1. 버튼에 함수 onclick = openclose()
2. 함수 안에,

function openclose(){
 	let status = $('#post-box').css('display'); //status값이 block이면 나와있음.
  	if (status=='block'){
     	$('#post-box').hide();
        $('btn-posting-box').text('포스팅박스 열기');
    }else{
        $('#post-box').show();
        $('btn-posting-box').text('포스팅박스 닫기');
    }
    
}

• 처음부터 안보이게 하고 싶다면,
  post-box css style에서 display: none; 하면 된다.