과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part2. jquery / Ch13. 기본 2014년 1학기 Professor Seung-Hoon Choi
13.1 기본 jquery 란? 모든브라우저에서동작하는클라이언트자바스크립트라이브러리 2006년 John Resig이개발 기능 문서객체모델과관련된처리를쉽게구현 일관된이벤트연결을쉽게구현 시각적효과를쉽게구현 Ajax 애플리케이션을쉽게개발 가장많이방문하는웹사이트 10,000 개중 jquery 사용비율 67% (2013년 5월기준, by BuildWith.com) 22% (2014년 4월 9일기준, by BuildWith.com)
13.2 다운로드 jquery 사용방법 (1) 직접다운로드받아서저장후사용 (2) CDN 호스트이용 CDN: Content Delivery Network CDN 호스트로부터 jquery를요청하여얻는방식 사용예 : 코드 13-1 <script src=http://doce.jquery.com/jquery-1.10.2.js></script> 구글이나마이크로소프트사도 jquery CDN 호스트역할을제공함 jquery 를오프라인으로사용할경우에는직접다운로드받아서사용해야함
13.2 다운로드 jquery 다운로드 http://jquery.com 접속 Download jquery 클릭 Download the uncompressed, development jquery 1.11.0 클릭 본인의 workspace의 jquery 폴더에저장 jquery 종류 uncompressed 버전 : jquery.js ( 교재에서사용함, 260KB) minified 버전 : jquery.min.js ( 크기를 5분의 1로 zipping, 90KB)
13.2 다운로드 다운로드받은 jquery 사용 코드 13-2 <script src= jquery-1.10.2.js ></script> Visual Studio 제품군에서는보조기능제공함 예 : $. 을입력하면가능한메소드리스트와메소드프로토타입등을보여줌 이를위해서는 jquery-1.xx.x-vsdoc.js 파일이필요함 jquery-1.xx.x.js 파일과같은폴더에둘것 http://www.asp.net/ajaxlibrary/cdn.ashx 의화면아래쪽에서다운받을수있음
13.3 $(document).ready() jquery 를사용한모든웹페이지는다음코드로시작함 코드 13-4 $(document).ready(function () { }); 웹문서가준비되면매개변수로전달된콜백함수를실행하라. window.onload = function() { } 과비슷하지만, 여러개의콜백함수를등록할수있다. 코드 13-6 간단한형태 $(function () { });
13.3 $(document).ready() $ 의미 jquery 코드를보면다음문장이있다. jquery = function( ) { } window.jquery = window.$ = jquery; jquery 식별자를 $ 로대체한것임 $ 대신에 jquery 식별자를사용해도됨
13.4 기본선택자 jquery 메소드의가장기본형태 $( h1 ).css( color, red ); $ 선택자 메소드
13.4.1 전체선택자 전체선택자 HTML 페이지에있는모든문서객체를선택하는선택자 * 를사용함 코드 13-8 $( * ).css( color, red ); 모든문서객체를선택하여 스타일속성 color에 red 값을설정하라. css( ) 메소드 : 스타일을지정하는메소드
13.4.2 태그선택자 태그선택자 특정한태그를선택하는선택자 코드 13-9, 13-10 $( h1 ).css( color, orange ); 여러개의태그를동시에선택하려면 코드 13-11 $( h1, p ).css( color, orange );
13.4.3 아이디선택자 아이디선택자 태그의 id 속성값을이용하여문서객체를선택하는선택자 코드 13-12, 13-13 $( #target ).css( color, orange ); id 속성값이 target 인문서객체를선택함 코드 13-14 $( h1#target ).css( color, orange ); h1 태그중에서 id 속성값이 target 인문서객체를선택함 id 는웹페이지내에서고유해야함
13.4.4 클래스선택자 클래스선택자 태그의 class 속성값을이용하여문서객체를선택하는선택자 코드 13-15, 13-16 $(.item ).css( color, orange ); class 속성값이 item 인문서객체를선택함 $( h1.item ).css( color, orange ); 코드 13-17 h1 태그중에서 class 속성값이 item 인문서객체를선택함 $(.item.select ).css( color, orange ); class 속성값으로 item 와 select 모두를갖는문서객체를선택함 class 속성값이동일한여러태그가존재할수있으며 하나의태그는여러개의 class 속성값을가질수있다.
13.4.4 클래스선택자 class 속성 하나의웹페이지에서 class 속성값이동일한여러개의태그가존재할수있으며 하나의태그는여러개의 class 속성값을가질수있다.
13.5 자손선택자와후손선택자 문서객체모델은트리구조 코드 13-18 -> 그림 13-13 자손 태그바로아래있는자식 ( 들 ) 후손 태그아래있는모든문서객체
13.5.1 자손선택자 자손선택자 형태 : 요소A > 요소B 코드 13-19 $( body > * ).css( color, red ); body 태그의모든자식을선택함 요소검사로확인가능함
13.5.2 후손선택자 후손선택자 형태 : 요소A 요소B 코드 13-20 $( body * ).css( color, red ); body 태그의아래에있는모든후손을선택함 요소검사로확인가능함
13.6 속성선택자 속성선택자 속성존재여부또는속성의값을기준으로태그를선택하는선택자
13.6 속성선택자 표 13-1 요소 [ 속성 ]: 특정한속성이있는태그를선택 요소 [ 속성 = 값 ]: 특정한속성의값이특정값과같은태그를선택
13.6 속성선택자 표 13-1( 계속 ) 요소 [ 속성 = 값 ]: 속성안의값이특정값을단어로포함하는태그를선택 태그의속성값이 kurien-blog 일때이것을 kurien과 blog, 두단어로인식함 선택자가 img[name = blog ] 인경우, <img name= kurienblog > 인태그를선택함 요소 [ 속성 ~= 값 ]: 속성안의값이특정값을단어로포함하는태그를선택 태그의속성값이 kurien-blog 일때이것을 kurien-blog 한단어로인식함 선택자가 img[name = blog ] 인경우, <img name= kurienblog > 인태그는선택하지않음
13.6 속성선택자 표 13-1( 계속 ) 요소 [ 속성^= 값 ]: 속성안의값이특정값으로시작하는태그를선택 요소 [ 속성 $= 값 ]: 속성안의값이특정값으로끝나는태그를선택 예 : img[src$= gif ] => src의속성값이 gif로끝나는 img 태그를선택 요소 [ 속성 *= 값 ]: 속성안의값이특정값을포함하는태그를선택
13.6 속성선택자 코드 13-21, 13-22 $( input[type= text ] ).val( Hello jquery..! ); type 속성의값이 text인 input 태그를선택하여 value 속성의값으로 Hello jquery..! 을설정하라.
13.7 필터선택자 필터선택자 속성선택자보다편리하게문서객체를선택할수있는기능을제공함 : 기호를사용함
13.7.1 입력양식필터선택자 입력양식필터선택자 입력양식문서객체를간단하게선택할수있게해줌 표 13-2 input:button - type이 button인 input 태그를 ( 또는 button 태그 ) 를선택함 input:checkbox - type이 checkbox 인 input 태그를선택 input:file - type이 file인 input 태그를선택 input:image - type이 image인 input 태그를선택 input:password - type이 password인 input 태그를선택 input:radio - type이 radio인 input 태그를선택 input:reset - type이 reset인 input 태그를선택 input:submit - type이 submit인 input 태그를선택 input:text - type이 text인 input 태그를선택
13.7.1 입력양식필터선택자 입력양식필터선택자 표 13-3 요소 :checked - 체그되어있는입력양식을선택 요소 :disabled - 비활성화된입력양식을선택 요소 :enabled - 활성화된입력양식을선택 요소 :focus - 초점이맞추어져있는입력양식을선택 요소 :input - 모든입력양식 (input, textarea, select, button 태그 ) 을선택 요소 :selected - option 객체중선택된태그를선택
13.7.1 입력양식필터선택자 코드 13-24 settimeout( ) 함수를이용하여 5 초후에사용자가선택한항목의 value 를출력하도록한다. var value = $( select > option:selected ).val( ); select 태그의자손인 option 중에서선택된항목의 value 속성의값을 value 변수에할당해라. 실습 5초후에, 사용자가선택한텍스트박스에노란색배경색을적용하는웹페이지를작성하라. <input type= text> $( input:focus ).css( background, yellow )
13.7.2 위치필터선택자 위치필터선택자 위치와관련된필터선택자 표 13-4 요소 :odd - 홀수번째에위치한문서객체를선택 요소 :even - 짝수번째에위치한문서객체를선택 요소 :first - 첫번째에위치한문서객체를선택 요소 :last - 마지막에위치한문서객체를선택
13.7.2 위치필터선택자 코드 13-26 표의짝수번째행과홀수번째행의색을다르게함 $( tr:odd ).css( background, #F9F9F9 ); // 흰색 $( tr:even ).css( background, #9F9F9F ); // 회색 $('tr:first').css('background', '#000000').css('color', '#FFFFFF'); 행번호는, 0 부터시작함
13.7.3 함수필터선택자 함수필터선택자 ( 함수형태의필터선택자 ) 표 13-5 요소 :contains( 문자열 ) - 특정문자열을포함하는모든문서객체선택 요소 :eq(n) - n 번째위치하는문서객체선택 (0이첫번째요소 ) 요소 :gt(n) - n번째초과에위치하는모든문서객체선택 요소 :has( 태그 ) - 특정태그가있는모든문서객체를선택 예 : $( div:has(p) ) => <p> 태그를갖는모든 <div> 선택 요소 :lt(n) - n 번째미만에위치하는모든문서객체선택 요소 :not( 선택자 ) - 선택자와일치하지않는모든문서객체선택 예 : $( input:not(:empty)) => 비워있지않은모든입력객체선택 요소 :nth-child(3n+1) - 3n+1번째에위치하는모든문서객체를선택 (1, 4, 7, 번째 )
13.7.3 함수필터선택자 코드 13-27 표의행과열마다다른색상으로꾸미기 주의사항 표의첫행은 0부터시작됨 표의첫열은 1부터시작됨
13.8 배열관리 배열관리 jquery로배열을관리할때는 each( ) 메소드를사용함 두가지형태 1) $.each(object, function(index, item) { } ) 자바스크립트배열의각원소를접근하거나 객체의각속성을접근할때사용함 매개변수 object: 배열객체 function: 원소를처리하는함수 2) $(selector).each(function(index, item) { } ) selector로선택된모든문서객체의각각을접근할때사용함
13.8.1 자바스크립트배열관리 자바스크립트배열관리 형식 : $.each(object, function(index, item) { } ); object: 배열또는객체 index: 배열의인덱스또는객체의키를의미함 item: 인덱스나키에해당하는값 주의 : foreach( ) 메소드와매개변수의순서가다름 [ ].foreach( function( item, index ) { } ); 코드 13-28, 13-29, 13-30 $.each(array, function(index, item) { // item.link 접근 // item.name 접근 }
13.8.2 jquery 배열관리 jquery 배열관리 jquery 배열은, 선택자로여러개의문서객체를선택할때생성됨 형식 : $(selector).each(function(index, item) { } ) 선택된모든문서객체의각각에대해함수안의내용을실행함
13.8.2 jquery 배열관리 코드 13-31, 13-32 $( h1 ).addclass( high-light ); <h1> 태그를모두골라서 class 속성의값을 high-light 로지정하라. 코드 13-33, 13-34, 13-35 $( h1 ).each( function(index, item) ) { } ) <h1> 태그각각에대해서함수안의내용을실행하라. 코드 13-36 원소각각에대해실행할함수내부에서 $(item) 대신에 $(this) 를사용해도됨
13.9 객체확장 객체확장 두객체를합쳐서확장할때사용함 형식 : $.extend(object, addedobject1, addedobject2, ) object 객체에나머지객체의속성을추가하라 코드 13-40 $.extend( object, { } ) object 객체에뒤에오는객체를추가함
13.10 jquery 충돌방지 jquery 충돌방지 jquery 이외의자바스크립트프레임워크를함께사용할때충돌이발생할수있다. 예 : jquery와 Prototype 프레임에서, 식별자 $ 를다같이사용함 $.noconflict( ) 이메소드실행후에는, jquery의식별자 $ 를더이상사용할수없음 jquery 객체를다른변수에저장하면계속해서간단하게사용할수있다. 코드 13-42