제이쿼리 (JQuery) - 제이쿼리는자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리이다. - 따라서, 제이쿼리를사용하기위해서는자바스크립트라이브러리를사용해야한다. - 제이쿼리사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) - 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호를말함. - 사용예 ) <script type= text/javascript > $(document).ready( function(){ $( div ).html( 안녕하세요? 제이쿼리 ); ); </script> - 자바스크립트와제이쿼리의비교 <div> 자바스크립트인경우 : document.getelementsbytagname( div )[0] 제이쿼리인경우 : $( div ) <div id= div1 > 자바스크립트인경우 : document.getelementbyid( div1 ) 제이쿼리인경우 : $( #div1 ) <div class= style1 > 자바스크립트인경우 : document.getelementsbyclassname( style1 )[0] 제이쿼리인경우 : $(.style1 ) <div name= name1 > 자바스크립트인경우 : document.getelementsbyname( name1 )[0] 제이쿼리인경우 : $( div[name=name1] ) <input type= text name= input1 value= 값입니다. /> 자바스크립트인경우 : window.onload = function(){ var a = document.getelementsbytagname( input )[0].getAttribute( value ); var b = document.getelementsbytagname( input )[0].getAttribute( type ); document.getelementsbytagname( input )[0].setAttribute( value, 변경한값입니다. ); 제이쿼리인경우 : $(document).read(function(){ var a = $( input ).attr( value ); var b = $( input ).attr( type ); $( input ).attr( value, 변경한값입니다. ); );
- 이벤트의처리 <input type= button id= button1 value= 확인 /> <input type= button id= button2 value= 확인 /> 자바스크립트인경우 : document.getelementbyid( button1 ).onclick=function(){... 제이쿼리인경우 : $( #button1 ).click(function(){... ) 혹은 $( #button1 ).bind( click, function(){... ) 혹은 $( #button1 ).on( click, function(){... ) - 선택버튼이나, 체크박스, 라디오버튼의이벤트처리 <select id= select1 > <option value= 1 > 선택하나 </option> <option value= 2 > 선택둘 </option> </select> <select id= select2 > <option value= 1 > 선택A</option> <option value= 2 > 선택B</option> </select> <div id= div1 > 자바스크립트인경우 : window.onload = function(){ document.getelementbyid( select1 ).onchange = function(){ document.getelementbyid( div1 ).innerhtml = document.getelementbyid( select1 ).value; 제이쿼리인경우 : $(document).ready(function(){ $( #select2 ).change(function() { $( #div1 ).text($( #select2 ).val()); ); ); - DOM(Document Object Model) HTML HEAD BODY META TITLE H1 P
- 자식노드로등록및삭제 <div id= div1 >div1<br/> <input type= button id= btnadd value= 추가 /> <input type= button id= btndelete value= 삭제 /> <input type= button id= btnupdate value= 변경 /> 자바스크립트인경우 : window.onload = function(){ var div1 = document.getelementbyid( div1 ); var divchild = document.createelement( div ); divchild.innerhtml = child ; document.getelementbyid( btnadd ).onclick = function(){ div1.appendchild(divchild); document.getelementbyid( btndelete ).onclick = function(){ div1.removechild(div1.childnodes[1]); document.getelementbyid( btnupdate ).onclick = function(){ div1.childnodes[1].innerhtml = Change ; 제이쿼리인경우 : var child = $( <div> ).text( Child ); $(document).read(function(){ $( #btnadd ).click(function(){ $( #div1 ).append(child); ); $( #btndelete ).click(function(){ $( #div1 ).children().remove(); ); $( #btnupdate ).click(function(){ $( #div1 ).children().text( Change ); ); ); - 참고로제이쿼리에서, 엘리먼트앞이나뒤에추가하고싶은경우, $( #div1 ).before(child); $( #div1 ).after(child); - 자바스크립트에서객체생성 1 var car1 = {; car1.name = 현대차 ; car1.weight = 1.5t ; car1.speed = 300km ;
- 자바스크립트에서객체생성 2 function Car(){ var name; var weight; var speed; var car1 = new Car(); car1.name = 현대차 ; car1.weight = 1.5t ; car1.speed = 300km ; var car2 = new Car(); car2.name = 기아차 ; car2.weight = 1.0t ; car2.speed = 250km ; - 자바스크립트에서객체생성 3 function Car(name, weight, speed){ var name; var weight; var speed; this.name = name; this.weight = weight; this.speed = speed; var car3 = new Car( 대우차, 2.0t, 350km ); - 자바스크립트에서객체생성 4 function Car(){ var name; var weight; var speed; this.setspeed = function(speed){ this.speed = speed; this.getspeed = function(){ return this.speed; var car4 = new Car(); car1.name = 동아차 ; car1.weight = 1.1t ; car1.setspeed( 450km ); alert(car1.getspeed()); 제이쿼리모바일 - 모바일환경에맞도록작성된제이쿼리 - 페이지 단위로화면을구분하며, 하나의페이지는, 헤더, 컨텐트, 풋터 로구성된다.
<div data-role= page > <div data-role= header > <h1> 안녕하세요?</h1> 내용입니다. <div data-role= footer > <h3> 꼬리말입니다.</h3> - 위의경우, 내용이적기때문에꼬리말의위치가화면하단에위치하지않고화면중간에위치한다. - 꼬리말의위치를항상화면하단에위치시키는방법은다음과같다. <div data-role= footer data-position= fixed > - 내용구성 <h3 class= ui-bar ui-bar-a > 소제목1</h3> <div class= ui-body > <h3 class= ui-bar ui-bar-b > 소제목2</h3> <div class= ui-body > <h3 class= ui-bar ui-bar-a ui-corner-all > 소제목3</h3> <div class= ui-body > <div class= ui-body ui-body-a ui-corner-all > <h3> 제목과내용 </h3> <br/> <div class= ui-corner-all custom-corners > <div class= ui-bar ui-bar-a > <h3> 제목입니다.</h3> <div class= ui-body ui-body-a >
- 버튼 - 기본적으로다음의세가지형태의버튼이있다. <a data-role= button > 첫번째버튼입니다.</a> <button> 두번째버튼입니다.</button> <input type= button value= 세번째버튼입니다. /> - 다양한형태의버튼들 <button data-role= button data-enhanced= true > 버튼 </button> <input type= button data-enhanced= true value= 버튼 /> <button data-role= button data-corners= false > 버튼 </button> <input type= button data-corners= false value= 버튼 /> <button data-role= button data-icon= home data-iconpos= top > 아이콘버튼 </button> <input type= button data-icon= home data-iconpos= bottom value= 아이콘버튼 /> <button data-role= button data-icon= home data-iconpos= left > 아이콘버튼 </button> <input type= button data-icon= home data-iconpos= right value= 아이콘버튼 /> - 제목이없는버튼 <div class= ui-input-btn ui-btn ui-icon-home ui-btn-icon-notext > - 그림자버튼 <button data-role= button data-icon= home data-iconpos= left data-iconshadow= true > 버튼 </button> <input type= button data-icon= home data-iconshadow= true value= 버튼 /> <div data-icon= button button-shadow= false > 버튼 <input type= button data-shadow= true value= 버튼 /> - 제목의길이와같은길이를갖는버튼 <div data-role= button data-inline= true > 버튼제목 <input type= button data-inline= true value= 버튼제목 /> - 테마를갖는버튼 <div data-role= button data-theme= a > 테마 A <input type= button data-theme= b value= 테마 B /> - 작은제목의버튼 <div data-role= button data-mini= true > 작은제목 <input type= button data-mini= true value= 작은제목 /> - 비활성버튼 <div data-role= button disabled> 비활성화버튼 <input type= button disabled value= 비활성화버튼 />
- 버튼이벤트처리 - 이벤트의처리는별도의자바스크립트파일을생성하고이곳에작성한다. $( # 버튼의이름 ).click(function() { 처리할내용 ); <input type= text id= txtinput value= 안녕하세요 /> <input type= button id= btnsend value= 데이터 /> <div id= divoutput > var init = function() { $( #btnsend ).click(function(){ $( #divoutput ).text( #txtinput ).val(); ); ; $(document).bind( mobileinit, init); 제이쿼리모바일이초기화된경우 init 메서드호출 $(document).bind( pageinit, init); 패이지가초기화된경우 init 메서드호출 $(document).ready(init); 모든초기화가완료된경우 init 메서드호출 - 버튼속성의정리 속성이름 설명 data-corners 버튼의모서리를둥글게할것인지설정 data-icon 버튼의아이콘설정 data-iconpos 버튼의아이콘위치설정 data-iconshadow 버튼의아이콘그림자설정 data-mini 작은버튼을사용할것인지설정 data-inline 버튼의길이을제목에맞출것인지설정 data-shadow 버튼의그림자설정 data-theme 버튼의테마설정 - 화면의배치관리 - 제이쿼리모바일에서그리드레이아웃을제공해서, 화면의배치를쉽게할수있는기능을제공한다. 종류의이름 ui-grid-a ui-grid-b ui-grid-c ui-grid-d 설명 2개의열을가진다. 열의클래스이름은 ui-block-a, ui-block-b 3개의열을가진다. 열의클래스이름은 ui-block-a, ui-block-b, ui-block-c 4개의열. ui-block-a, ui-block-b, ui-block-c, ui-block-d 5개의열. ui-block-a, ui-block-b, ui-block-c, ui-block-d, ui-block-e <div class= ui-grid-a > <div class= ui-block-a style= background-color:red > 첫번째열 <div class= ui-block-b style= background-color:blue > 두번째열 <div>
- 행을여러개추가할수있다. <div class= ui-grid-b > <div class= ui-block-a style= background-color:red > 첫번째열 <div class= ui-block-b style= background-color:blue > <input type= button value= 눌르세요 /> <div> <div class= ui-block-c style= background-color:orange > 세번째열 <div class= ui-grid-a > <div class= ui-block-a style= background-color:red > 첫번째열 <div class= ui-block-b style= background-color:blue > 두번째열 <div> - 버튼에다양한아이콘을넣을수있다. <input type= button data-inline= true data-icon= action value= 시작합니다. /> - 아이콘의이름들 http://demos.jquerymobile.com/1.2.1/docs/buttons/buttons-icons.html - 데이터입력폼 <input type= text id= txtinput1 /> <input type= search id= txtsearch /> <input type= number id= txtnumber /> <input type= date id= txtdate /> <input type= month id= txtmonth /> <input type= week id= txtweek /> <input type= time id= txttime /> - 데이터삭제마크 (x) 표시 <input type= text id= txtinputclear data-clear-btn= true /> - 특정문자열을미리출력할수있다. <input type= text id= txtinputplaceholder placeholder= 이름을입력하세요, /> - 사용예 <label for= txtinput1 > 이름을입력하세요 </label><input type= txt id= txtinput1 /> <label for= txtnumber > 숫자를입력하세요 </label><input type= number id= txtnumber /> - 제목과데이터입력폼을한줄로출력한다. <div class= ui-field-contain > <label for= txtinputfieldcontain > 주소를입력하세요.</label> <input type= text id= txtinputfieldcontain />
- 체크박스 <input type= checkbox id= chkchoice1 /><label for= chkchoice1 >1번항목 </label> <input type= checkbox id= chkchoice2 /><label for= chkchoice2 >2번항목 </label> <input type= checkbox id= chkchoice3 /><label for= chkchoice3 >3번항목 </label> <div id= divresult > var printresult = function(){ $( #divresult ).text( 1번항목선택 + $(#chkchoice1 ).is(.checked ) +, + 2번항목선택 + $(#chkchoice2 ).is(.checked ) +, + 3번항목선택 + $(#chkchoice3 ).is(.checked )); ; var init = function() { $( #chkchoice1 ).change(function(){ printresult(); ); $( #chkchoice2 ).change(function(){ printresult(); ); $( #chkchoice3 ).change(function(){ printresult(); ); ; $(document).bind( pageinit, init);