JQuery day1
JQuery
JQuery
제이쿼리는 오픈 소스 기반의 자바스크립트 라이브러리로 문서 객체 모델(DOM)와 이벤트에 돤한 처리를 쉽게 할 수 있다는 장점을 가지고 있다.
제이쿼리의 버전
1.x : 익스플로러 6, 7, 8 버전에서의 동작까지 모두 지원하는 버전
2.x : 버전 1에서 지원하는 익스플로러 6, 7, 8 버전에 대한 지원을 중단한 버전
3.x : 제이쿼리 표준. 호환성을 유지한 간결하고 빠른 설계. 익스플로러 9이상에서만 동작
제이쿼리를 사용하는 방법
-
제이쿼리 파일을 다운 받는 방법
http://jquery.com/ 에 들어가면,
Download the compressed, production jQuery 3.6.0
Download the uncompressed, development jQuery 3.6.0
두가지로 나눠있는데 위는 다운받아 그래로 개발에 사용가능한 파일이고 아래는 오픈 소스 기반으로 수정하여 사용하고자 할 때 사용하는 파일이다.
-
CDM을 사용하여 제이쿼리 코드를 로드하는 방법
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>윗 코드를 HTML 문서에 붙이면 제이쿼리를 다운 받지 않아도 제이쿼리를 사용할 수 있다. 보편적으로 CDM 방식으로 사용한다.
그럼 CDM를 활용하여 제이쿼리 예문을 만들어 연결에 성공 여부를 확인해보자.
<!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>
</head>
<body>
<h2>jQuery 라이브러리 연결</h2>
<script>
$(function(){
console.log('jQuery의 시작!');
});
</script>
</body>
</html>
위 와 같이 HTML 코드 안에 CDM 코드를 넣어놓고 제이쿼리 문법을 활용하여 스크립트 코드 작성해보았다. 이 코드를 실행시켜보면
브라우저가 정상적으로 작동되고 콘솔창에도 정상적으로 출력되었다. 자세한 제이쿼리 문법은 다음시간에 배워보도록 하자.