| 클라이언트사이드 |
클라이언트 사이드 프로그래밍 [jQuery]
2019년 11월 28일 수업 내용 + 개인적인 추가 내용
선택 <-> 처리
[목표]
jQuery 개념을 이해
jQuery 파일을 웹문서 작성에 활용
jQuery 파일 두가지 버전과 용도를 이해
jQuery 문장 구조의 특징 이해
jQuery selector 포함 기능 이해
jQuery 소개
jQuery 기본 : HTML, CSS JavaScript
Lightweight "write less do more" Javascript Library
웹 문서 작성 JavaScript를 매우 쉽게 활용 할 수 있도록 만든 라이브러리
jQuery를 활용하지 않은 웹 사이트는 없을 정도의 필수 아이템
jQuery 가능 한 것
| HTML/DOM 조작 | ->간단한 방법으로 처리 가능 |
| CSS 조작 | |
| HTML 이벤트 처리 | |
| 다양한 효과와 애니메이션 | |
| AJAX |
- Ajax(Asynchronous JavaScript and XML, 에이잭스)는 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.
jQuery 사용법
웹 문서에 jQuery 파일을 추가
1. jQuery파일을 다운로드,웹 문서 추가 [ 수업 시 주로 다룰 방법 ]
[ 참고링크 ]
Production version
실질적 효율적 활용 목적 압축 제공
파일 크기가 매우 작다
Development version
테스트 학습 수정 개발 등이 가능한 비압축 원본 파일
파일 크기가 커서 활용 효율 측면 불리하여, 사용성이 떨어짐
2. 외부 사이트 제공 jQuery파일 웹 문서 링크 연결 추가
Google, Microsoft등 CDN 제공 파일을 연결
기본 문법 $(selector).action()
$ : jQuery 정의/접근 할 수 있는 기호
- jQuery 태그 선택은 CSS 문법 사용
* 문서 준비 이벤트
$(document).ready(function(){
// 문서 불러오기 끝내기 전에 jQuery 코드 실행 방지
});
jQuery 문장 구조
1. 기본 문장 구조
| 기본 문법 $(selector).action() |
- jQuery 이용, html 요소를 선택(query) 필요한 처리 (Action)
$
jQuery 라이브러리 접근
$대신 jQuery 사용 가능
selector
처리대상 html 요소 선택
action
선택된 요소 필요한 처리
예를 들어,
$("P").hide();
// 위 아래와 같이 써도 됨
jQuery("P").hide();$(this).slide();
$(".class").hide();
$("#id").hide();
// jQuery 예제2. jQuery 코딩 시작
// 기존 JavaScript
<script>
window.onload = function() {
// Source code
};
</script>
// jQuery 활용 시
<script>
$(document).ready(function(){
// Source code
});
</script>3. jQuery 사용
jQuery Effects [hide / show]
$(selector).hide([speed, callback]); // 감추다
$(selector).show([speed, callback]); // 보여주다
$(selector).toggle([speed, callback]); // 위 두가지를 보여준다
fading
$(selector).fadeIn([speed, callback]);
$(selector).fadeOut([speed, callback]);
$(selector).fadeToggle([speed, callback]);
sliding
$(selector).slideUp([speed, callback]);
$(selector).slideDowne([speed, callback]);
$(selector).slideToggle([speed, callback]);오늘 수업 시 한 예제 소스
|