(스파르타코딩클럽 2-3강, 2-4강 듣고 기록한 내용입니다.)

1. jQuery란

전문가들이 미리 짜놓은 javascript 코드의 모음(라이브러리)
jQuery가 각광받았고 지금까지도 많이 쓰이는 이유
1) 매번 비슷비슷한 기능을 바닐라 자바스크립트(순수한 javascript) 코드로 일일이 구현하려면 귀찮고 코드가 긴데, 더 쉽고 빠르게 할 수 있게 도와줌
2) 당시(특히 2010년 이전) 브라우져마다(익스플로러, 크롬 등) 동일한 기능을 구현하기 위해 작성해야하는 자바스크립트 코드가 달라서 모든 브라우져에서 잘 동작하도록 하는 작업이 매우 어렵고 귀찮았기 때문(*크로스브라우징 이슈)

2. 쓰는 방법(임포트)

남들이 작성해놓은 코드의 모음을 가져다가 쓰는 것이기 때문에, 해당 파일을 내 서버에 저장하든, 어디 서버에 저장돼있는 걸 가져오든, "가져오는" 과정이 필요하다. 이를 '임포트'라고 부른다.
https://www.w3schools.com/jquery/jquery_get_started.asp
위 링크에 가보면 google CDN이란 걸 제공하고 있다. 아래와 같이 생긴 이 코드를 내 HTML 문서의 head헤드 태그 안에 붙여넣으면 그 문서 내에서 jQuery를 쓸 수 있다.

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

3. 간단한 문법

!강조 : 절대 개별 문법사항들을 다 외울 필요는 없다. 필요할 때마다 검색해서 쓰면 되고, 자주 쓰다보면 자연스럽게 익혀짐. 그러나 당연히 기본적으로 어떻게 쓰는지는 이해하고 시작하는 게 편하다.

0. 기본적으로 javascript코드이므로 javascript처럼 script 태그 내에 작성해야 한다.
1. jQuery라는 표시
   "$" 또는 "jQuery"로 시작함으로써 이 코드가 jQuery로 작동하게 된다. 가장 많이 쓰는 종류는 다음과 같다.

<input type="text" id="idName" />
<script>
  $('#idName').val();
  jQuery('#idName').val("입력하고싶은값");
</script>

2. 선택자(selector)
   위와 같이 썼을 때, id값이 'idName'인 요소(element)를 지정하고, 뒤에 .val()을 붙임으로써 value값, 즉 그 요소가 갖고 있는 "값"을 가져오겠다는 의미가 된다.
   그리고 아래처럼 쓰면($와 jQuery는 위에 설명한 것처럼 같은 의미로 둘 중 어떻게 써도 상관없다. 보통은 $를 많이 쓰는데 $를 써서 문제가 생길 수도 있는 상황에서는 jQuery라고도 쓴다), 그 지금 가져온 idName이라는 id를 갖고 있는 요소(input태그)의 value값을 "입력하고싶은값"으로 변경한다.
   앞의 ('#idName') 이 부분을 '선택자'라고 부른다. 말그대로 내가 원하는 어떤 HTML태그, 요소(element), 지금 뭔가 값을 가져오거나 변경시키려고 하는 그 녀석!을 선택하는 부분이다.
   1) 앞에 '#'을 붙여쓰면 그 태그, 요소가 갖고 있는 id를 기준으로 뭔가를 선택하겠다는 뜻,
   2) 앞에 '.'을 붙여서 쓰면 class를 기준으로 뭔가를 선택하겠다는 뜻이다. 예: $('.className')
   이러한 선택자의 문법이 CSS의 문법과 비슷하게 설계되어있다.