제이쿼리 적용
- 제이쿼리는 자바스크립트 라이브러리
- 제이쿼리 파일은. js 파일 형태로 존재해야한다.
- 따라서 웹 페이지에서 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 먼저 웹 페이지에 로드해야 한다.
1. 제이쿼리 적용 방법
1) 제이쿼리 파일을 받아 로드하는 방법
- 공식 사이트에서 다운로드 후 제이쿼리 파일을 서버에 저장 후, <script>태그를 웹 페이지의 <head>태그 내에 삽입하면 된다.
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
문법
<head>
<script src="/파일경로/제이쿼리파일명.js"></script>
</head>
예제
<head>
<script src="/media/jquery-1.12.4.min.js"></script>
</head>
2) CDN을 이용하여 로드하는 방법
- CDN을 이용하면 제이쿼리 파일을 서버에 따로 저장하지 않아도 제이쿼리를 사용할 수 있다.
- 이용할 CDN 스크립트를 <head>태그 내에 삽입하면 된다.
1. jQuery.com CDN : <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
2. 구글 CDN : <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
3. MS CDN : <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
4. CDNJS CDN : <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
5. jsDelivr CDN : <script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
제이쿼리 기본 문법
$(선택자).동작함수();
=> HTML요소 선택하고 동작 함수 정의하여 선택된 요소에 원하는 동작을 설정할 수 있다.달러($) 기호
: 제이쿼리를 의미하며, 제이쿼리에 접근할 수 있는 식별자이다.
$() 함수
: 함수는 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할
$()함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS선택자를 전달하여 특정 HTML 요소를 선택할 수 있다.
$() 함수에 전달되는 이수는 반드시 ""를 사용한 문자열 형태로 전달되어야 한다.
ready() 메소드
- 자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 하기 때문에 문서가 로드된 뒤에 코드가 실행되도록 설정해야 한다.
자바스크립 문법
window.onload = function() {
};
제이쿼리 문법1
$(document).ready(function() {
});
제이쿼리 문법2
$(function() {
});
'프로그래밍 > jQuery' 카테고리의 다른 글
| [제이쿼리] jQuery 요소의 외부에 추가(.before(), .after(), .insertBefore(), insertAfter()) (0) | 2023.01.25 |
|---|---|
| [제이쿼리] jQuery 요소의 내부에 추가 (append, prepend, appendTo, prependTo) (0) | 2023.01.24 |
| [제이쿼리] jQuery 메소드 체이닝, getter / setter, width() / height(), .attr() 메소드 (2) | 2023.01.24 |
| [제이쿼리] jQuery 선택자 (요소저장, 필터링, input선택자) (0) | 2023.01.24 |
| [제이쿼리] jQuery CSS 선택자를 이용한 HTML 요소 선택 (0) | 2023.01.24 |