라이브러리란?(library)
자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들
jQuery란?
- 엘리먼트를 선택하는 강력한 방법과
- 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는
- 자바스크립트 라이브러리
제이쿼리를 사용하면 아주 간편하게 HTML 요소를 선택하고,
그렇게 선택된 요소에 손쉽게 특정 동작을 설정할 수 있다.
특징
① 크로스 플랫폼을 지원하는 jQuery는 어떠한 브라우저에서도 동일하게 동작한다. 이것은 브라우저 호환성을 고려하여 대체 코드를 작성할 필요가 없다.
② 네이티브 DOM API 보다 직관적이고 편리한 API를 제공한다. CSS 스타일의 selector를 사용할 수 있으며 조작 또한 유연하게 할 수 있다.
③ 이벤트 처리, Ajax, Animation 효과를 쉽게 사용할 수 있다.
④ 다양한 플러그인이 존재하며 다른 라이브러리들과 충돌을 일으키지 않는다.
제이쿼리의 기본 문법
$(선택자).동작함수();
제이쿼리 장점
라이브러리에서 이미 제공하고 있는 기능을 가져와서 사용할 수 있으므로
직접 작성하는 코드양을 줄일 수 있고, 결과적으로 개발 시간이 줄어들고, 직접 작성하는 코드양이 적기 때문에 읽기 쉽고 정리하기 쉬운 코드가 된다.
jQuery 사용하기
jQuery를 사용하는 방법은 두가지
첫번째,
CDN 호스트를 사용하는 방법이다.
두번째,
직접 내려 받아 사용하는 방법이다.
사용할 코드를 HTML <head></head> 태그 내에 작성하여 사용하면 된다.
① CDN 호스트를 사용하는 방법
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
② 직접 내려 받아 사용하는 방법
(직접 내려 받아 사용하는 경우에는 경로를 정확히 설정해주어야 한다.)
<script src="jquery-3.5.1.min.js"></script>
설치
jQuery CDN
The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr
releases.jquery.com
최신 버전에 minified > script 부분 소스 코드 전체 복사 > 코드 내 script 부분에 붙여넣기 하면 설치 끝
설치한 곳 <script> 복붙 한 곳 하단에서 jQery 문법 사용 가능 !
모든 라이브러리들은 <body> 끝나기 전에 넣는 것이 권장됨. (페이지 로드 성능 때문)
<head> 태그 안에 넣으면 편의상 좋지만 느릴 수 있음.
제이쿼리 함수
document.querySelector 대신 $ 사용
.innerHTML 대신 .html 사용
스타일 줄 때 : $(' 클래스나아이디명 ').css('color','red'); -- .innerHTML 대신 .css 사용
class 탈부착 가능 : $(' ').addClass('추가할클래스이름');
class 제거 : .removeClass()
토글 : .toggleClass
'JavaScript > jQuery' 카테고리의 다른 글
| [jQuery] 제이쿼리로 최상단으로 부드럽게 스크롤 이동하기 (0) | 2023.08.14 |
|---|
댓글