jQuery 개발자를 위한 메모 - 기본·샘플

출처 : http://cafe.naver.com/rubython/419

기본

jQuery (이)란

jQuery (은)는 여러가지 처리를 짧고 간단하게 쓸 수 있다 JavaScript 라이브러리입니다. 독자적인XPATH/CSS 실렉터를 이용하는 것으로, 많은DOM 조작을 매우 간단하게 쓸 수 있습니다.
JavaScript 의DOM 조작이나,XMLHTTPRequest ,XML 의 조작등을 기억하지 않아도, Ajax (을)를 이용한 인터랙티브인 페이지를 만들 수 있습니다.
이하의 샘플을 보면,JavaScript 다운 표기를 거의 할 필요가 없는 것을 알 수 있다고 생각합니다.

toggle 샘플

특정의 블록의 표시·비표시를 바꾸는 것은 이하와 같은 코드가 됩니다.

$("#target_toggle").toggle("slow");

이 블록은,<p id="target_toggle"> 입니다.

Ajax 샘플

Ajax 그리고hello.html (을)를 로드하는 것은 이하와 같은 코드로 만듭니다.

$("#target_load").load("hello.html");

목차의 자동 생성

이 문서의 목차도,jQuery (을)를 사용해H1H6 태그로부터 자동 생성하고 있습니다. 이 페이지로 읽어들이고 있는,jquery_site.js 파일을 확인해 보세요.

기본적인 사용법

상기의 샘플과 같이,jQuery 그럼 대상의DOM 요소를 $() 그리고 선택하고 나서, .toggle() 등의 메소드를 사용해 조작을 더합니다.
$() 함수를 부르면, 선택되었다DOM 요소를 가진다 jQuery 오브젝트가 돌려주어집니다. jQuery 오브젝트에는, 효과를 더하거나Ajax 로드를 실행하기 위한 메소드가 있습니다. jQuery 오브젝트의 메소드는, 플러그 인으로 확장할 수 있습니다.
또,jQuery 오브젝트에 대한 조작이 아닌 메소드도 $.get() 등 ,$. (으)로부터 시작되는 명칭으로 준비되어 있어JavaScript 안에서 처리를 진행시키고 싶을 때에 이용할 수 있습니다.
상기의 샘플에서는,$("#ID") 그리고 특정의ID (을)를 가지는 것을 선택해,.toggle() (이)나 .load() 메소드로 조작을 더하고 있습니다.

다운로드

본가 사이트로부터 다운로드해 주세요.
개발중의SVN 판과 안정판(최신은1.0.1 )(이)가 있습니다.
jQuery (은)는 현재도 매우 활발하게 개발되고 있습니다만, 아직 버그등도 잘 발견되어, 충분히 안정되어 있다고는 말할 수 없는 곳이 있습니다. 최신의SVN 판을 시험하는 것을 추천합니다.

jQuery 1.0.1 ( 풀 기능 압축판)

jquery-1.0.1.pack.js

jQuery 1.0.1 (Configure)

http://jquery.com/ 의[Configure Your Download] (을)를 클릭하면 필요한 기능만을 다운로드할 수 있습니다.

SVN 판

내가 빌드 했다SVN 판을 이하로부터 다운로드할 수 있습니다.
http://www.mikage.to/jquery/build/
jquery.js 하지만 매입 문서가 포함되는 것,jquery.lite.js 하지만 매입 문서를 삭제한 것, jquery.min.js (와)과 jquery.pack.js 하지만 압축한 것입니다.
jquery.min.js (와)과 jquery.pack.js 그럼,pack (분)편이 보다 압축되고 있어 사이즈가 작아지고 있습니다.
디버그시는 jquery.lite.js , 릴리스시는 jquery.pack.js (을)를 이용하는 것을 추천합니다.

SVN 판의 빌드 방법(UNIX ·Cygwin )

이하의 순서로 빌드 합니다.

svn co svn://jquery.com/

cd jquery.com/jquery/

make

dist/ 디렉토리아래에 빌드 된 파일이 출력됩니다.

SVN 판의 빌드 방법(Windows )

우선,SVN ,Java ,Ant 하지만 필요하게 되기 위해, 이것들을 인스톨 합니다. 벌써 인스톨 끝난 경우는, 다음의 빌드 순서를 참조해 주세요.

Subversion 의 인스톨

http://subversion.tigris.org/project_packages.html (을)를 엽니다.
「Windows NT, 2000, XP and 2003 」라고 하는 부분을 찾아, 거기에 써 있는 문장의 「The latest command-line binaries and libraries for Windows can be found in this directory of the file-sharing area. 」 의 this directory 그렇다고 하는 링크를 더듬습니다.
파일의 일람이 표시되므로,svn-*-setup.exe 의 쳐 제일 버젼이 새로운 것을 다운로드합니다. 현재는 svn-1.3.2-setup.exe 하지만 최신같므로, 이것을 다운로드해 실행합니다.
실행하면 인스톨러가 기동해,Subversion (을)를 인스톨 할 수 있습니다.

Java(JDK) 의 인스톨

http://java.sun.com/j2se/1.5.0/ja/download.html (으)로부터 최신의JDK (을)를 다운로드합니다.
현재는 JDK 5.0 Update 8 하지만 최신같므로, 그 표기의 오른쪽에 있는 다운로드 버튼을 클릭합니다. 파일의 일람이 표시되기 때문에, 라이센스를 읽어, Accept License Agreement (을)를 체크한 후, Windows Offline Installation, Multi-language (을)를 클릭해 다운로드합니다.
실행하면 인스톨러가 기동해,Java(JDK) (을)를 인스톨 할 수 있습니다.

Ant 의 인스톨

http://ant.apache.org/bindownload.cgi (으)로부터 최신의Ant (을)를 다운로드합니다.
Current Release of Ant (을)를 찾아,.zip archive: apache-ant-*-bin.zip 그렇다고 하는 파일을 다운로드합니다.
현재는 apache-ant-1.6.5-bin.zip 하지만 최신같므로, 파일명을 클릭해 다운로드합니다.
해동하고, 적당한 디렉토리에 전개합니다.
이하 "C:Program FilesJavaapache-ant-1.6.5" 에 해동했을 경우의 설정예를 씁니다.
("C:Program FilesJavaapache-ant-1.6.5bin" 에ant 의 바이노리필드가 있는 상태입니다.)
다른 디렉토리에 해동했을 경우, 적절히 읽어 바꾸어 주세요.
컨트롤 패널을 열어, 시스템을 엽니다. 상세 설정 탭을 열어, 환경 변수를 클릭해, 유저 환경 변수의 신규 버튼을 클릭해,
변수：ANT_HOME
치：C:Program FilesJavaapache-ant-1.6.5
그리고 설정을 추가합니다.
다음에 패스의 설정을 추가합니다만, 벌써 설정 끝난 경우와 그렇지 않은 경우로 조작이 다릅니다.
유저 환경 변수의 일람의 변수안에PATH 하지만 벌써 있는 경우, 그것을 선택해, 편집 버튼을 누릅니다. 값의 마지막에 ";C:Program FilesJavaapache-ant-1.6.5bin" (을)를 추가합니다. (; (을)를1 개추가한 후, 패스를 씁니다."" 까지는 기입할 필요는 없습니다.)
PATH 하지만 아직 없는 경우는, 신규를 클릭해, 변수에 PATH , 값에 C:Program FilesJavaapache-ant-1.6.5bin (을)를 추가합니다.
이상으로 설정 완료입니다.

빌드 순서

이하의 순서로 빌드 합니다. 악세사리로부터 커멘드 prompt를 기동해, 이하와 같이 커멘드를 입력해 주세요.

svn co svn://jquery.com/

cd jquery.comjquery

ant

dist 디렉토리아래에 빌드 된 파일이 출력됩니다.

$() 함수(기본)

jQuery 의 제일 기본이 되는 조작은,$() 입니다. 이 함수로HTML 안으로부터 조작하고 싶은 대상을 선택해, 여러가지 조작을 실시합니다.
$() 함수는,CSS (와)과 같은 지정과 XPath 에 의한 지정의 양쪽 모두를 이용할 수 있습니다.
$() 함수를 사용하면, 복수의DOM 요소를 가졌다 jQuery 오브젝트가 돌려주어집니다.
여기에서는, 기본의 사용법만을 소개합니다.

ID 에 의한 지정

# (을)를 선두에 붙이는 것으로ID 지정으로 선택할 수 있습니다.이 방법은 처리 속도도 고속으로.
이 설명문은 <p id="target_id"> 블록안에 쓰여져 있습니다.

alert(  $("#target_id").html()  );

태그의 종류에 의한 지정

태그의 종류를 쓰면, 그 태그를 추출할 수 있습니다.
해당하는 태그가 다수 있는 경우, 복수의 오브젝트가 선택됩니다.
.html() 메소드는, 최초의 오브젝트의HTML 코드를 표시하는 메소드입니다만, 복수의 오브젝트에 동시에 효과를 더하는 메소드도 있습니다.

alert(  $("pre").html()  );

$("pre").addClass("background_red");

$("pre").removeClass("background_red");

class 에 의한 지정

클래스명의 전에 . (을)를 붙이면, 지정한 클래스를 선택할 수 있습니다.
태그의 종류에 의한 지정과 겸용하는 일도 물론 가능합니다.

alert(  $(".run").html()  );

alert(  $("pre.run").html()  );

Chaining

많은 메소드는,jQuery 오브젝트를 돌려줍니다. 이 때문에, 복수의 조작을 계속해 지정할 수 있습니다.

$("#target_chain").css("background-color", "#fff0ff").fadeOut("slow");

$("#target_chain").css("background-color", "#efffff").fadeIn("slow");

효과

show() / hide()

show() / hide() 메소드로, 지정한 요소의 표시·비표시를 바꿀 수 있습니다.
인수로서 "slow", "normal", "fast" (을)를 붙인다고 애니메이션 합니다. 다만, 애니메이션은 요소의 사이즈가 정해지지 않는 케이스등에서 잘 움직이지 않는 것이 있는 것 같습니다. 그 경우는, 애니메이션 없음으로 하면 동작하는 것 같습니다.
표시중의 것을 show() 하거나 비표시의 것을 hide() 하고 싶지 않은 경우는, $() 할 때에 :hidden ,:visible 지정을 이용할 수 있습니다.
이 설명문은 <p id="target_effect"> 블록안에 쓰여져 있습니다.

$("#target_effect").show();

$("#target_effect").hide();

$("#target_effect").show("slow");

$("#target_effect").hide("fast");

$("#target_effect:hidden").show("slow");

$("#target_effect:visible").hide("fast");

slideDown() / slideUp()

slideDown() / slideUp() 메소드로, 슬라이드시키는 애니메이션을 할 수 있습니다.
인수로서 "slow", "normal", "fast" 그리고 애니메이션 속도를 지정합니다.
이 설명문은 <p id="target_effect_slide"> 블록안에 쓰여져 있습니다.

$("#target_effect_slide:hidden").slideDown("slow");

$("#target_effect_slide:visible").slideUp("slow");

fadeIn() / fadeOut()

fadeIn() / fadeOut() 메소드로, 용명·페이드아웃을 할 수 있습니다.
인수로서 "slow", "normal", "fast" 그리고 애니메이션 속도를 지정합니다.
이 설명문은 <p id="target_effect_fade"> 블록안에 쓰여져 있습니다.

$("#target_effect_fade:hidden").fadeIn("slow");

$("#target_effect_fade:visible").fadeOut("slow");

Ajax

load()

load() 메소드로, 대상 오브젝트의 내용을 Ajax 로드한 컨텐츠와 갈아넣을 수 있습니다.
hello.html (을)를 이 아래의 단락에 로드합니다.

이 단락은 <p id="target_ajax_load"> 입니다.

$("#target_ajax_load").load("hello.html");

파라미터를 주고 싶은 경우는,2 번째의 인수로 지정할 수 있습니다. 파라미터를 지정했을 경우,POST 메소드가 됩니다.
파라미터를 지정하지 않는 경우,GET 메소드가 되기 위해, 브라우저에 의해 리퀘스트 결과가 강력하게 캐쉬됩니다. 캐쉬를 하시고 싶지 않은 경우, 파라미터를 지정해POST 메소드로 하는지, URL 의 말미에 랜덤인 수치를 부여해 캐쉬되지 않게 할 필요가 있습니다.

$("#target_ajax_load").load("hello.cgi", {

	name: "mikage",

	pageid: 3

});

var timekey = (new Date()).getTime();

$("#target_ajax_load").load("hello.html?" + timekey);

3 번째의 인수(파라미터를 주지 않는 경우2 번째 )에는, 콜백 함수를 지정할 수 있습니다.
로드가 완료하면, 콜백 함수가 불려 갑니다. 콜백 함수 중(안)에서는,this 하지만 치환 대상의DOM 요소 그 자체가 됩니다. $(this) (으)로 하는 것으로 jQuery 오브젝트로서 취급할 수 있게 됩니다.
또, 콜백 함수의1 번째에는 텍스트 내용,2 번째에는 스테이터스가 돌려주어집니다. 성공시는 "success" , 실패시는 "error" 하지만 돌아갑니다.

$("#target_ajax_load").load("hello.html", function(text, status) {

	$(this).css("background-color", "#ffe0ff");

	alert(  "text: " + text + "nstatus: " + status  );

});

$.ajaxTimeout()

$.ajaxTimeout() 그리고 Ajax 리퀘스트의 타임 아웃 시간을 지정할 수 있습니다. 동적인 컨텐츠를 돌려줄 때, 시스템이 좀처럼 응답을 돌려주지 않을 때에 에러 표시를 하고 싶은 경우에 이용할 수 있습니다.
hello_timeout.cgi 하5 초간 응답을 돌려주지 않는다CGI 입니다. 브라우저의 캐쉬를 막기 위해서, 파라미터를 추가하고 있습니다.

이 단락은 <p id="target_ajax_load_timeout"> 입니다.

$.ajaxTimeout(2000); // 

단위는ms

$("#target_ajax_load_timeout").load("hello_timeout.cgi", {

	timekey: 1

	}, function(text, status) {

	alert(  "text: " + text + "nstatus: " + status  );

});

$.ajaxTimeout(0); // 0

지정으로 타임 아웃 없음이 됩니다

$("#target_ajax_load_timeout").load("hello_timeout.cgi", {

	timekey: 1

	}, function(text, status) {

	alert(  "text: " + text + "nstatus: " + status  );

});

HTML (와)과 코드의 분리

jQuery 그럼,HTML (와)과JavaScript 코드를 용이하게 분리할 수 있습니다. 여기에서는 그방법에 대해 설명합니다.

$(function(){})

HTML (와)과JavaScript 코드를 분리하는 경우,HTML 하지만 다 읽어들인 다음에, 필요한 이벤트를 설정합니다.
jQuery 그럼,HTML 하지만 다 읽어들인 후에 실행하는 코드를,onload (이)가 아니고, $(function(){}) (을)를 이용해 실행합니다.
onload 의 경우는, 페이지의 모든 화상이 읽힐 때까지 실행되지 않습니다만, $(function(){}) (을)를 이용하면,HTML 문서의 준비를 할 수 있던 단계에서 실행시킬 수 있습니다.
$(function(){}) (은)는 여러 차례 지정할 수 있으므로, 별파일 로 분리했다JavaScript 코드 중(안)에서도 이용할 수 있습니다.

$(function(){

    // HTML로드 후에 실행하고 싶은 초기화 코드

});

이 기술은,$(document) 에 대한다 .ready() 메소드와 같습니다.
이전의 버젼에서는,$(function(){}) (은)는 없고,ready() 메소드를 사용하고 있었기 때문에, 플러그 인등 , 다른 소스를 보면 이하의 기술을 보는 일이 있을지도 모릅니다.

$(document).ready(function(){

    // HTML로드 후에 실행하고 싶은 초기화 코드

});

click()

click() 그리고,onclick 이벤트를 설정할 수 있습니다. ready() 중(안)에서,click 메소드를 사용해 이벤트를 설정하는 것으로, HTML 코드중에서JavaScript 코드를 분리할 수 있습니다.
같이sumbit ,focus 등의 메소드도 있습니다.

// JavaScript

코드 부분

<script type="text/javascript">

$(function(){

    $("#popup_alert").click(function(){

        alert(  "popup"  );

        return false;

    });

});

</script>

</head>

<body>

// HTML부분

<a href="" id="popup_alert">alert팝업</a>

DOM 요소의 조작

$() 에 의한 실렉터는 편리하고, 대부분의 경우는 $() (을)를 한 번 실행하는 것만으로 목적의DOM 요소를 얻을 수 있다고 생각합니다. 그러나,filter() 메소드등을 사용하는 것으로,jQuery 오브젝트의DOM 요소로부터 더욱 일부를 좁히고, 처리를 더하는 것도 가능합니다.
$() 에 의한 셀렉트 처리는, 경우에 따라서는 시간이 걸립니다. 그러한 경우에, 쓸데 없는 처리를 생략하기 위해서,filter() 메소드등이 활용할 수 있는 일이 있습니다.
jQuery 오브젝트는, 오브젝트의 집합을 복수 취급할 수 있도록(듯이), 내부에 스택(stuck)구조를 가지고 있습니다.
filter() 메소드등은, 호출전 상태를 스택에 보존한 후, 새롭게 추출을 실행합니다.
jQuery 메소드는, 통상 스택의 맨 위(제일 마지막 결과)를 참조해 동작하기 위해(때문에),filter() 메소드의 실행 결과에 대해서 처리를 실시할 수 있게 되어 있습니다.
필요한 처리를 끝낸 다음은,end() 메소드를 실행하면, 스택의 맨 위의 정보를 파기합니다. 그 다음은,filter() 메소드 실행전 상태로 돌아오게 됩니다.

단락1

단락2

단락3

var $target = $("#target_jquery_object");

var $p = $("p", $target);

jquery_dump($p); // 모든 p 태그가 돌려주어집니다.

$p.filter(".header"); // 스택에 카피를 추가해,

                     // class="header" 이외의 오브젝트를 삭제합니다.

jquery_dump($p);

$p.end();

jquery_dump($p); // 최초 상태로 돌아오기 위해, 모든 p 태그가 돌려주어집니다.

Chaining시 주의

jQuery (은)는 오브젝트의 최인이 생깁니다만, 이 최인을 이용했을 경우, 각각의 처리로 오브젝트 자체가 변경된다 일로 주의할 필요가 있습니다.
전 상태를 보관 유지하고 싶은 경우는,jQuery 의 스택(stuck)구조를 잘 이용할 필요가 있습니다.

단락

단락

단락

var $target = $("#target_jquery_object_chain");

var $p = $("p", $target);

jquery_dump($p); // 

모든 p 

태그가 돌려주어집니다.

jquery_dump($p.filter(".header"));

jquery_dump($p); // 여기에서도 위의 행의 .filter 의 영향은 남은대로 입니다

$p.end(); // 원래 상태에 되돌리기 위해서는 end() (을)를 실행할 필요가 있습니다.

jquery_dump($p);

플러그 인을 사용한다

jQuery (은)는, 다양한 기능을 플러그 인으로 확장할 수 있습니다.
플러그 인을 사용하려면 , 파일을 입수해,jquery.js 의 후에 플러그 인의JavaScript (을)를 로드합니다. 그렇다면, 플러그 인의 함수·메소드가 이용 가능하게 됩니다.
플러그 인의 함수는, 통상의 jQuery 의 함수·메소드와 같게,$("#id").method() (이)나 $.method() 그리고 사용할 수 있습니다.

  <script type="text/javascript" src="jquery.pack.js"></script>

  <script type="text/javascript" src="jquery.highlightFade.sane.js"></script>

highlightFade 샘플

highlightFade 샘플
highlightFade 플러그 인의 샘플입니다.
실행 결과와 원시 코드를 확인해 보세요.

샘플

체크 박스의 조작

체크 박스의 조작 샘플
체크 박스의 조작을 실시하는 샘플입니다. 「모두 체크」나 「모두 체크 해제」를 실시합니다.