2-3 보강. jQuery 간단 사용법

jQuery는 자바스크립트를 보다 편하게 사용 할 수 있는 라이브러리다. 프레임워크 수준의 막강한 기능들을 제공하고 있으며 복잡한 자바스크립트를 단순화 하며 크로스브라우징을 지원하기 때문에 작업자의 업무량을 상당히 줄여준다. 아래는 jQuery를 사용하는 방법을 간단하게 요약한 것이다.

body에 해당하는 HTML 삽입

$("<div>Hello world</div>").appendTo("body");

이 문장에서는 body 태그 사이에 태그를 추가하게 되는데 body 대신 원하는 다른 태그를 사용 할 수 있다.

레이어 테두리 속성 지정하기

$("div#outline").css("border", "1px solid #242424");

id가 outline인 div 태그에 1px의 실선을 테두리로 사용한다. css() 함수는 해당 태그에 style을 적용 할 때 사용한다.

div에 포함 된 span 안의 문자열 색상을 변경

$("div > span").css("color", "#e4e4e4");

이 문장에서 >는 해당 태그에 포함 된 하위 태그를 가리킨다.

<div>
   <span>
        div에 포함 된 첫 번째 span
        <span>문자열</span>
   </span>
   <span>
      이 영역도 div에 포함 된 첫 번째 span에 해당
   </span>
</div>

이 문장에서 div에 포함 된 span은 모두 3개가 된다. 그런데 위의 예문에서는 굵은 글씨로 표시 된 span에만 적용 된다. >는 왼쪽 태그에 포함 된 첫번째 그룹를 의미한다. <span>문자열</span>은 굵은 글씨의 <span>에 예속 됐기 때문에 div로 부터는 2단계에 포함 된다. 트리에서 레벨 1에 해당하는 span에 대해서만 속성을 변경한다.

모든 객체의 속성을 변경

$("*").css("color", "#efefef");

문서의 모든 태그에 색상을 변경한다.

여러 태그의 속성을 한 번에 변경

$("div, span, a").css("color", "#efefef");

div, span, a 태그에 포함 된 문자열의 색상을 변경한다.

여러 개의 태그에서 첫번째 태그의 속성 변경

$("div:first").css("color", "#efefef");

여러 개의 div가 연속해서 나올 때 첫번째 div의 색상을 변경한다.

체크 되지 않은 checkbox 뒤에 나오는 첫번째 span의 속성을 변경

$("input:not(:checked) + span).css("color", "#efefef");

연속 해서 나오는 태그의 2번째 태그의 속성 변경

$("div:eq(1)".css("color", "#efefef");

연속으로 나오는 div 중에서 2번째 div의 색상을 변경. 배열 요소는 0부터 시작하기 때문에 1이 두번째 요소가 된다.

$("div").eq(1).css();처럼 사용 할 수도 있다.

$(function(){
    내용
}

문서가 모두 로딩 된 후에 실행 되는 함수.

$(document.ready( function() {
    내용
});

이렇게도 사용 할 수 있다.

페이지에서 한 번만 사용 가능한 자바스크립트 document.onload와 다르게 jQuery의 ready()는 한 페이지에서 여러 번 사용이 가능하다.

 

태그에 클래스를 추가

$("div#msgbox").addClass("cssname");

id가 msgbox인 div에 cssname이라는 클래스를 추가

특정 객체가 클릭 됐을 때 이벤트

$("div#submit").click(function(){

id가 submit인 div가 클릭 됐을 때 실행 될 코드

});

jQuery의 사용법을 간단히 설명한 것이고 jQuery에서 제공하는 함수와 기능은 워낙 많기 때문에 블로그에 모두 포스팅 하기에는 무리가 있다.

좀 더 자세한 설명은 http://learn.jquery.com/에서 도움을 얻을 수 있다.