jQuery 1.

jQuery 소개

크로스 브라우징을 구현하기 위한 자바스크립트 라이브러리

모든 브라우저에서 동작하는 클라이언트 사이드의 자바스크립트 라이브러리

현재 웹 상에서 flash를 대체할 수 있는 RIA을 구현해주는 기술

장점

• 크로스 브라우징 구현
• 쉽고 빠르게 작성 가능
• 적게입력하고 최대의 효과를 가지도록(write less, do more)
• 사용법이 간단하고, 직관적이고 성능이 뛰어남
• DOM과 관련된 처리, 이벤트 연결, Ajax개발을 쉽게 가 능

js, DOM, html/css에 대한 공부가 선행되어야 함

jQuery library 구성요소

• html/dom maniulation

• css manipulation

• html event methods

• effect and animations

• ajax

• utilities

  jQuery는 거의 모든 플러그인을 지원

jQuery 설치

1. jQuery.js를 직접 다운로드

• www.jquery.com 에서 다운로드

• 다운로드 이후에는 본문에 아래 script tag를 추가해주어야 함

<script type="text/javascript" src="jquery-2.0.0.js"></script>

2. jQuery를 가지고 있는 CDN호스트를 이용

• 아래 script tag를 추가해주어야 함

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>

• jQuery CND 호스트 주소
  • google ajax api cdn
    • http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
    • http://docs.jquery.com/downloading_jQuery
  • microsoft cdn
    • http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.js
    • http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js
    • http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0-vsdoc.js
    • http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.map
  • jQuery cdn
    • http://code.jquery.com/jquery-2.0.0.min.js
    • http://code.jquery.com/jquery-2.0.0.js

※ jquery-2.0.0과 jquery-2.0.0.min의 차이점은 압축 유무(전자가 압축 안된 것)

jQuery 코드의 위치는 script태그 안에만 넣으면 되고 주로 head tag안에 script태그를 넣음

jQuery 기본 개념

javascript 기본 문법, DOM의 개념 및 특징, 용어를 알아야 사용 가능

jQuery의 시작점은 jQuery()함수이고 이 결과 모든 것이 jQuery 객체로 반환 됨

jQuery의 기능

• Core - jQuery() 함수가 핵심
• selector - 조작을 원하는 HTML노드 선택
• attributes/css - 선택한 노드의 속성 값을 가져오거나 변경
• manipulation - DOM에 대한 다양한 동작(create, delete, update...)
• traversing - DOM에 접근하여 원하는 노드를 찾는 방법을 제공
• events - 여러가지 이벤트에 의한 처리
• effects - fade in, fade out, slide up, dlide down 등 특수효과
• ajax - 서버와의 비동기식 통신으로 데이터 교환

jQuery() 함수

• jQuery()의 매개변수로 selector가 들어감
• jQuery()의 매개변수로 html문자열이 들어감
• jQuery()의 매개변수로 함수가 들어감

DOM(문서 객체 모델)

• document object model의 약자
• 트리 구조를 가지고 있음
  • 각각의 노드들은 html태그
• 웹 문서에서 html 문서 요소를 제어하기 위한 문법적인 구조로 웹 문서의 내용, 구조, 스타일을 변경하거나 접근하는 구조
• w2c에서는 dom의 표준 규격을 제시함

 

자바스크립트의 특징

js는 네트케이프사에서 만든 html 문서 내에 삽입되어 동적인 웹 페이지를 만들도록 해주는 스크립트

독립된 응용프로그램 형태를 지니지 못하는 스크립트 언어

• 완벽한 문법적인 구조를 가지지 못하기 때문

객체를 이용하여 프로그래밍하는 객체 기반 언어

브라우저에 대한 우수한 호환성으로 client-side에서 프로그래밍하는 스크립트에 사용

자바스크립트를 정의하는 방법

html 안에 삽입될때는

<script></script>

안에 삽입 되어야 함

• 스크립트 태그는,태그 안에 모두 정의 가능
  • 하지만태그 안에 정의하는 것을 원칙으로 함

자바스크립트의 주석문

/* */

• 여러 줄을 주석으로 사용할 때

//

• 한 줄을 주석으로 사용할 때

자바스크립트의 자료형

자바스크립트의 자료형은 varient 타입

• 세부적으로는 char, int, double, float, int, long, short, void 등이 있음

자료형이 엄격하지 않기 때문에 처음부터 치환으로 이용 가능

• ex) a=10

변수 만드는 규칙

사용 가능한 문자는 영문자, 숫자, _

숫자로 시작 불가능

공백은 허용 안됨

예약어는 변수로 사용 불가능

 

jQuery 연산자

산술연산자

종류기호예제결과

덧셈	+	10 + 20	30
뺄셈	-	20 - 10	10
곱셈	*	10 * 20	200
나눗셈	/	20 / 10	2
모듈러	%	20 % 10	0

대입연산자

종류기호예제결과

덧셈대입	+=	res = res + 20	res += 20
뺄셈대입	-=	res = res - 20	res -= res 20
곱셈대입	*=	res = res * 20	res *= 20
나눗셈대입	/=	res = res / 20	res /= 20
모듈러대입	%=	res = res % 20	res %= 20

증감연산자

전위연산자

• 피연산자의 앞쪽에 위치

후위연산자

• 피연산자의 뒤쪽에 위치

종류 : ++, --

비교연산자

종류기호예시A = 10, B = 5 인 경우

작다	<	A < B	f
크다	>	A > B	t
작거나 같다	<=	A <= B	f
크거나 같다	>=	A >= B	t
같다	==	A == B	f
같지 않다	!=	A != B	t

논리연산자

논리연산자 and : &&

논리연산자 or : ||

ABA && BA || B

F	F	F	F
F	T	F	T
T	F	F	T
T	T	T	T

비트연산자(쉬프트 연산자)

비트를 이동시키는 연산자로 오른쪽 이동, 왼쪽 이동이 있음

연산자의미예시해석

>>	오른쪽으로 이동	5 >> 2	이진수 5인 $101_{(2)}$를 오른쪽으로 2칸 쉬프트하므로 $1_{(2)}$가 됨
<<	왼쪽으로 이동	5 << 2	이진수 5인 $101_{(2)}$를 왼쪽으로 2칸 쉬프트하므로 $10100_{(2)}$가 됨

비트연산자(비트 논리 연산자)

AND(&), OR(|), XOR(^), NOT(~) 이 있음

AND

XYX & Y

T	T	T
T	F	F
F	T	F
F	F	F

OR

XYX | Y

T	T	T
T	F	T
F	T	T
F	F	F

XOR

XYX ^ Y

T	T	F
T	F	T
F	T	T
F	F	F

NOT

X~X

T	F
T	F
F	T
F	T

삼항연산자

항이 3개 필요

조건 ? 수식 1 : 수식 2

• 조건이 참이면 수식 1로가고 조건이 거짓이면 수식 2로 감

기타연산자 (문자연결 연산자)

• +기호를 이용