✔️제이쿼리 왜 사용할까?
: 웹사이트를 만들 때 HTML, CSS, JS 등을 이용하여 만든다. HTML은 틀을 만들고 CSS는 디자인을 입히며, JS로 다이내믹하게 변화하는 웹페이지 효과를 준다. 제이쿼리는 자바스크립트의 기능을 모아놓은 라이브러리이다.
JS를 사용해서 내가 코드를 짜나 상대방이 코드를 짜나 똑같은 코드가 나올 수 있다. 쉽게 말해 귀찮음 방지로 제이쿼리를 사용하는 것이다. 제이쿼리 덕분에 JS를 작성하는 방식을 아주 간단하게 바꿔 놓는다.
✔️제이쿼리 특징
- 브라우저 호환성
- 네이티브 DOM API보다 직관적이고 편리한 API제공(코드가 짧아짐)
- Event처리, Ajax, Animation 효과 쉽게 사용
✔️제이쿼리 다운
- 방법1: 제이쿼리 파일 다운
jQuery
What is jQuery? 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.
jquery.com
- 방법 2: CDN(Content Delivery Network)을 사용(권장)
- Google CDN:
https://developers.google.com/speed/libraries#jquery
Hosted Libraries | Google Developers
A stable, reliable, high-speed, globally available content distribution network for the most popular open-source JavaScript libraries.
developers.google.com
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
- Microsoft CDN
https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0
Microsoft Ajax Content Delivery Network Assets
The Microsoft Ajax Content Delivery Network (CDN) hosts popular third party JavaScript libraries such as jQuery and enables you to easily add them to your Web applications.
docs.microsoft.com
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>
✔️제이쿼리 API 다운
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
※api는 구선생 보다는 해당 페이지에서 api를 보길 추천(신기술이 나오면 내가 찾아서 해야 하기 때문)
✔️제이쿼리 표현식
$(selector).action();- selector 표현식과 action메서드를 조합한 형태로 구문을 작성한다.
- js로 작성했다면 getElementById(id) 부분이 $(selector)부분이었을텐데 코드가 간결해졌다.
✔️제이쿼리 정리
- jQuery는 가벼운 자바스크립트 라이브러리로 DOM조작, Ajax 지원 등을 쉽고 빠른 개발 지원
- jQuery의 $(selector)는 DOM을 탐색하고 - 다양한 메서드를 제공하는 래퍼세트(WrapperSet) 객체를 반환한다.
- 래퍼세트 객체는 메서드 체인을 제공하여 메서드 호출에서 반복적인 코딩을 줄여준다.
$(selector).fun1().fun2().fun3()···