JQuery 기본적인 사용방법.

dom 선택

css selector와 같은 형식으로 dom을 선택할 수 있다. selector를 사용하기 위해서 jQuery 혹은 $를 사용한다.

0. jQuery("#id")  
1. $(".class")  
2. $("tag.class")  

1. jQuery("#id")
2. $(".class")
3. $("tag.class")

return되는 것은 jQuery 객체이다.

 

event handling

가장 맘에 드는 event handling이다. 다음과 같이 선택된 DOM에 원하는 event 함수들을 달아놓으면 된다.

0. $(document).ready( function() {  
1.   $("#project_submit").click(function(){    
2.     alert("submit the form");  
3.     return true;  
4.   });  
5. });  

1. $(document).ready( function() {
2.   $("#project_submit").click(function(){  
       alert("submit the form");
       return true;
     });
3. });

$(document).ready 는 브라우져가 모든 js 들을 다 download 받은 후 실행될 것을 보장한다. (window.onload와 같다.)

$("#project_submit").click 은 project_submit이란 id를 가진 dom에 click 이벤트가 발생하면 실행된다.

더 자세한 event에 대해서는 http://docs.jquery.com/Events 를 참조한다.

Effect

간단한 effect들 역시 손쉽게 사용할 수 있다.

0. $("#message_box").fadeOut();  

1. $("#message_box").fadeOut();

더 자세한 효과들에 대해서는 http://docs.jquery.com/Effects 를 참조.

 

each, map, unique

배열이 있고 배열을 iteration 하고 싶은 경우 each를 사용할 수 있다.

0. members = ["juddy", "james"];  
1. $.each(members, function() {  
2.   project.members.push(this));  
3.   
4. });  

1. members = ["juddy", "james"];
2. $.each(members, function() {
     project.members.push(this));
   });

function 안의 this는 각 member를 가르킨다.

selector를 이용했다면 다음과 같이 더 간결한 표현도 가능하다.

0. $(".project").each( function() {    
1. });  

1. $(".project").each( function() {  
2. });

 

Ajax Request

Ajax request도 간단하게 사용할 수 있다.

0. $.ajax({  
1.   type: "POST",  
2.   url: "/projects/recent",  
3.   data: "duration=5&user=juddy",  
4.   success: function(html){  
5.    $("#recent_projects").replaceWith(html);  
6.   }  
7. });  

1. $.ajax({
     type: "POST",
     url: "/projects/recent",
     data: "duration=5&user=juddy",
2.   success: function(html){
      $("#recent_projects").replaceWith(html);
     }
   });

success는 요청 성공시 호출되는 event handler이다. 이렇게 각 요청에 대해서 event handler를 작성할 수도 있고, 모든 요청에 대한 global event handler를 다음과 같이 정의할 수도 있다.

0. $("#ajax_msg").ajaxSuccess(function(evt, request, settings){  
1.    $(this).append("<li>Successful Request!</li>");  
2.  });  

1. $("#ajax_msg").ajaxSuccess(function(evt, request, settings){
      $(this).append("<li>Successful Request!</li>");
    });

 

json request를 callback과 함께 사용하고 싶다면 getJSON을 사용할 수도 있다. (GET요청만 사용가능)

0. $.getJSON("/projects/recent",  
1.   function(data){  
2.     // handle data  
3.   });  
4. });  

1. $.getJSON("/projects/recent",
     function(data){
       // handle data
     });
   });

 

더 자세한 내용은 http://docs.jquery.com/Ajax 를 참조.