Html5 css3 javascrpt jquery
This presentation is the property of its rightful owner.
Sponsored Links
1 / 24

웹 표준을 위한 HTML5 & CSS3 & javascrpt & JQuery PowerPoint PPT Presentation


  • 160 Views
  • Uploaded on
  • Presentation posted in: General

웹 표준을 위한 HTML5 & CSS3 & javascrpt & JQuery. 08 장 . 작고 강한 자바스크립트 jQuery. 08 장 . 작고 강한 자바스크립트 jQuery. 오픈 소스 형태로 제공되기 때문에 jQuery 라이브러리 파일을 포함시켜서 사용 jQuery 라이브러리를 사용하기 위한 2 가지 방법 CDN 서비스에서 로딩 웹 로컬에서 로딩. 08 장 . 작고 강한 자바스크립트 jQuery.

Download Presentation

웹 표준을 위한 HTML5 & CSS3 & javascrpt & JQuery

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Html5 css3 javascrpt jquery

웹 표준을 위한 HTML5 & CSS3 & javascrpt & JQuery

08장. 작고 강한 자바스크립트 jQuery


08 jquery

08장. 작고 강한 자바스크립트 jQuery

  • 오픈 소스 형태로 제공되기 때문에 jQuery라이브러리 파일을 포함시켜서 사용

  • jQuery라이브러리를 사용하기 위한 2가지 방법

    • CDN 서비스에서 로딩

    • 웹 로컬에서 로딩

www.kyobobook.co.kr


08 jquery1

08장. 작고 강한 자바스크립트 jQuery

jQuery메소드를 사용하려면 jQuery레퍼(wrapper) 객체로만 접근할 수 있다.

jQuery레퍼 객체는 jQuery함수를 사용하여 생성할 수 있다.

www.kyobobook.co.kr


08 jquery2

08장. 작고 강한 자바스크립트 jQuery

  • $(document).ready()

    • jQuery는 DOM에서 엘리먼트를 선택

    • DOM은 브라우저 HTML 문서를 완전히 로드한 후에 준비된 상태(ready)가 되었을 때에만 생성

    • HTML 문서가 읽히기 전인 head 부분에 jQuery를 기술하려 한다면 문서가 로드되고 난 후에 jQuery가 수행되도록 처리를 미뤄야 함

    • 이때 사용되는 jQuery가 제공하는 이벤트 핸들러는 $(document).ready()

www.kyobobook.co.kr


08 jquery3

08장. 작고 강한 자바스크립트 jQuery

  • $(document).ready()

    • 문서가 준비상태가 되면 $(document).ready() 이벤트 핸들러에 의해서 콜백함수가호출

www.kyobobook.co.kr


08 jquery4

08장. 작고 강한 자바스크립트 jQuery

  • 셀렉터(selector)

    • 문서 내에서 원하는 엘리먼트를 쉽게 식별하고 이를 추출하기 위해서 jQuery에서 제공하는 기술

    • DOM 안의 특정 엘리먼트에접근하는 방법은 CLASS와 ID를 사용하는 2가지로 나뉨.

www.kyobobook.co.kr


08 jquery5

08장. 작고 강한 자바스크립트 jQuery

  • ".class" 셀렉터

    • class 어트리뷰트 값이 . 다음에 기술한 내용과 일치하는 엘리먼트에접근

    • 검색하고자 하는 대상이 "class='myClass'"라면 '$(.myClass)'를 사용.

  • "myClass"란 클래스를 갖는 엘리먼트를 찾아 스타일을 지정하는 문장

www.kyobobook.co.kr


08 jquery6

08장. 작고 강한 자바스크립트 jQuery

  • "#id" 셀렉터

    • id 어트리뷰트 값이 # 다음에 기술한 내용과 일치하는 엘리먼트에접근

    • 검색 하고자 대상이 "id='myID'"라면 '$#myID'를 사용

www.kyobobook.co.kr


08 jquery7

08장. 작고 강한 자바스크립트 jQuery

기본 CSS 셀렉터

www.kyobobook.co.kr


08 jquery8

08장. 작고 강한 자바스크립트 jQuery

자주 사용되는 셀렉터

www.kyobobook.co.kr


08 jquery9

08장. 작고 강한 자바스크립트 jQuery

자주 사용되는 셀렉터

www.kyobobook.co.kr


08 jquery10

08장. 작고 강한 자바스크립트 jQuery

DOM 탐색(Traversing) 메소드

www.kyobobook.co.kr


08 jquery11

08장. 작고 강한 자바스크립트 jQuery

DOM 탐색(Traversing) 메소드

www.kyobobook.co.kr


08 jquery12

08장. 작고 강한 자바스크립트 jQuery

DOM 탐색(Traversing) 메소드

www.kyobobook.co.kr


08 jquery13

08장. 작고 강한 자바스크립트 jQuery

DOM 탐색(Traversing) 메소드

www.kyobobook.co.kr


08 jquery14

08장. 작고 강한 자바스크립트 jQuery

DOM 탐색(Traversing) 메소드

www.kyobobook.co.kr


08 jquery15

08장. 작고 강한 자바스크립트 jQuery

DOM 탐색(Traversing) 메소드

www.kyobobook.co.kr


08 jquery16

08장. 작고 강한 자바스크립트 jQuery

  • 이벤트가 발생했을 때 여러분이 의도한 처리를 하기 위해서는 이벤트 핸들러에 처리 함수를 대응시킨 후에 이곳에 원하는 로직을 기술하여 프로그램을 완성

  • bind() 함수를 사용하여 해당 엘리먼트에 원하는 이벤트를 적용할 수 있고 unbind() 함수로 제거할 수 있다.

    • 첫 번째 매개변수에는 click, mousedown, focus, resize 등과 같은 적용 가능한 이벤트 타입

    • 두 번째 매개변수에는 이벤트가 발생했을시 실행되는 함수

www.kyobobook.co.kr


08 jquery17

08장. 작고 강한 자바스크립트 jQuery

그림이나 글씨에 투명도를 주어 선명하게 혹은 흐르게 나타낼 수도 있고, fade(현재 화면 위에서 서서히 나타남)나 flip(현재 화면이 뒤집히면서 사라지고 다음 뷰가 나타남)와 같은 일련의 이펙트 위한 메소드

www.kyobobook.co.kr


08 jquery18

08장. 작고 강한 자바스크립트 jQuery

  • display 속성이 none 상태인 엘리먼트에 애니메이션 효과를 주어 서서히 나타나도록 하기 위해서 show() 사용

    • 첫 번째 매개변수는 애니메이션을 지속시키는 시간을 설정합니다. fast는 200 ms(밀리 세컨드, 1/1000초), slow는 600 ms normal 혹은 fast, slow 이외의 문자열은 400 ms 동안 애니메이션이 진행됩니다. 0 이상의 숫자(ms 단위)를 줄 수도 있다.

    • 두 번째 매개변수는 애니메이션이 종료한 후에 실행할 사용자 정의 함수

www.kyobobook.co.kr


08 jquery19

08장. 작고 강한 자바스크립트 jQuery

  • hide()

    • 엘리먼트가 사라지는 애니메이션 효과

  • toggle()

    • 엘리먼트가사라졌다 나타나도록 하는 상태를 반복하도록 하는 애니메이션 효과

www.kyobobook.co.kr


08 jquery20

08장. 작고 강한 자바스크립트 jQuery

  • fadeTo()

    • 대상 엘리먼트를 지정한 투명도 값으로 변경

      • 첫 번째 매개변수는 효과의 속도로 fast, normal, slow 또는 0 이상의 숫자(밀리세컨드 단위)를 지정

      • 두 번째 매개변수는 셀렉터로 지정한 태그의 투명도를 설정합니다. 투명도는 0(사라짐)~1(나타남)의 수치로 지정하고 마지막 매개변수는 애니메이션이 종료한 후에 실행할 사용자 정의 함수

www.kyobobook.co.kr


08 jquery21

08장. 작고 강한 자바스크립트 jQuery

  • 플러그인

    • jQuery기능을 확장할 수 있는 방법으로 제공되는 메커니즘

    • jQuery코어에서 제공되지 않는 보편적이지 않은 기능이 필요할 경우에는 플러그인 형태로 제공

  • lightBox플러그인

    • 현재 페이지에 이미지를 오버레이하는데 사용 jQuery플러그인

www.kyobobook.co.kr


08 jquery22

08장. 작고 강한 자바스크립트 jQuery

  • 현재 페이지에 이미지를 오버레이하는데 사용 jQuery플러그인

www.kyobobook.co.kr


  • Login