<jQuery의 개요> <- 유지보수
cf) 제이쿼리 : 꼭 파일 있어야 사용 가능
* jQuery
- 전 세계에서 가장 많이 사용되는 JavaScript 라이브러리
-> 자주쓰는 것들을 모아놓은 것!
- HTML 요소 제어
=> HTML 요소를 손쉽게 획득하고 제어할 수 있다.
- 손쉬운 이벤트 처리
=> 단 한번의 이벤트 정의로 크로스 브라우징 해결
- 요소의 탐색과 생성
=> DOM 요소를 제어하기 위한 간결한 기능 제공
- Ajax 통신처리
=> 페이지 이동이 없는 비동기 데이터 통신
cf) 동기 통신 - 소켓 : 요청을 하면 반드시 응답이 올때까지 기다린다. -> 멈춰서 먹통
비동기 통신
<jQuery 특징>
- 크로스 브라우징
- 간결한 문법
=> HTML 태그 (element)를 제어하거나 이벤트를 처리하는 부분 등 Javascript의 전반에 걸쳐서
구문이 짧아지기 때문에 개발 효율성이 높아진다.
- 익숙한 구문
=> CSS에서 사용하던 속성과 값을 그대로 Javascript 구문에 적용할 수 있어서
document 내장 객체가 제공하는 기능을 쉽게 사용할 수 있다.
- 다양한 플러그인
=> jQuery를 기반으로 하는 수 많은 플러그인들이 무료로 배포되고 있기 때문에,
갤러리, 메뉴 등의 구현에 대한 작업이 많이 단축된다.
<jQuery 개발 환경>
1. jQuery 라이브러리
- 사이트 : http://www.jquery.com
- production 버전 다운로드
"Download the compressed, production jQuery 3.3.1"
(압축본)
2. jQuery 참조하기
① js 파일을 다운 받아서 사용
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
② http://code.jquery.com의 CDN 서비스를 사용
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
③ http://code.jquery.com의 CDN 서비스를 버전 명시 없이 사용
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
* CDN(Contents Delivery Network) 이란? => cashServer - 지리, 물리적으로 떨어져 있는 사용자에게 컨텐츠를 더 빠르게 제공할 수 있는 기술 - 느린 응답속도 / 다운로딩 타임 을 극복하기 위한 기술 -> CDN을 사용하지 않는 경우 -> 서버 하나로 모두 다 응답해야하니까 힘들다  -> CDN을 사용하는 경우 -> 캐시서버의 도움으로 수월해진다  |
<jQuery 문법>
: jQuery를 사용하면 아주 편하게 HTMl 요소를 선택하고, 쉽게 특정 동작들을 설정할 수 있다.
[형식] $(선택자).동작함수();
$ 기호는 jQuery를 의미하면서 jQuery에 접근할 수 있는 식별자이다.
괄호안에 "선택자"를 이용하여 원하는 HTML 요소를 선택하고 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다.
$() 함수는 선택된 HTML 요소를 jQuery에서 이용할 수 있는 형태로 생성해줍니다.
$() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있다.
이러한 $()함수를 통해 생성된 요소를 제이쿼리 객체(jQuery Object)라고 한다.
jQuery는 이렇게 생성된 제이쿼리 객체의 메소드를 사용하여 여러 동작을 설정할 수 있다.
<Document 객체의 ready() 메소드>
Javascript 코드는 웹브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 한다.
보통은 별다른 문제가 발생하지 않지만, 아래 2가지일 경우에는 오류가 발생한다.
1. 아직 생성되지 않은 HTML 요소에 속성을 추가하려고 할 경우
2. 아직 로드되지 않은 이미지의 크기를 얻으려고 할 경우
- onload = ready / 세개 다 같은 코드 onload 읽자마자 처리?!
window.onload = function(){
//자바 스크립트 코드;
};
Javascript에서는 Window 객체의 onload() 메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정한다.
$(document).ready(function() {
//제이쿼리 코드;
});
jQuery에서는 Document 객체의 ready()메소드를 이용하여 위와 같이 동일하게 로드된 뒤에 코드가 실행된다.
$(function() {
제이쿼리 코드;
});
jQuery에서는 위 코드와 동일한 결과를 보장하며 더욱 짧은 문법을 제공한다.
[실습]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
// jQuery
$(document).ready( function() {
$("#docu").text("문서가 전부 로드됐어요!");
});
// Javascript
$(window).load( function() {
$("#wind").text("창이 모두 로드됐어요!");
});
</script>
</head>
<body>
<p id="docu">제이쿼리</p>
<p id="wind">자바스크립트</p>
</body>
</html>
<p>태그에서 id속성으로 각각 값을 입력해줍니다.
<script>에서 jquery로 $()안에 #을 사용하여 id의 속성을 의미하고, 그 값을 넣어 선택자를 지정한다.
text함수를 호출해서 값을 입력하면 웹브라우저가 문서의 모든 요소를 로드한 뒤에
위 코드의 <script>가 바로 실행되도록 한다.
제이쿼리는 라이브러리가 꼭 필요하다!
'JQuery' 카테고리의 다른 글
| 211014(목) jQuery - arrt() / prop() / CSS (0) | 2021.10.14 |
|---|---|
| 211013(수) JQuery - 포커스 / 체인지 / resize / 스크롤 등 이벤트 (0) | 2021.10.13 |
| 211006(수) JQuery - 마우스 키보드 이벤트 등 (0) | 2021.10.06 |
| 210930(목) JQuery 3일차 - css셀렉터 / jQuery이벤트 (0) | 2021.09.30 |
| 210927(월) JQuery 2일차 (0) | 2021.09.24 |