Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 스프링 빈
- 스프링 컨테이너
- 자바스크립트 코딩의 기술
- 개발자 회고록
- toCharArray
- 자바
- 리눅스마스터 1급 정리
- 백준 javascript
- Kotlin
- 코테
- Java
- 리눅스
- 반복문
- JavaScript
- 고잉버스
- Linux
- 리눅스마스터1급
- java 백준 1차원 배열
- Memoir
- 카카오
- 연습문제
- 월간코드챌린지
- GoingBus
- 백준 java
- 명령어
- 코딩테스트
- map
- 리눅스마스터 3과목
- 문자열
- 프로그래머스
Archives
- Today
- Total
hoon's bLog
jQuery 기초 문법 개념 본문
반응형
제이쿼리(jQuery)
- 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리
- 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현
- 또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발 가능
제이쿼리가 많이 사용되는 이유
- 제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원
- HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용 가능
- 애니메이션 효과나 대화형 처리를 간단하게 적용
- 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현 가능
- 다양한 플러그인과 참고할 수 있는 문서가 많이 존재
- 오픈 라이선스를 적용하여 누구나 자유롭게 사용 가능
제이쿼리 적용
- 제이쿼리는 자바스크립트 라이브러리이므로, 제이쿼리 파일은 자바스크립트 파일(.js 파일) 형태로 존재
- 웹 페이지에서 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 먼저 웹 페이지에 로드(load)해야 함
웹 페이지에 제이쿼리 파일을 로드하는 방법
- 제이쿼리 파일을 다운받아 로드하는 방법
- CDN(Content Delivery Network)을 이용하여 로드하는 방법
- 제이쿼리 파일을 다운받아 로드하는 방법
- 최신 버전의 제이쿼리 파일은 아래 공식 사이트에서 다운 가능
- 이렇게 다운받은 제이쿼리 파일을 서버에 저장하고, 다음 <script> 태그를 웹 페이지의 <head> 태그 내에 삽입
jQuery 공식사이트 : http://jquery.com/download
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>CDN을 이용하여 로드하는 방법
- CDN(Content Delivery Network)이란 웹 사이트의 접속자가 서버에서 콘텐츠를 다운로드 할 때, 자동으로 가장 가까운 서버에서 다운로드하도록 하는 기술
- 이 기술을 이용하면 특정 서버에 트래픽이 집중되지 않고, 콘텐츠 전송 시간이 매우 빨라지는 장점
- 이러한 CDN을 이용하면 제이쿼리 파일을 서버에 따로 저장하지 않아도 제이쿼리를 사용 가능
- CDN 종류
- jQuery.com CDN : <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
- 구글 CDN : <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
- MS CDN : <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
- CDNJS CDN : <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
- jsDelivr CDN : <script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>Reference
https://www.tcpschool.com/jquery/intro
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
728x90
반응형
'IT > HTML, jQuery, Ajax' 카테고리의 다른 글
| jQuery DOM method 기타 탐색 메서드, 필터링(filtering) 메서드 (0) | 2023.07.11 |
|---|---|
| jQuery parent sibling children element 부모 형제 자식 요소 탐색 (0) | 2023.07.10 |
| jQuery element 요소 복사 및 삭제 (4) | 2023.07.07 |
| jQuery 요소 Element 선택 및 선택자 Selector 사용 (0) | 2023.07.06 |
| jQuery $ 문법 및 사용법 jQuery object (0) | 2023.07.05 |
'IT/HTML, jQuery, Ajax' Related Articles
more
