제이쿼리jQuery

1

- 자바스크립트 라이브러리 문서

- 자바스크립트의 명령을 보다 간단하고 안전하게 사용할 수 있게 해줌.

- 제이쿼리명령을 사용하기 위해서는 html문서에 제이쿼리문서를 반드시

연결시켜야 한다.

- 현재 공식 사이트 jquery.com에서는 ver3만 배포 중

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"

></script>

제이쿼리란?

2

기본명령

3

셀렉터

- 제이쿼리 명령이 적용 될 대상.

- css에서 사용하는 모든 셀렉터를 그대로 사용할 수 있음.

- 제이쿼리 셀렉터의 기본형태 : $(“셀렉터”)

$(“#wrap")

$(“.gnb li")

$(“.list > div”)

$(“.user:nth-child(5)”)

기본 명령

- $(“셀렉터”).명령어( );

제이쿼리 기초문법

4

text( ) 명령, html( )명령

- 셀렉터의 글자 내용 / 태그를 컨트롤하는 명령

- $("셀렉터").text(“새로운 텍스트”);

$("셀렉터").html(“새로운 태그”);

셀렉터의 내용을 지정한 값으로 변경 함.

- $("셀렉터").text( );

$("셀렉터").html( );

셀렉터의 내용을 저장 함.

기본 명령

5

새로운 내용을 추가하는 명령

- 새로운 내용을 추가 할 위치에 따라 명령어가 달라짐.

- $(“셀렉터”). prepend(“새로운 텍스트”);

prepend()명령 : 셀렉터의 첫번째 자식태그의 위치에 내용을 추가함.

- $(“셀렉터”). append(“새로운 텍스트”);

append() 명령 : 셀렉터의 막내 자식태그의 위치에 내용을 추가함.

- $(“셀렉터”). before(“새로운 텍스트”);

before() 명령 : 셀렉터의 앞쪽에 내용을 추가함.

- $(“셀렉터”). after(“새로운 텍스트”);

after() 명령 : 셀렉터의 뒤쪽에 내용을 추가함.

기본 명령

6

내용을 특정 위치로 이동하는 명령

- 이동 할 위치에 따라 명령어가 달라짐.

- $(“셀렉터-내용”).prependTo(“셀렉터-이동 할 위치”);

prependTo()명령 : 셀렉터의 첫번째 자식태그의 위치로 내용이 이동

- $(“셀렉터-내용”).appendTo(“셀렉터-이동 할 위치”);

append() 명령 : 셀렉터의 막내 자식태그의 위치로 내용이 이동

- $(“셀렉터-내용”).insertBefore(“셀렉터-이동 할 위치”);

before() 명령 : 셀렉터의 앞쪽의 위치로 내용이 이동

- $(“셀렉터-내용”). insertAfter(“셀렉터-이동 할 위치”);

after() 명령 : 셀렉터의 뒤쪽의 위치로 내용이 이동

기본 명령

7

css( ) 명령

- 셀렉터의 스타일 속성값을 컨트롤 하는 명령.

- $("셀렉터"). css(“스타일속성이름”);

셀렉터의 스타일속성 값을 저장시킴.

- $("셀렉터"). css(“스타일속성이름”, ”값”);

$("셀렉터"). css({

스타일속성이름 : “값”,

스타일속성이름 : “값”,

});

셀렉터의 스타일속성 값을 새롭게 지정함.

기본 명령

8

attr( ) 명령

- 셀렉터의 태그 속성값을 컨트롤 하는 명령.

- $("셀렉터"). attr(“속성이름”);

셀렉터의 속성 값을 저장시킴.

- $("셀렉터"). attr(“속성이름”, ”값”);

$("셀렉터"). attr({

속성이름 : “값”,

속성이름 : “값”,

});

셀렉터의 속성 값을 새롭게 지정함.

기본 명령

9

클래스 속성값을 컨트롤 하는 명령

- $("셀렉터").addClass("클래스이름");

클래스를 추가하는 명령

- $("셀렉터").removeClass("클래스이름");

클래스를 삭제하는 명령

- $("셀렉터").toggleClass("클래스이름");

클래스를 추가/삭제가 교차 적용 되는 명령

기본 명령

10

index( )명령과 eq( )명령

- 자료의 인덱스 값을 활용하는 명령

- $("셀렉터").index( );

셀렉터의 순서값을 저장하는 명령

- $("셀렉터"). eq(인덱스값);

셀렉터로 선택된 대상들 중 특정 순번을 가진 대상만 선택하는 명령

size( )명령

- 자료의 개수를 저장하는 명령

$("셀렉터").size( );

기본 명령

11

공간 값을 저장하는 명령

- width( )와 height( ) 명령

셀렉터의 width와 height범위의 크기 값을 저장하는 명령

- innerWidth( )와 innerHeight( ) 명령

패딩을 포함 한 크기 값을 저장하는 명령 (테두리크기는 포함 안됨)

- outerWidth( )와 outerHeight( ) 명령

패딩, 테두리, 마진을 포함 한 크기 값을 저장하는 명령

기본 명령

12

태그 구조에 따라 대상을 찾아 선택하는 명령

- parent( )와 parents( ) 명령

parent( )는 부모태그를 찾아 선택하는 명령.

parents( )는 해당 태그를 감싸고 있는 상위 태그 중 원하는 대상을

찾아 선택하는 명령.

- children( ) 명령

자식 태그를 찾아 선택하는 명령

- find( ) 명령

해당 태그 안에 있는 태그 중 원하는 대상을 찾아 선택하는 명령.

기본 명령

13

- siblings( ) 명령

형제 태그 중 원하는 대상을 찾아 선택하는 명령.

기본 명령

14

offset() 명령

- 문서의 최초 위치를 기준으로 절대 좌표값을 저장하는 명령

기본 명령

- $(“셀렉터”).offset().top;

$(“셀렉터”).offset().left;

15

remove() 명령

- 해당 태그를 구조 상에서 완전히 삭제하는 명령

기본 명령

참고.

{display:none;}은 구조 상에 있지만 브라우저에서 없는 태그로 취급.

순서 선택자를 사용할 경우 {display:none;}처리 된 태그도 카운트 됨.

16

이벤트

17

이벤트

- 명령이 실행될 타이밍

- $("셀렉터").이벤트명령();

- 이벤트의 결과로 일어날 일을 이벤트명령과 함께 오는 ()안에 작성함.

이때 여러 줄의 명령이 적용되어야 하기 때문에 함수의 형태를 사용한다.

- $("셀렉터").이벤트명령(function(){

이벤트에 의해 일어날 일을 작성하는 영역

});

- 클릭을 예로 들어 설명하면,

$("클릭할 대상").click(function(){

$("클릭에 의해 상태가 변할 대상").명령어();

});

이벤트

18

자주 사용하는 이벤트 명령

이벤트

이벤트 명령 설명

click 클릭할 때

mouseover 마우스가 올라갔을 때

mouseout 마우스가 내려갔을 때

mouseenter 마우스가 영역에 들어갈 때

mouseleave 마우스가 영역에서 나올 때

scroll 스크롤이 발생할 때

resize 사이즈가 변경될 때

19

애니메이션

20

기본애니메이션명령

- 셀렉터의 display상태값을 block->none, none->block으로 처리하되,

명령어에 따라 애니메이션 동작이 달라짐.

애니메이션

보임 안보임 교차

show() hide() toggle()

slideDown() slideUp() slideToggle()

fadeIn() fadeOut() fadeToggle()

$(“셀렉터”).애니메이션명령(시간,easing,콜백함수);

- 시간 값은 1초 = 1000으로 표기함.

기본값 600 으로 설정되어 있음.

단, show()/hide()/toggle()의 기본값은 0

21

- easing은 구간 가속값으로 움직임의 효과가 다르게 보여짐.

"swing“(천천히 시작해서 점점 빠르게)과 "linear“(동일한 속도록) 중

선택할 수 있음. 기본값은 swing으로 설정되어 있음.

- 콜백함수는 완료함수라고도 함. 지정된 애니메이션 동작이 모두 끝난 후

일어날 명령을 작성하는 함수.

애니메이션

22

animate()명령

- 내가 원하는 움직임을 만들어주는 명령.

- 셀렉터의 스타일속성값을 변경시켜 움직임이 일어나도록 만들어줌.

- 이때 스타일속성값을 숫자로 표기할 수 있는 대상만 활용 가능함.

- $("셀렉터").animate({

스타일속성이름:"값",

스타일속성이름:"값"

},시간,easing,콜백함수);

애니메이션

23

stop()명령

- 움직임을 즉시 멈춤.

- 이벤트가 중복 처리되면 브라우저는 이벤트가 발생한 횟수만큼 동작을

만들어내려고 함. 애니메이션 명령이 실행 되기 전 stop()명령을 사용해

이전에 처리 된 동작을 즉시 멈추고 마지막 이벤트에 대한 동작만 실행

하도록 명령할 수 있음.

- $("셀렉터").stop().애니메이션명령();

delay()명령

- 움직임이 시작 될 시점을 지연 시킴.

- $("셀렉터").delay(시간).애니메이션명령();

애니메이션

24