제이쿼리 () 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 CSS와마찬가지로, 문서에존재하는여러엘리먼트를접근할수있다. 엘리먼트접근방법 $( 엘리먼트 ) : 일반적인접근방법 $(. 엘리먼트 ) : 엘리먼트의이름이 class로설정된경우 $( # 엘리먼트 ) : 엘리먼트의이름이 id로설정된경우 사용예 <script type= text/javascript > $(document).ready( function(){ $( div ).html( 안녕하세요? 제이쿼리 $( button ).click(function(){ $( h1 ).hide( slow $( h2 ).show( fast $( img ).slideup( </script> DOM(Document Object Model) 자바스크립트는 DOM 의표현을바꾼다. HEAD BODY META TITLE H1 P 1
선택자사용 $("h1").hide( 요소이름 메서드 선택자사용예 $("button").click( function(){ button 요소를클릭하면함수를실행 $("p").hide( p 요소를숨긴다 $("#mystyle").css( {"color":"red" mystyle 요소에 css 를적용 ( 색상을파란색으로설정 ) 와 의비교 <div></div> document.getelementsbytagname( div )[0] $( div ) <div id= div1 ></div> document.getelementbyid( div ) $( div ) <div class= style1 ></div> document.getelementsbyclassname( style1 )[0] $(.style1 ) <div name= name1 ></div> document.getelementsbyname( name1 )[0] $( div[name=name1] ) <input type= text name= input1 value= 값입니다. /> var a = document.getelementsbytagname( input )[0].getAttribute( value 2
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 ></div> document.getelementbyid( select1 ).onchange = function(){ document.getelementbyid( div1 ).inner = document.getelementbyid( select1 ).value; $(document).ready(function(){ $( #select2 ).change(function() { $( #div1 ).text($( #select2 ).val() 3
자식노드로등록및삭제 <div id= div1 >div1</div><br/> <input type= button id= btnadd value= 추가 /> <input type= button id= btndelete value= 삭제 /> <input type= button id= btnupdate value= 변경 /> var div1 = document.getelementbyid( div1 var divchild = document.createelement( div divchild.inner = 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].inner = Change ; var child = $( <div></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(){ 4
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){ this.name = name; this.weight = weight; this.speed = speed; var car3 = new Car( 대우차, 2.0t, 350km - 자바스크립트에서객체생성 4 function Car(){ 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() 5