안녕하세요.
이번 포스팅은 JQuery 에 대한 포스팅입니다.
재작년에 아주 후루룩 라면 먹듯 JQuery를 배웠었는데, 프로젝트 하면서 한번 더 쓸 일이 있어서
정리하는 느낌으로 다시 포스팅을 하고 있습니다!
이번 포스팅은 JQuery를 기본적으로 알고 계시고, 사용해보신 분들보다
JQuery를 처음 접하시는 분들에게 더욱 도움이 되는 포스팅이 될 것 같습니다.
JQuery 란?
JQuery 는 자바스크립트를 사용해 HTML 을 조작하는 것을 더욱 편리하게 하기 위해서 만들어진
자바스크립트 라이브러리 입니다.
"write less, do more(적게 작성하고, 많은 것을 하자)”라는 문장을 필두로
미국의 개발자 존 레식(John Resig)이 2006년에 발표했어요.
사실 요즘은 제이쿼리를 검색하면 하락세를 보이고 있다는 의견이 많이 보입니다.
프론트엔드 프레임워크인 부트스트랩도 제이쿼리에 기대는 의존도를 낮추겠다고 선언했고,
웹 표준 api 가 확장되면서 제이쿼리의 입지가 좁아졌죠.
하지만 제이쿼리는 여전히 HTML 조작 뿐만 아니라, 네트워크, 애니메이션 효과 등 아주 많은 기능을 제공해주고 있어요.
거의 모든 웹브라우저에서 호환이 가능하고, 설치와 사용도 간단합니다.
이제 본격적으로 JQuery를 사용하러 가봅시다!
JQuery 를 사용해보자!
JQuery는 앞서 말했듯이 자바스크립트 라이브러리이기 때문에, 이미 만들어져 있습니다.
우리가 JQuery를 사용하려면 JS 파일을 자신의 프로젝트로 가지고 오기만 하면 됩니다.
크게 방법은 두가지로 나뉩니다.
- 직접 JQuery 라이브러리 다운로드
만약 제이쿼리 자바스크립트 파일을 직접 다운 받고 싶으시다면,
Download jQuery | jQuery
link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download
jquery.com
위의 링크를 통해 들어가 다운받을 수 있습니다.
개발 서버가 따로 있다면 아래의 명령어로도 설치할 수 있어요.
npm install jquery
- CDN(Content Delivery Network) 이용하기
이 방법은 네트워크를 이용해 JQuery 라이브러리를 자동으로 가져오는 방법입니다.
인터넷이 연결되어야만 하지만, CDN 방식을 이용하면 굳이 로컬에 JQuery 파일을 설치하지 않아도 되니
저는 여태껏 CDN 을 이용해 사용해왔습니다.
1. JQuery.com CDN : <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
2. Google CDN : <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
3. MS CDN : <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
4. jsDelivr CDN : <script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
5. CDNJS CDN : <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js></script>
CDN 을 통한 JQuery 라이브러리는 위의 링크를( 빨간색 부분 ) HTML head 태그에 추가하면 됩니다.
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
이런 식으로 해주면 JQuery 를 사용 가능합니다!
JQuery 기본 문법
제이쿼리의 문법은 $ 표시가 중요합니다.
$(Selector).JQueryAPI();
위와 같은 형식으로 사용하는데,
위의 Selector 는 조작하고자 하는 HTMl 부분을 선택하는 역할을 합니다.
$("body")
이렇게 쓸 수도 있고,
$("#testId")
이렇게 #을 이용해서 id를 가진 요소를 선택할 수도 있습니다.
$(".testClass")
class 또한 가능하겠죠.
변화시키고 싶은 HTML 요소를 선택하고 JQueryAPI를 이용해 조작할 수 있습니다.
JQueryAPI는 수많은 메소드 중 하나이고, 더욱 더 다양한 메소드가 궁금하시다면
jQuery API Documentation
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t
api.jquery.com
위의 링크를 참고하시면 좋을 것 같습니다.
이번 포스팅은 여기서 마치도록 하겠습니다.
감사합니다.
'Archive > Develop' 카테고리의 다른 글
| [ JavaScript ] 자바스크립트 점과 점 사이의 거리 구하기 | 두 점 사이의 거리 코드 (0) | 2021.01.17 |
|---|---|
| [ JavaScript ] JavaScript와 JQuery 를 이용한 간단한 타이머 만들기 | 제이쿼리 setTimeout 함수 (0) | 2021.01.13 |
| [ JavaScript ] 자바스크립트 바인딩과 this | 자바스크립트 개념 (0) | 2021.01.08 |
| [ Python ] 파이썬 피보나치 수열(Fibonacci)코드 (0) | 2021.01.07 |
| [ Python ] 파이썬 이분 검색(Binary Search) 코드 | 순차 탐색 vs 이분 검색 (0) | 2021.01.07 |