jquery 김용만 http://cafe.naver.com/javaz 1. jquery 에대해 1) jquery 의특징 DOM 과관련된처리를쉽게구현 CSS 선택자를이용하여쉽고편리하게요소를선택 일괄된이벤트연결을쉽게구현 시각적효과를쉽게구현 Ajax 애플리케이션을쉽게개발 2) jquery 다운로드와 CDN 방식 - jquery 라이브러리파일다운로드 jquery 라이브러리파일을 http://www.jquery.com 에서다운로드받아 HTML 파일내에링크 <script type= text/javascript src= jquery.min.js > - CDN 방식으로라이브러리연결 CDN(Content Delivery Network) 은사용자에게간편하게콘텐츠를제공하는방식을의미. CDN 호스트를제공해 js 파일경로를링크해서 jquery 라이브러리를사용할수있는기능 <script type= text/javascript src= http://code.jquery.com/jquery-latest.js > 2 jquery 기본 1) jquery(document).ready() 문서의준비가완료되면매개변수로전달된함수를실행하라는의미
아래의표현도동일한기능수행 $(function(){ 2) jquery 기본선택자 (1) 전체선택자 HTML 페이지에있는모든문서객체를선택하는선택자 $( * ).css( color, red ); (2) 태그선택자 HTML 페이지있는문서객체를태그이름으로선택하는선택자 $( h1 ).css( color, orange ); (3) 아이디선택자 HTML 페이지안의특정 ID 속성을가지고있는문서객체를선택하는선택자
$( #target ).css( color, red ); (4) 클래스선택자 HTML 페이지안의특정 class 속성을가지고있는문ㅅ객체를선택하는선택자 $(.item ).css( color, red ); (5) 자식선택자 자식선택자는자식을선택하는선택자이며 부모 > 자식 의형태로사용 $( body > div ).css( color, red ); (6) 후손선택자 후손선택자는이름그대로후손을선택하는선택자. 요소 A 요소 B 의형태로사용하여요소 A 의후손으로범위를한정 $( body div ).css( color, red ); (7) 속성선택자
속성선택자는태그이름에속성을조합해서선택하는방식 선택자형태요소 [ 속성 ] 요소 [ 속성 = 값 ] 요소 [ 속성 ~= 값 ] 요소 [ 속성^= 값 ] 요소 [ 속성 $= 값 ] 요소 [ 속성 *= 값 ] 특정속성을가지고있는문서객체를선택속성안의값이특정값과같은문서객체를선택속성안의값이특정값을단어로써포함하는문서객체를선택속성안의값이특정값으로시작하는문서객체를선택속성안의값이특정값으로끝나는문서객체를선택속성안의값이특정값을포함하는문서객체를선택 (8) 입력양식필터선택자 선택자형태요소 :button 요소 :checkbox 요소 :file 요소 :image 요소 :password 요소 :radio 요소 :reset 요소 :submit 요소 :text input 태그중 type 속성이 button 인문서객체와 button 태그를선택 input 태그중 type 속성이 checkbox 인문서객체를선택 input 태그중 type 속성이 file 인문서객체를선택 input 태그중 type 속성이 image 인문서객체를선택 input 태그중 type 속성이 password 인문서객체를선택 input 태그중 type 속성이 radio 인문서객체를선택 input 태그중 type 속성이 reset 인문서객체를선택 input 태그중 type 속성이 submit 인문서객체를선택 input 태그중 type 속성이 text 인문서객체를선택 선택자형태
요소 :checked 요소 :disabled 요소 :enabled 요소 :focus 체크된입력양식을선택비활성화된입력양식을선택활성화된입력양식을선택초점이맞춰져있는입력양식을선택 요소 :input 모든입력양식을선택 (input,textarea,select,button 태그 ) 요소 :selected option 객체중선택된태그를선택 (9) 필터선택자 - 기본필터선택자 선택자형태요소 :odd 요소 :even 요소 :first 요소 :last 홀수번째에위치한문서객체를선택짝수번째에위치한문서객체를선택첫번째위치한문서객체를선택마지막에위치한문서객체를선택 - 함수필터선택자 선택자형태요소 :contains( 문자열 ) 요소 :eq(n) 요소 :gt(n) 요소 :has(h1) 특정문자열을포함하는문서객체를선택 n 번째에위치하는문서객체를선택 n 번째초과에위치하는문서객체를선택 h1 태그를가지고있는문서객체를선택
요소 :lt(n) 요소 :not( 선택자 ) n 번째미만에위치하는문서객체를선택 선택자와일치하지않는문서객체를선택 요소 :nth-child(3n+1) 3n+1 번째에위치하는문서객체를선택 (1,4,7,...) 3) jquery 를이용한배열관리 $.each(object,function(index,item){ $(selector).each(function(index,item){ 3. 문서객체조작 1 1) 문서객체의클래스속성추가 addclass() 문서객체의클래스속성을추가 2) 문서객체의클래스속성제거 removeclass() 문서객체의클래스속성을제거 3) 문서객체의속성검사 attr() 속성과관련된모든기능을수행
4) 문서객체의속성추가 1. $(selector).attr(name,value); 2. $(selector).attr(name,function(index,attr)(){ 3. $(selector).attr(object); 5) 문서객체의속성제거 removeattr(name) 문서객체의속성을제거 6) 문서객체의스타일검사 css() 스타일과관련된모든기능을수행 7) 문서객체의스타일추가 1. $(selector).css(name,value); 2. $(selector).css(name,function(index,attr)(){ 3. $(selector).css(object); 8) 문서객체의내부검사 html() text() 문서객체내부의글자와관련된모든기능을수행 (HTML 태그인식 ) 문서객체내부의글자와관련된모든기능을수행 9) 문서객체의내부추가
1. $(selector).html(value); $(selector).text(value); 2. $(selector).html(function(index, html){ $(selector).text(function(index, text){ 10) 문서객체의제거 remove() empty() 특정문서객체를제거 특정문서객체의후손을모두제거 4. 문서객체조작 2 1) 문서객체의생성 $() 문서객체를생성 2) 문서객체의삽입 jquery 의문서객체삽입메서드 1 $(A).appendTo(B) $(A).prependTo(B) $(A).insertAfter(B) $(A).insertBefore(B) A 를 B 의기존자식의뒤에추가 A 를 B 의기존자식의앞에추가 A 를 B 의뒤에추가 A 를 B 의앞에추가 jquery 의문서객체삽입메서드 2
$(A).append(B) $(A).prepend(B) $(A).after(B) $(A).before(B) B 를 A 의기존자식의뒤에추가 B 를 A 의기존자식의앞에추가 B 를 A 의뒤에추가 B 를 A 의앞에추가 3) 문서객체의이동 기존에존재하는문서객체를선택하고문서객체삽입메서드를사용하면, 문서객체를쉽게 다른곳으로이동실수있음 $( img ).first().appendto( body ); 4) 문서객체의복제 메서드 clone() 문서객체를복제 5. 이벤트 1) 이벤트연결 bind() live() one() 현재존재하는문서객체에만이벤트를연결현재또는미래에존재하는문서객체에이벤트연결이벤트한번만연결
2) 이벤트연결제거 unbind() die() bind() 메서드를사용해연결한이벤트를제거 live() 메서드를사용해연결한이벤트를제거 3) 이벤트강제발생 trigger() 이벤트를강제로발생시킴 4) 기본이벤트와이벤트전달 preventdefault() stoppropagation() 기본이벤트제거 이벤트전달제거 5) 이벤트통합메서드 on() off() 이벤트연결 이벤트제거 6) 마우스이벤트 이벤트이름
click dbclick mousedown mouseup mouseenter mouseleave mousemove mouseout mouseover 마우스를클릭할때발생마우스를더블클릭할때발생마우스버튼을누를때발생마우스버튼을뗄때발생마우스가요소의경계외부에서내부로이동할때발생마우스가요소의경계내부에서외부로이동할때발생마우스를움직일때발생마우스가요소를벗어날때발생마우스를요소안에들어올때발생 7) 키보드이벤트 이벤트이름 keydown keypress keyup 키보드가눌러질때발생글자가입력될때발생 * 한글로사용할수없음키보드가떼어질때발생 8) 윈도우이벤트 이벤트 ready load unload 문서객체가준비를완료윈도우 ( 문서객체 ) 를불러들일때발생윈도우 ( 문서객체 ) 를닫을때발생
resize scroll error 윈도우의크기를변화시킬때발생 윈도우를스크롤할때발생 에러가있을때발생 9) 입력양식이벤트 이벤트이름 change focus focusin focusout blur select submit reset 입력양식의내용을변경할때발생입력양식에초점을맞추면발생입력양식에초점이맞춰지기바로전에발생입력양식에초점이사라지기바로전에발생입력양식에초점이사라지면발생입력양식을선택할때발생 (input[type=text] 태그와 texarea 태그제외 ) submit 버튼을누르면발생 reset 버튼을누르면발생 6. Ajax 1) Ajax 개요 AJAX(AJAX = Asynchronous JavaScript and XML) 비동기적으로서버의데이터를호출하는 방식을의미한다. Ajax 를사용하면페이지를전환하지않고서버에서데이터를받아와 사용자에게보여줄수있다. 2) jquery ajax 메서드
$.ajax(options); $.ajax(url,options); ajax 메서드의옵션 옵션속성이름 자료형 async 동기, 비동기를지정 Boolean complete(jqxhr,textstatus) Ajax 완료이벤트핸들러를지정 Function data 요청매개변수를지정 Object,String error(jqxhr,textstatus,errort hrown) Ajax 실패이벤트핸들러를지정 Function jsonp JSONP 매개변수이름을지정 String jsonpcallback JSONP 콜백함수이름을지정 String,Functio n success(data,textstatus,jqxh R) Ajax 성공이벤트핸들러를지정 Function,Arra y timeout 만료시간을지정 Number type GET 또는 POST 를지정 String url 대상 URL 을지정 String 3) jquery Ajax 부가메서드 $.get() $.post() $.getjson() $.getscript() get 방식으로 Ajax 를수행 post 방식으로 Ajax 를수행 get 방식으로 Ajax 를수행해 JSON 데이터를가져옴 get 방식으로 Ajax 를수행해 Script 데이터를가져옴
$(selector).load() Ajax 를수행한후에선택자로선택한문서객체안에응답받을 문자열을넣음 4) jquery Ajax 보조메서드 serialize() serializearray() $.param() 입력양식의내용을요청매개변수문자열로만듬입력양식의내용을객체로만듬객체의내용을요청매개변수문자열로만듬