jQuery jQuery 개요 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리

Presentation on theme: "jQuery jQuery 개요 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리"— Presentation transcript:

1 jQuery jQuery 개요 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리
2006년 1월, 존 레식 John Resig 이 BarCamp NYC에서 발표 무료로 사용 가능한 오픈소스 라이브러리 jQuery의 제작 목표 DOM과 관련된 처리 쉽게 구현 일관된 이벤트 연결 쉽게 구현 시각적 효과 쉽게 구현 Ajax 애플리케이션 쉽게 개발

2 jQuery jQuery 사용의 장점 웹 표준만으로도 플래시와 실버라이트로 구현한 웹 사이트와 비슷한 수준의 시각적 효과 구현
웹 표준만으로도 플래시와 실버라이트로 구현한 웹 사이트와 비슷한 수준의 시각적 효과 구현 복잡한 자바스크립트 문법을 간소화 크로스 브라우징 다양한 오픈소스 라이브러리

3 jQuery jQuery 다운로드와 CDN 방식 다운받으려면 http://jquery.com 접속
다운받으려면 접속 메인 화면에서 곧바로 jQuery 다운 가능

4 jQuery jQuery 사용법 첫 번째 방법은 CDN 호스트 사용하는 방법 두 번째는 직접 다운받아 사용하는 방법

5 jQuery CDN 이란? CDN은 Content Delevery Network 의 약자
사용자에게 간편하게 콘텐츠 제공하는 방식 의미 구글, 마이크로소프트, jQuery측에서 사용자가 jQuery를 사용하기 편하게 콘텐츠 제공

6 jQuery jQuery CDN 호스트 사용해 이용 HTML 페이지 구성
script 태그의 src 속성에 제공되는 CDN 호스트 입력

7 jQuery jQuery 파일명 오프라인에서 jQuery 사용 ◯◯.js 파일 ◯◯.min.js 파일 반드시 다운받아 사용
Uncompressed 버전 ◯◯.min.js 파일 ◯◯.min.js 파일은 Minified 버전 (용량이 다섯 배 이상 차이) Minified 버전은 파일의 용량을 최소화하려고 압축한 파일 오프라인에서 jQuery 사용 반드시 다운받아 사용

8 jQuery(document).ready( )
문서가 준비가 완료되면 매개 변수로 전달된 함수를 실행하라는 의미 jQuery 이벤트 메서드 중 하나 아래 위 두 메서드는 비슷한 역할

9 jQuery(document).ready( )
3개의 경고창 띄우는 예제

10 jQuery(document).ready( )
간단하게 사용되는 형태도 존재

11 jQuery 기본 선택자 jQuery 메서드의 가장 기본적인 형태 문서 객체를 다룰 때 사용하는 형태
jQuery(‘h1’).css(‘color’, ‘red’); $(‘h1’).css(‘color’, ‘red’); 선택자 메서드

12 jQuery 기본 선택자 전체 선택자 CSS의 가장 기본적인 선택자는 전체 선택자Wildcard Selector
HTML 페이지에 있는 모든 문서 객체를 선택하는 선택자 * 모든 문서 객체의 color 스타일 속성에 red 입력

13 jQuery 기본 선택자 태그 선택자 태그 선택자는 특정한 태그만 선택하는 선택자 태그의 이름 그냥 사용

14 jQuery 기본 선택자 태그 선택자의 활용 하나 이상의 태그 선택자를 동시에 사용하고 싶을 때

15 jQuery 기본 선택자 아이디 선택자 특정한 id 속성을 가지고 있는 문서 객체 선택하는 선택자
Ex) 예제 두 번째에 위치한 h1 태그가 id 속성으로 target 가짐

16 jQuery 기본 선택자 아이디 선택자의 활용 id 속성은 HTML 페이지 내에서 단 하나의 태그에만 적용
태그 선택자와 아이디 선택자 함께 사용하지 않아도 됨

17 jQuery 기본 선택자 클래스 선택자 특정한 class 속성 가진 문서 객체를 선택하는 선택자

18 jQuery 기본 선택자 두 클래스 속성을 모두 갖는 문서 객체를 선택하고 싶을 때 두 클래스 선택자 붙여서 사용

19 jQuery 자식 선택자와 후손 선택자 jQuery 자식 선택자와 후손 선택자
기본 선택자의 앞에 붙여 사용하며 기본 선택자의 범위 제한

20 jQuery 자식 선택자와 후손 선택자 자식 선택자 자식을 선택하는 선택자 ‘부모 > 자식’의 형태로 사용
ul 태그의 자식으로 범위 한정해 전체 선택

21 jQuery 자식 선택자와 후손 선택자 후손 선택자 후손을 선택하는 선택자 ‘요소 A 요소 B’의 형태로 사용

22 속성 안의 값이 특정 값을 단어로써 포함하는 객체 선택
jQuery 속성 선택자 속성 선택자 기본 선택자 뒤에 붙여 사용 jQuery에서 지원하는 속성 선택자 형태 설명 요소[속성] 특정 속성을 가지고 있는 객체 선택 요소[속성=값] 속성 안의 값이 특정 값과 같은 객체 선택 요소[속성~=값] 속성 안의 값이 특정 값을 단어로써 포함하는 객체 선택 요소[속성^=값] 속성 안의 값이 특정 값으로 시작하는 객체 선택 요소[속성$=값] 속성 안의 값이 특정 값으로 끝나는 객체 선택 요소[속성*=값] 속성 안의 값이 특정 값을 포함하는 객체 선택

23 jQuery 속성 선택자 속성 선택자 사용 예제 코드

24 jQuery 입력 양식 필터 선택자 속성 선택자 사용 input 태그의 type 속성 따라 문서 객체 선택 가능
필터 선택자는 기본 선택자 뒤에 사용 ‘input:button’의 형태로 선택 형태 설명 input:button input 태그 중 type이 button인 객체 선택 input:checkbox input 태그 중 type이 checkbox인 객체 선택 input:file input 태그 중 type이 file인 객체 선택 input:image input 태그 중 type이 image인 객체 선택 input:password input 태그 중 type이 password인 객체 선택 input:radio input 태그 중 type이 radio인 객체 선택 input:reset input 태그 중 type이 reset인 객체 선택 input:submit input 태그 중 type이 submit인 객체 선택 input:text input 태그 중 type이 text인 객체 선택

25 select 태그의 option 태그 중 선택된 객체 선택
jQuery 입력 양식 필터 선택자 속성 선택자 사용 형태 설명 input:checked input 태그 중 체크된 객체 선택 input:disabled input 태그 중 비활성화된 객체 선택 input:enabled input 태그 중 활성화된 객체 선택 option:selected select 태그의 option 태그 중 선택된 객체 선택

26 jQuery 입력 양식 필터 선택자 속성 선택자 사용 예제
setTimeout() 함수 사용해 웹 페이지 실행  5초 후 선택자 사용

27 jQuery 필터 선택자 위치와 관련된 필터 선택자 선택자 사용해 문서 객체 선택 형태 설명 요소:odd
홀수 번째에 위치한 객체 선택 요소:even 짝수 번째에 위치한 객체 선택 요소:first 첫번째 위치한 객체 선택 요소:last 마지막에 위치한 객체 선택

28 jQuery 필터 선택자 body 태그 구성 줄무늬 모양의 표 만들기

29 jQuery 필터 선택자 함수 형태의 필터 선택자 형태 설명 요소:contains(문자열) 특정 문자열을 포함하는 객체 선택
요소:eq(n) N번째에 위치하는 객체 선택 요소:gt(n) N번째를 초과하는 객체 선택 요소:has(h1) H1 태그를 가지고 있는 객체 선택 요소:lt(n) N번째 미만에 위치하는 객체 선택 요소:not(선택자) 선택자와 일치하지 않는 객체 선택 요소:nth-child(3n+1) 3n+1번째에 위치하는 객체 선택(1, 4, 7, …..)

30 jQuery 필터 선택자 함수 형태의 필터 선택자 :nth-child() 필터 선택자