jQuery Tutorial - 1

출처 : http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

jQuery에서는 document의 ready 이벤트를 다음과 같이 등록한다.

$(document).ready(function() {
  // DOM이 준비된후 할일 정의
});

링크를 클릭했을 때 경고창으로 메시지를 띄우는 예제.
$(document).ready(function() {
  $("a").click(function() {
    alert("Hello, world!");
  });
});

$("a") 는 jQuery의 선택자(selector)이며 $는 jQuery의 클래스이므로  $()는 새로운 jQuery 객체를 생성하는 코드임. click은 jQuery 객체의 메소드로서 클릭 이벤트와 바인딩되어 이벤트 발생시 해당 메소드의 내용을 실행.
document.getElementById("orderedlist")와 같은 코드를 jQuery에서는 다음과 같이 쓸 수 있음.
$(document).ready(function() {
  $("#orderedlist").addClass("red");
});

아래는 li의 모든 child 중에서 orderedlist라는 id를 가지는 노드를 선택하여 "blue" 클래스를 추가하는 코드임.
$(document).ready(function() {
  $("#orderedlist > li").addClass("blue")
});

아래는 사용자가 리스트의 가장 마지막 li 엘리먼트위에 마우스를 갖다대었을 때 클래스를 추가하고 제거하는 코드임.
$(document).ready(function() {
  $("#orderedlist li:last").hover(function() {
    $(this).addClass("green");
  }, function() {
    $(this).removeClass("green");
  });
});

find() 메소드는 이미 선택된 엘리먼트의 자식들을 찾으며, each()는 모든 엘리먼트들을 순회하면서 주어진 작업을 수행.
$(document).ready(function() {
  $("#orderedlist").find("li").each(function(i) {
    $(this).append("  BAM! " + i);
  });
});

jQuery에서 다루고 있지 않은 메소드를 호출하고자 할 때는 다음과 같이 코드를 작성.
$(document).ready(function() {
  $("#reset").click(function() {
    $("#form")[0].reset();
  });
});

한번에 여러 폼을 reset하고자 할 때.
$(document).ready( function() {
  $("#reset").click( function() {
    $("#form").each( function() {
      this.reset();
    });
  });
});

위 경우 this는 실제적인 엘리먼트를 가리킴.

특정 그룹에서 비슷하거나 같은 엘리먼트들 중에서 특정 엘리먼트만 골라내기.
$(document).ready(function() {
  $("li").not("[ul]").css("border", "1px solid black");
});
모든 li 엘리먼트들 중에서 ul엘리먼트를 자식으로 갖지 않는 엘리먼트를 골라냄.

$(document).ready(function() {
  $("a[@name]").css("background", "#eee");
});
위 코드는 name 속성을 가지는 모든 앵커 엘리먼트에 배경색상을 추가함.

$(document).ready(function() {
  $("a[@href*=/content/gallery]").click(function() {
    // /content/gallery를 가리키는 모든 링크에서 수행할 작업
  });
});

형제 엘리먼트에 접근하여 작업 처리하기.
$(document).ready( function() {
  $("#faq").find('dd').hide().end().find('dt').click( function() {
    $(this).next().slideToggle();
  });
});

부모 엘리먼트에 접근하여 작업 처리하기.
$(document).ready( function() {
  $("a").hover( function() {
    $(this).parents("p").addClass("highlight");
  }, function() {
    $(this).parents("p").removeClass("highlight");
  });
});

다음은 $(document).ready(callback) 표기의 줄임 표현임.
$(function() {
  // DOM이 준비되었을 때 실행할 코드
});

줄임 표현을 이용하여 Hello, world! 예제를 재작성.
$( function() {
  $("a").click( function() {
    alert("Hello, world!");
  });
});