$(선택자).동작함수1().동작함수2() 이러한 형태로 사용
jquery는 dom구조 탐색이 뛰어나다.
여기서 dom은 document object model로, 문자 그대로 문서객체모델이다. 트리 자료구조 형태를
가지며, html문서를 객체화 한 것을 말한다. 여기서 트리 자료구조 형태는
나무처럼 뻗어나가면서 하위로 펼쳐져 내려가는 구조이다.
조금 더 쉽게 생각해보면,
글을 작성할 때도 서론,본론,결론을 쓰듯이, 코드 내에서도 전개하는데 순서가 필요하다.
그 순서에 맞게 작성하는 것이 dom이다.
ajax란 자바스크립트를 통해서 서버에
데이터를 요청하는 것을 말한다. jquery를 import한 페이지에서만 동작이 가능하다는 의미.
자바스크립트 문법
$ 기호는 제이쿼리를 의미하며, 접근할 수 있게 해주는 식별자이다.
$안에 선택자를 넣고, 동작함수를 정의, 원하는 요소에 설정한다.
jquery와 js문법의 사용법이 약간 다르다.
$('#ssd') $('.hdd') 가 jquery의 문법 형태이다.
document.getElementById('ssd')
document.querySelectorAll('.hdd')와 같이 사용되는 스타일이 js문법이다.
jquery문법을 조금 더 자세히 살펴보면,
1. 값을 가져오기 위해 val사용.
('#post-url').val(); 2.보이기와 숨기기('#//여기에 id 값을 넣고//').hide();//숨기기
('#//여기에 id 값을 넣고//').show();나타내기 3. css값 가져오기('#//여기에 id 값을 넣고//').css('//가져올 값을 넣는다.')
4.버튼넣기
let temp_html = '추가 버튼';
$('#id값').append(temp_html)
실제로 코드로 한번 보자
Document문장 숨기기 문장 표시하기
숨기기와 나타내기 코드인데, 각 버튼의 id값 앞에 # 을 이용해 각 버튼을 특정한후
'click'을 했을때 사라지는 경우와 나타나는 경우의 동작함수를 포함한다.