10 장 jquery 라이브러리
1. jquery 라이브러리설정 2. 문서객체선택 3. 문서객체조작 4. 이벤트 5. 효과
HTML 페이지에 jquery 라이브러리를추가한다. jquery 라이브러리를사용해문서객체를조작할수있다. jquery 라이브러리를사용해문서객체에효과를부여한다. jquery 플러그인을활용한다.
기본예제 10-1 jquery 라이브러리설정하기 1. jquery 사이트접속하기 ( 라이브러리설정하는두가지방법 ) 파일을다운받아외부자바스크립트파일로추가 그림 10-1 jquery 사이트 (http://jquery.com) CDN 호스트를사용해연결 그림 10-2 jquery CDN 호스트 CDN: 파일을여러서버에분산시키고사용자가접속하는지역과가장가까운곳의서버에서파일을전송하는기술
기본예제 10-1 jquery 라이브러리설정하기 2. jquery 사용하도록기본설정하기 CDN 을사용하여 [ 코드 10-1] 과같이 HTML 페이지구성 CDN은 jquery, 구글, 마이크로소프트등에서도제공함 CDN 사용시라이브러리를외부자바스크립트로추가할필요없음
2 문서객체선택 그림 10-3 jquery 라이브러리메소드의기본형식 식별자로특수문자 $ 와 _ 사용가능 jquery() 는 jquery 라이브러리의기본함수로많이사용함 쉽게사용할수있도록다음과같은코드를사용해 변수를대치함 ( 라이브러리파일에있는내용 )
기본예제 10-2 문서객체선택하기 [ 코드 10-2] 와같이작성 jquery 라이브러리를사용하여쉽게문서객체선택가능 queryselector() 메소드와달리문서객체여러개를한번에선택가능 document.queryselectorall() 메소드와달리반복문이필요없음
3.1 속성조작 속성조작 attr() 메소드를사용 매개변수를넣는방법에따라속성을지정할수도있고추출할수도있음 표 10-1 문서객체의속성조작메소드 메소드이름 attr() 설명 문서객체의속성조작 속성추출 attr() 메소드에매개변수를하나만입력 해당속성추출 여러개의문서객체를선택 첫번째문서객체의속성을추출
기본예제 10-3 문서객체속성추출하기 [ 코드 10-3] 과같이작성 script 태그가두개있으므로먼저등장하는 script 태그의속성을추출
3.1 속성조작 속성을지정하는방법 1. 첫번째매개변수에속성의이름을입력하고두번째매개변수에속성값을입력하는방법 2. attr() 메소드의매개변수에객체를넣어속성을조작하는방법
3.1 속성조작 속성을지정하는방법 3. 첫번째매개변수에속성의이름을입력하고두번째매개변수에함수를입력하는방법
기본예제 10-4 문서객체속성조작하기 1. 속성값을입력해속성지정하기 jquery 라이브러리를사용하면모든문서객체에한번에적용가능 [ 코드 10-4] 와같이작성 2. 객체를입력해속성지정하기 [ 코드 10-5] 와같이작성 3. 함수를입력해속성지정하기 [ 코드 10-6] 과같이작성
3.2 스타일조작 NOTE_ 메소드체이닝 (Method Chaining) jquery 라이브러리에서문서객체를조작하는메소드는호출이후에자기자신을다시반환함. 따라서메소드를연속해서사용가능. 이렇게메소드를사용하는것을메소드체이닝이라고부름 스타일조작 css () 메소드사용 표 10-2 문서객체스타일조작메소드 메소드이름 css() 설명 문서객체의스타일속성조작 하이픈 (-) 이들어가는스타일속성입력방법 ❶ $('body').css('backgroundcolor'); ❷ $('body').css('background-color');
기본예제 10-5 문서객체스타일조작하기 1. 속성값을이용해속성지정하기 모든.box 태그에스타일이적용 [ 코드 10-8] 과같이작성 2. 객체를입력해속성지정하기 [ 코드 10-9] 와같이작성 3. 함수를입력해속성지정하기 [ 코드 10-10] 과같이작성
3.3 글자조작 innerhtml 과 textcontent 속성처럼태그적용여부에따라두가지메소드중목적에맞는메소드사용 표 10-3 문서객체내부글자조작메소드 메소드이름 html() text() 설명 문서객체내부의 HTML 태그조작 문서객체내부의글자조작
기본예제 10-6 문서객체글자변경하기 1. text() 메소드로내부글자변경하기 [ 코드 10-11] 과같이작성 text() 메소드를사용하면일반글자처럼출력 html() 메소드를사용하면글자에태그가적용 2. html() 메소드로내부글자변경하기 [ 코드 10-12] 와같이작성 text() 메소드를사용하면모든문서객체의글자를추출 html() 메소드를사용하면첫번째에위치한문서객체의글자를추출
3.4 클래스조작 문서객체에여러개의 class 속성값입력 띄어쓰기로구분 <p class="bold big italic">lorem ipsum dolor amet</p> attr() 메소드를사용해클래스추가및생성하기번거로움 클래스조작메소드사용 표 10-4 클래스조작메소드 메소드이름 addclass() removeclass() toggleclass() 설명클래스추가클래스제거클래스전환
기본예제 10-7 클래스조작하기 [ 코드 10-13] 과같이작성 hover() 메소드사용 첫번째매개변수 : 마우스커서를올렸을때실행할것을입력 두번째매개변수 : 마우스커서를내렸을때실행할것을입력 (a) 마우스커서올리기전 (b) 마우스커서올린후
4.1 간단한이벤트연결 간단한이벤트연결 지금까지사용한 ready() 이벤트처럼바로이용가능 표 10-7 간단한이벤트연결메소드 blur focus focusin onfocusout onload resize scroll unload onclick ondbclick mousedown mouseup onmousemove onmouseover onmouseout mouseenter mouseleave onchange onselect onsubmit keydown keypress onkeyup onerror 복합이벤트연결 표 10-6 복합이벤트연결메소드 메소드이름 hover() 설명 mouseenter 이벤트와 mouseleave 이벤트동시연결
기본예제 10-8 click 이벤트연결하기 [ 코드 10-14] 와같이작성 기본예제 10-9 hover() 복합이벤트연결메소드사용하기 [ 코드 10-15] 와같이작성 hover() 메소드사용 마우스를올리거나내릴때실행할것들을각각의매개변수에입력
4.2 이벤트연결기본 표 10-7 이벤트연결메소드 메소드이름 on() off() 설명 이벤트연결 이벤트제거 새로나왔지만아직업데이트를못한이벤트는앞에서다룬간단한이벤트연결메소드를쓸수없음. 이런이벤트는반드시 on() 메소드를사용하여연결 on() 메소드사용방법 ❶ $(selector).on(eventname, eventhandler); ❷ $(selector).on({ eventname_0: eventhandler_0, eventname_1: eventhandler_1, eventname_2: eventhandler_2 });
기본예제 10-10 일반이벤트연결하기 1. 첫번째방법으로이벤트연결하기 [ 코드 10-16] 과같이작성 메소드체이닝사용해여러개의이벤트적용 2. 두번째방법으로이벤트연결하기 [ 코드 10-17] 과같이작성 객체를사용해이벤트연결
4.3 이벤트객체와기본이벤트제거 jquery 라이브러리이용시모든웹브라우저에같은방법으로이벤트객체사용가능 이벤트리스너의매개변수를사용해이벤트객체전달 이벤트객체가어떤속성을가지는지 jquery 홈페이지에서확인가능 그중기본이벤트제거메소드를살펴보면, 표 10-8 기본이벤트제거메소드 메소드이름 event.preventdefault() 설명 기본이벤트제거
기본예제 10-11 기본이벤트제거하기 [ 코드 10-18] 과같이작성 a 태그로생성한링크를클릭해도페이지로이동하지않음. NOTE_return false jquery 라이브러리에서 return false 를사용하면기본이벤트와이벤트전달이함께제거됨
5.1 효과메소드소개 표 10-9 jquery 라이브러리의간단한효과메소드 메소드이름 show( 속도 ) hide( 속도 ) toggle( 속도 ) slidedown( 속도 ) slideup( 속도 ) slidetoggle( 속도 ) fadein( 속도 ) fadeout( 속도 ) fadetoggle( 속도 ) 설명문서객체를크게하며보여줌문서객체를작게하며사라지게함 show() 메소드와 hide() 메소드를번갈아실행문서객체를슬라이드효과와함께보여줌문서객체를슬라이드효과와함께사라지게함 slidedown() 메소드와 slideup() 메소드를번갈아실행문서객체를선명하게하며보여줌문서객체를흐리게하며사라지게함 fadein() 메소드와 fadeout() 메소드를번갈아실행
5.1 효과메소드소개 모든간단한효과메소드에는속도를매개변수로입력가능 입력값이없으면기본값인 500 밀리초가적용됨 표 10-10 속도문자열 속도문자열 slow normal fast 속도 600밀리초 500밀리초 400밀리초
기본예제 10-12 태그가사라지고나타나는효과구하기 [ 코드 10-20] 과같이작성 fadetoggle() 메소드사용 버튼을클릭하면내용이서서히사라짐. 그후버튼을다시클릭하면내용이나타남
5.2 애니메이션기본 표 10-11 jquery 라이브러리의사용자지정효과메소드 메소드이름 animate() 설명 사용자지정효과생성 animate() 메소드사용형태 ❶ $(selector).animate( 속성객체 ); ❷ $(selector).animate( 속성객체, 시간 ); ❸ $(selector).animate( 속성객체, 시간, 콜백함수 ); animate() 메소드의속성개체에입력할수있는값 opacity bottom padding top left right height width margin
기본예제 10-13 애니메이션효과주기 [ 코드 10-21] 과같이작성 animate() 메소드를사용해 div 태그의 width 속성과 height 속성변경 left 속성과 top 속성과같은위치속성을사용하려면 position 속성을 absolute 또는 relative 로지정 NOTE_ 메소드체이닝사용한애니메이션실행 animate() 메소드는메소드체이닝을사용하면애니메이션이종료된후에도새로운애니메이션을연속해서실행하게만들수있음 NOTE_ 상대적증가 animate() 메소드에 += 숫자 형태의문자열을입력하면현재속성에서위치또는크기를상대적으로변환
5.3 애니메이션정지 애니메이션예약 animate() 메소드또는 delay() 메소드사용 예약된애니메이션은차례대로실행됨 그림 10-6 애니메이션큐
5.3 애니메이션정지 표 10-12 애니메이션정지메소드 메소드이름 delay() stop() 설명 애니메이션을특정한시간만큼정지 애니메이션을완전히정지 delay() 메소드 animate() 메소드사이에입력 매개변수로숫자입력 stop() 메소드 매개변수로불리언입력 매개변수 clearqueue: 종료할애니메이션지정 false( 기본값 ): 현재실행중인애니메이션멈춤 true: 예약된모든애니메이션제거 매개변수 gotoend: 종료상태지정 매개변수사용시 animate() 메소드에서지정한최종수치로변경해정지
기본예제 10-14 애니메이션효과정지시키기 [ 코드 10-24] 와같이작성 NOTE_Edge Animate Edge Animate 를사용하여손쉽게웹애니메이션을개발. jquery 라이브러리의 animate() 메소드와 CSS3 애니메이션을혼합하여만듦