JQuery 소개, 시작

JQuery (제이퀘어리)

수 천가지의 자바스크립트 가운데 가장 인기 많은 라이브러리이다. 

Jquery를 만든 John Resig은

너무 긴 자바스크립트 코드를 간단하게 바꾼 사람이다.

 

document.querySelector("h1")

= jQuery("h1")

= $("h1")

 

 

내가 만드는 웹사이트에 jQuery 연결하는 법

1. 모든 jQuery 파일을 다운 받거나

2. 부트스트랩에서 했던 것처럼 jQuery CDN을 연결해준다. 

가장 많이 사용되는 google CDN을 쓰도록 하자.

인기많은 구글 CDN을 사용하는 이유는 

유저가 내 웹사이트 들어오기 전에 다른 웹사이트에서 구글 jQuery CDN를 연결해 놓았다면 유저의 브라우저에 이미 cashed 되고 저장되어 있다. 내 웹사이트에서 다시 제이쿼리를 로드 할 필요가 없다. 내 사이틀 더 빠르게 제공할 수 있다. 

 

https://developers.google.com/speed/libraries

 

 

 

실행 해보기 

1. 내문서에 새로운 파일을 하나 만들고 vscode에 드레그 드랍한다.

2. 새파일 3개를 만든다

index.html    styles.css   index.js

3. html파일에 보일러 플레이트를 만든 후 css,  js, jquery를 연결한다. 

css 링크는 head에, 

js와 jquery는 body안에 들어간다. 

jquery는 js 위에 있어야 한다.

반대 위치면 적용이 안된다. js가 제이쿼리 라이브러리를 가지고 있지 않기 때문이다.

그래서 콘솔에 $가 정의되지 않았다고 나온다. 

 

 

 

jquery와 js가 head안에 넣는 경우

따로 document에 ready 함수를 써줘서 적용을 시켜야한다. 

document가 ready되면 function()함수를 작동시키라는 함수이다. 

하지만 이렇게 함수 써주는 것 body태그 안에 넣는 것이 좋다. 

ready 함수를 써줄 필요가 없다. 

 

 

 

4. html에 버튼 5개를 만든다

html

웹사이트 결과 

 

 

5. h1의 색을 자바스크립트에서 적어보자. 

 

6. 하지만 제이쿼리를 사용하면 코드가 간편해진다.