jQuery에 들어가면서 잘 이해되지 않는 함수, 명령어가 많이 나와서 강의를 다회차 듣기도하고 구글링하기도 하였다.
- jQuery란? 자바스크립트의 여러가지 코드를 간단한 코드로 변경시켜 사용자가 편리하고 간편하게 쓸 수 있도록 도와주는 라이브러리 (jQuery를 쓰려면 미리 Import를 해주어야 한다)
- $이란?
$: jQuery에서 미리 작성해 논 코드로, html요소에 javascript의 기능을 넣을 수 있도록 불러오는 명령어
- #, class 차이점
.class
<div class=""> </div>
.class가 여러개의 묶인 코드를 부른다면,
('#Id')
<div id=""> </div>
#Id는 하나의 지정된 코드를 부름.
-jQuery 다뤄보기 (연습)
1. input box의 값 집어 넣기
tool에서 인풋박스에 id post-box 지정후 콘솔창에서
$('#article-url').val('장영실');
-> Id 'article-url' 안에 '장영실' 문자열이 들어가는 명령이 실행된다.
2. 포스팅 박스 숨기기
tool에서 포스팅 박스에 id post-box 지정후 콘솔창에서
$('#post-box').hide() -> 숨기기
$('#post-box').show() -> 보이기
** 확인하는 방법
$('#post-box').css('display') = ' block' 이뜨면 보이는 것, 'none' 이 뜨면 숨겨진 것
3. 버튼 이름 바꾸기
tool에서 버튼에 id btn-posting-box 지정후 콘솔창에서
$('#btn-posting-box').text(랄라) -> 버튼 이름이 랄라로 바뀜
4. 버튼 늘리기
let temp_html = `<button>나는 버튼이다</button>`
$('#cards-box').append(temp_html)
-> 버튼이 생김