처음 들어보는 JQuery를 배우기 시작했다. JQuery는 편리한 js를 미리 작성해둔 것 이라고 한다. 이것을 library라고도 한다. js랑 코드를 비교했을때 확실히 JQuery가 더 짧고 간편해 보인다.
JQuery를 쓰기 위해 해야하는 2가지
1. JQuery를 쓰기 위해선 import 필수! 밑에 있는 코드를 쓰면 됨.
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head>
- JQuery를 조작할려면 가리킬 수 있는게 필요! CSS 선택자료는 class, JQuery는 id!
<input id="input-q1" type="text" />
이제 JQuery를 쓰고 싶은 곳이 있다면 id로 특정 button, input box, div, etc를 가리키면 준비 끝!
JQuery 적용하기
먼저 id 값으로 가리키고 나서 원하는 method들을 쓴다
$('#input-q1'). //val(), hide(), show() etc.
1) val() - 가리킨 곳에 있는 값을 가져온다
$('#input-post-url').val();// input box면 새로운 택스트를 입력할 수 있다 $('#input-post-url').val('새로운 택스트 입력!!');
2) hide() / show() - 기리킨 곳을 안보이게 / 보이게 한다 (div)
$('#div-post-box').hide(); // css의 display 값을 none으로 바뀜 $('#div-post-box').show(); // css의 display 값을 block으로 바뀜가리킨 곳이 보이면 display가 block이고 안 보이면 none
$('#div-post-box').css('display'); // display가 block인지 none인지 체크
3) text() - 가리킨 곳의 택스트를 바꿀 수 있다
// 포스팅 박스 열기 --> 포스팅 박스 닫기 $('#btn-posting-box').text('포스팅 박스 닫기');
맨 처음엔 거의 이해를 못 했다가 직접 해보니까 별로 어렵지 않았다. 언제 무엇을 써야되는지 잘 알고 문법을 외우면 쉽다.
어려운건 서버-클라이언트 통신이다.
코딩하는 드라마러버