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개를 만든다
5. h1의 색을 자바스크립트에서 적어보자.
6. 하지만 제이쿼리를 사용하면 코드가 간편해진다.
'Java Script > Jquery' 카테고리의 다른 글
jQuery] elements 추가, 삭제하기 (0) | 2021.09.07 |
---|---|
jQuery] eventListener 추가하기 / on( ) / loop 하는 법 (0) | 2021.09.05 |
jQuery] attributes 변경하기 (0) | 2021.09.03 |
jQuery] 텍스트 변경하기 (0) | 2021.09.03 |
jQuery] elements 선택, css 효과주기, 클라스 추가 삭제 (0) | 2021.09.03 |
댓글