드디어 제이쿼리를 시작하게 되었다!!
이전 html 태그나 css 스타일 태그에 대해 배울 때는 기능적인 이론을 배워 그래도 쉽게 이해할 수 있었는데, 이름부터가 생소한 제이쿼리에 대해 배워보게 되었다.
일단 제이쿼리가 무엇인지 간단하게 알아보자면, 위키피디아의 설명글을 보겠다.
jQuery는 클라이언트 측 HTML 스크립팅을 간소화하기 위해 고안된 크로스 플랫폼 자바스크립트 라이브러리다. jQuery는 오늘날 가장 인기 있는 자바스크립트 라이브러리입니다. 웹 상에서 가장 트래픽이 많은 상위 천만 개의 사이트 중 65%에서 사용 중입니다. jQuery는 MIT 라이선스로 배포되는 무료 오픈소스 소프트웨어입니다.
...라고 한다. 쉽게 말하면 html 코드를 간소화하기 위한 자바스크립트 라이브러리 / 오픈소스라고 보면 되는 것 같다.
제이쿼리 시작하기(폴더구조, 링크방법)
<body>
컨텐츠 텍스트
<script src="오픈소스.js"></script>
<script src="커스텀.js"></scrips>
</body>위는 html 코드다. 제이쿼리를 사용할 땐 위의 구조를 만들어두고 시작하도록 하자. body 태그를 닫기 직전에 넣어주는게 좋고, 오픈소스로 사용할 js파일을 커스텀하여 사용할 js파일보다 먼저 입력하여야 한다.
제이쿼리 필수 핵심이론(기본구문, 선택자)
제이쿼리는 선택자, 함수, 실행구문 세 가지로 구분할 수 있다. 이 세 가지의 위치를 알아보도록 하자.
$('선택자').함수(function(){
실행구문;
});위의 모양을 기억해두어야한다. 제이쿼리는 무조건 $('선택자')로 시작하며 함수는 행동, 실행구문은 결과인 듯하다. 아직 배운 지 얼마안되어 단언하긴 힘들다.😅
소괄호와 중괄호가 복잡하게 사용되어 여는 괄호와 닫는 괄호가 어떻게 연결되어 있는지 파악하는 것도 여간 힘든게 아니다. 특히 함수 다음에 나오는 소괄호 안에 소괄호()와 중괄호{}가 연달아 나오는데, VS코드같은 경우 괄호를 열면 닫는 괄호가 자동으로 나타나기 때문에 ({}) 이런 식으로 쓰게 될 수도 있다. 기억하자! (){}이지, ({})가 아니다!
그리고 실행구문이 들어가는건 중괄호이고, 구문 마지막의 세미콜론;은 넣어도 되고 안넣어도 작동에 문제는 없다. 개인취향 차이일 듯 하다.
'보이기', '감추기' 버튼을 눌러 텍스트가 보여졌다 숨겨졌다 하는 기능을 만들어보았다.
위와 같이 html 스크립트에 js파일을 알맞게 링크한다.
그리고 custom.js 파일에 다음과 같이 작성한다.
먼저 기본 상태는 텍스트가 아직 나타나지 않은 상태이므로 display를 none으로 설정해주고
$('p').css({'display':'none'});show-btn을 click했을 때 display가 block이 되도록 설정한다.
$('.show-btn').click(function(){ $('p').css({'display':'block'}) })그리고 hide-btn을 클릭했을 때 다시 숨겨져야 하므로 'display':'none' 실행구문에 작성한다.
$('.hide-btn').click(function(){ $('p').css({'display':'none'}) })
제이쿼리 선택자, 함수, 메서드 종류
제이쿼리 요소의 종류들은 다음과 같다. 메서드 중 단어 두 개가 붙어 사용되는 경우 두 번째 단어의 첫글자는 꼭 대문자로 표시된다. 구분을 위해서인듯 하다.
예) slide down -> slideDown
