제이쿼리(jQuery)
- 오픈소스 기반의 자바스크립트 라이브러리
- 문서 객체 모델(DOM)와 이벤트 (Event)에 관한 처리를 쉽게 할 수 있음
- Ajax 응용 프로그램을 빠르게 개발 가능
- 크로스 브라우징(브라우저들 끼리 동일하게)을 위해 사용(예전에 ms는 웹 표준화에 동참 x)
제이쿼리 버전
1.X : 익스플로러 6, 7, 8 버전에서의 동작까지 모두 지원하는 버전
2.X : 버전1에서 지원하는 익스플로러 6, 7, 8 버전에 대한 지원을 중단한 버전
3.X : 제이쿼리 표준. 호환성을 유지한 간결하고 빠른 설계. 익스플로러 9 이상에서만 동작
제이쿼리 공식 사이트
http://jquery.com/ (jQuery 파일을 포함해서 개발할 때)
- Download the compressed, production jQuery 3.6.0
다운받아 그대로 개발에 사용할 수 있는 파일
- Download the uncompressed, development jQuery 3.6.0
오픈소스 기반으로 수정하여 사용 가능한 파일
🎁 CDN(Content Delivery Network)을 사용하여 로드
- 구글에서 "jQuery cdn" 으로 검색(jQuery사이트에 올려놓고 가져다 쓰는)
jQuery Core 3.6.0 - uncompressed, minified(✔), slim, slim minified
<script src="https://code.jquery.com/jquery3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
제이쿼리의 $() 함수
window.onload = function() { //window.onload: 문서가 다읽혀졌을때 실행되는(위치 상관x)
실행문
...
} $(function(){ //jQuery
실행문
...
}); $(document.ready(function(){ // jquery1~
실행문
...
}))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 라이브러리 연결</title>
<!-- <script src="./jquery-3.6.0.min.js"></script>
-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script><!--cdn 방법-->
</head>
<body>
<h2>jQuery 라이브러리 연결</h2>
<script>
'use strict';
$(function(){
console.log('jQuery의 시작!');
});//jQuery가 로드돼야 사용가능(로드 안됐을 시 : $ is not defined)
</script>
</body>
</html>
'JS > jQuery' 카테고리의 다른 글
| [jQuery] 요소의 탐색 (0) | 2022.05.09 |
|---|---|
| [jQuery] 요소 (0) | 2022.05.09 |
| [jQuery] jQuery로 DOM 다루기 (0) | 2022.05.09 |
| [jQuery] 메소드 체이닝(method chaining) (0) | 2022.05.09 |
| [jQuery] jQuery 선택자, 메소드 (0) | 2022.05.09 |