레퍼런스

$()

jQuery 오브젝트를 만들어 내는 함수입니다.

$("CSS/Xpath 문자열")

CSS/XPATH 그리고 요소를 지정해, 매치한 요소를 가진다jQuery 오브젝트를 돌려줍니다. 자세한 지정 방법은 CSS / XPath (을)를 참조해 주세요.

var $toc_1 = $("#toc_1");

jquery_dump($toc_1);

var $h1 = $("h1");

jquery_dump($h1);

var $h1head = $("h1.head");

jquery_dump($h1head);

var $ahref = $("a[@href='http://jquery.com/']");

jquery_dump($ahref);

var $h1pa = $("//p/a");

jquery_dump($h1pa);

$(DOM 요소) / $([DOM 요소의] 배열)

지정했다DOM 요소를 가진다jQuery 오브젝트를 돌려줍니다. 
each (이)나 콜백 함수로 this (을)를 나팔 하는 경우에 이용한다 사용법이 많다고 생각합니다.

$(function(){

    // 

초기화 코드

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

        alert(  $(this).html()  );

        return false;

    });

});

$(jQuery 오브젝트)

jQuery 오브젝트의 현재 상태와 같다DOM 요소 집합을 가졌다jQuery 오브젝트를 작성합니다. 
jQuery 의 스택의 최신의DOM 요소 집합이 카피되어 스택의 모든 상태까지는 카피되지 않습니다. 또,DOM 요소 자체의 카피도 되지 않습니다.

$("CSS/Xpath 문자열", 문맥)

지정된 문맥 중(안)에서, 매치하는 요소를 가진다jQuery 오브젝트를 추출해, 돌려줍니다. 
일부의 범위에 한해서 검색을 실시하고 싶은 경우에 이용할 수 있습니다. 
이 단락에는 class="context_header" 하지만 지정되어 있습니다.

$("title",xml.reponseXML);

alert(  $("br", $(".context_header")).size()  );

jQuery 오브젝트 조작

jQuery 오브젝트는, 복수의DOM 요소를 가질 수 있습니다.0 개의 경우도 있습니다. 그러한DOM 요소에 관한 조작을 실시하는 메소드군입니다.

size() / length

DOM 요소의 수를 표시합니다.

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

alert(  $("p", $target).size()  );

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

alert(  $("p.header", $target).size()  );

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

alert(  $("p", $target).length  );

get()

DOM 요소를 배열로 취득합니다.

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

alert(  $("p", $target).get()  );

alert(  $("p", $target).get()[0]  );

get(N)

N 번째의DOM 요소를 취득합니다.

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

alert(  $("p", $target).get(0)  );

alert(  $("p", $target).get(1)  );

alert(  $("p", $target).get(2)  ); // 

존재하지 않는 경우는 undefined 

하지만 돌아간다

[N]

N 번째의DOM 요소를 취득합니다. get(N) (와)과 같습니다.

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

alert(  $("p", $target)[0]  );

alert(  $("p", $target)[1]  );

alert(  $("p", $target)[2]  ); // 

존재하지 않는 경우는 undefined 

하지만 돌아간다

each( 함수)

각각의DOM 요소에 대해서, 지정한 함수를 실행합니다. 
DOM 요소가this (이)가 되어 함수가 실행됩니다. jQuery 오브젝트로서 취급하고 싶은 경우는,$(this) (와)과 나팔 할 필요가 있습니다.

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

$("p", $target).each(function(){

    alert(  this  );

});

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

$("p", $target).each(function(){

    alert(  $(this).html()  );

});

이벤트

이벤트의 설정을 실시합니다. HTML (으)로의 onclick / onfocus 등과 같은 일을,JavaScript 옆으로부터 설정할 수 있습니다. 
여기에서는 코어의 이벤트 기능에 대해 설명합니다만, 확장 이벤트라는 것이 있어, 이벤트를 보다 간단하게 설정하거나 마우스 오버등의 지원 기능이 있습니다. 
bind/unbind 대신에, 확장 이벤트를 사용하는 것을 추천합니다.

bind(" 이벤트명", 함수)

대상 오브젝트에 관해서, 지정한 이벤트가 발생했을 때에, 함수를 호출하도록(듯이) 설정합니다.

unbind(" 이벤트명", 함수) / unbind(" 이벤트명")

대상 오브젝트에 관해서, 이벤트와의 묶어를 해제합니다. 
함수를 지정하지 않았던 경우는, 모든 함수와의 묶어가 해제됩니다.

trigger(" 이벤트명")

대상 오브젝트에, 지정한 이벤트를 발생시킵니다.

DOM( 기본)

attr( 키) / attr( 키, 치) / attr( 해시) / removeAttr( 키)

DOM 요소의 속성을 조작합니다. 
키만을 지정했을 경우는 취득, 키, 값으로의 지정이나, 해시로 지정했을 경우는, 그러한 설정치로 덧쓰기합니다. removeAttr() 의 경우는, 지정한 속성을 삭제합니다. 
취득의 경우는, 최초의DOM 요소가 대상이 됩니다. 값을 설정하는 경우는, 모든DOM 요소가 대상이 됩니다.

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

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

alert(  $p.attr("class")  ); // 

최초의 요소가 대상

alert(  $target.html()  );

$p.attr("class", "danraku3"); // 

모든 요소가 대상

alert(  $target.html()  );

$p.removeAttr("class");

alert(  $target.html()  );

addClass( 클래스명) / removeClass( 클래스명) / toggleClass( 클래스명)

대상의DOM 요소에, 지정한 클래스를 추가·삭제, 혹은 타글 합니다.

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

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

$p.addClass("addclass");

alert(  $target.html()  );

$p.toggleClass("danraku1");

alert(  $target.html()  );

text()

모든DOM 요소의 텍스트 컨텐츠를 이어 맞춘 문자열을 돌려줍니다.

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

alert(  $target.text()  );

alert(  $target.html()  );

DOM( 속성)

jQuery 오브젝트는 복수의DOM 요소를 가집니다만,DOM 조작을 실시하는 경우, 조작 대상이 경우에 따라서 다른 것에 주의해 주세요. 
참조의 경우는 최초의DOM 요소, 설정·개서의 경우는 모든DOM 요소가 대상이 됩니다.

html() / html("HTML 문자열")

DOM 요소를HTML 그리고 취득, 혹은 지정했다HTML 에 갈아넣습니다.

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

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

$("#target_ref_dom_html").html("

단락의 내용을 고쳐 씁니다.");

val() / val( 치)

DOM 요소의 value 속성의 내용을 취득·설정합니다.

href() / href( 치) / id() / id( 치) / name() / name( 치)
/ rel() / rel( 치) / src() / src( 치) / title() / title( 치)

각각, 메소드명과 동명의 속성의 취득·설정을 실시합니다.

DOM(DOM 조작)

remove()

대상의DOM 요소를 삭제합니다.

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

	$("#target_ref_dom_remove").remove();

empty()

대상의DOM 요소의 아이 요소를 모두 삭제합니다. 
DOM 요소 자체는 남습니다. 
html() 그리고 내용을 대입할 때 등에, 일단 클리어 하고 싶은 경우에 이용할 수 있습니다.

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

$("#target_ref_dom_empty").empty();

append("HTML 문자열") / append(DOM 요소) / append([DOM 요소의] 배열)

대상의DOM 요소의 아이 요소의 말미에, 지정된 것을 추가합니다.

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

$("#target_ref_dom_append").append("[[append]]");

prepend("HTML 문자열") / prepend(DOM 요소) / prepend([DOM 요소의] 배열)

대상의DOM 요소의 아이 요소의 선두에, 지정된 것을 추가합니다.

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

$("#target_ref_dom_prepend").prepend("[[prepend]]");

appendTo("CSS/Xpath 문자열")

대상의DOM 요소를,CSS/XPath 지정으로 지정된 요소의 아이 요소의 말미로 이동합니다.

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

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

$("#target_ref_dom_appendto").appendTo("#target_ref_dom_appendto2");

clone() (을)를 이용하는 것으로 카피할 수도 있습니다.

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

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

$("#target_ref_dom_appendto_copy").clone()

    .appendTo("#target_ref_dom_appendto_copy2");

prependTo("CSS/Xpath 문자열")

대상의DOM 요소를,CSS/XPath 지정으로 지정된 요소의 아이 요소의 선두로 이동합니다.

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

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

$("#target_ref_dom_prependto").prependTo("#target_ref_dom_prependto2");

clone() (을)를 이용하는 것으로 카피할 수도 있습니다.

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

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

$("#target_ref_dom_prependto_copy").clone()

    .prependTo("#target_ref_dom_prependto_copy2");

before("HTML 문자열") / before(DOM 요소) / before([DOM 요소의] 배열)

대상의DOM 요소의 앞에, 지정된 것을 추가합니다.

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

$("#target_ref_dom_before").before("[[before]]");

after("HTML 문자열") / after(DOM 요소) / after([DOM 요소의] 배열)

대상의DOM 요소의 뒤에, 지정된 것을 추가합니다.

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

$("#target_ref_dom_after").after("[[after]]");

insertBefore("CSS/Xpath 문자열")

대상의DOM 요소를,CSS/XPath 지정으로 지정된 요소의 앞으로 이동합니다.

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

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

$("#target_ref_dom_insertBefore2").insertBefore("#target_ref_dom_insertBefore1");

clone() (을)를 이용하는 것으로 카피할 수도 있습니다.

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

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

$("#target_ref_dom_insertBefore_copy").clone()

    .insertBefore("#target_ref_dom_insertBefore_copy2");

insertAfter("CSS/Xpath 문자열")

대상의DOM 요소를,CSS/XPath 지정으로 지정된 요소의 뒤로 이동합니다.

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

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

$("#target_ref_dom_insertAfter").insertAfter("#target_ref_dom_insertAfter2");

clone() (을)를 이용하는 것으로 카피할 수도 있습니다.

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

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

$("#target_ref_dom_insertAfter_copy").clone()

    .insertAfter("#target_ref_dom_insertAfter_copy2");

clone()

대상의DOM 요소를 복제합니다. 
appendTo/prependTo/insertBefore/insertAfter 등의 메소드와 조합해 사용합니다. 
샘플은 각각의 메소드를 참조해 주세요.

wrap(HTML) / wrap(DOM 요소)

대상의DOM 요소의 외측에, 지정했다HTML ·DOM 요소를 삽입합니다.

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

$("#target_ref_dom_wrap").wrap("<p class='dotted'></p>");

remove("CSS/XPath 문자열")

지정한 요소만을remove() 하는 것이라고 생각합니다만, 사용법을 잘 모릅니다. . .

DOM(jQuery 오브젝트 조작)

jQuery 오브젝트가 가진다DOM 요소를 조작하는 메소드군입니다. 
jQuery 오브젝트는DOM 요소의 집합을 스택으로 가지고 있어 많은 메소드는 호출해 때 상태를 스택에 보존한 다음, 조작을 실시합니다. 
스택을1 개전의 단계에 되돌리려면 ,end() 메소드를 이용합니다.

end()

최신의 스택 상태를 파기해,1 개전 상태에 되돌립니다.

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

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

jquery_dump($p); // 

모든 p 

태그가 돌려주어집니다.

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

스택에 카피를 추가해,

                     // class="header" 

이외의 오브젝트를 삭제합니다.

jquery_dump($p);

$p.end();

jquery_dump($p); // 

최초 상태로 돌아오기 위해, 모든 p 

태그가 돌려주어집니다.

filter("CSS/XPath 지정 문자열") / filter(["CSS/XPath 지정 문자열" 의] 배열)

DOM 요소의 집합을, 지정했다CSS/XPath 지정으로 더욱 좁힙니다. 
문자열의 배열로 지정했을 경우, 어느 쪽인가에 매치하는 것에 좁힙니다. 
호출시 상태는 스택에 보존됩니다.

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

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

jquery_dump($p); // 

모든 p 

태그가 돌려주어집니다.

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

스택에 카피를 추가해,

                     // class="header" 

이외의 오브젝트를 삭제합니다.

jquery_dump($p);

not("CSS/XPath 지정 문자열") / not(DOM 요소)

filter() 의 부정판입니다. 
CSS/XPath 지정으로 지정된 것, 혹은 지정되었다DOM 요소를 없앱니다. 
호출시 상태는 스택에 보존됩니다.

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

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

jquery_dump($p); // 

모든 p 

태그가 돌려주어집니다.

$p.not(".header"); // 

스택에 카피를 추가해,

                     // class="header" 

(이)가 아닌 오브젝트를 삭제합니다.

jquery_dump($p);

find("CSS/XPath 지정 문자열")

DOM 요소의 집합에 포함되는 아이 요소로부터, 지정했다CSS/XPath 지정에 매치하는 것을 추출합니다. 
호출시 상태는 스택에 보존됩니다.

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

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

jquery_dump($ul);

jquery_dump($ul.find("li"));

next() / next("CSS/XPath 지정 문자열") / prev() / prev("CSS/XPath 지정 문자열")

next() (은)는,DOM 요소의 각각의 집합에 대해서, 그 요소의 다음에 있는 요소에 옮겨놓습니다. 다음의 요소가 없는 경우는, 그 요소는 삭제됩니다. 
호출시 상태는 스택에 보존됩니다. 
next("CSS/XPath 지정 문자열") 의 경우,next().filter("CSS/XPath 지정 문자열") (와)과 같은 동작이 됩니다. 다만, 스택은1 회 밖에 보존되지 않습니다. 
prev() / prev("CSS/XPath 지정 문자열") 하 next() (와)과 달리, 그 요소의 전의 요소에 옮겨놓습니다.

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

var $ulnext = $("ul", $target);

jquery_dump($ulnext);

$ulnext.next();

jquery_dump($ulnext);

$ulnext.end();

jquery_dump($ulnext);

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

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

jquery_dump($pnext);

$pnext.next();

jquery_dump($pnext);

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

var $ulnext = $("ul", $target);

jquery_dump($ulnext);

$ulnext.next(".nextfilter");

jquery_dump($ulnext);

$ulnext.end();

jquery_dump($ulnext); // 1

개전의 스택은,next(".nextfilter") 

의 실행전의 내용입니다.

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

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

jquery_dump($pprev);

$pprev.prev();

jquery_dump($pprev);

children() / children("CSS/XPath 지정 문자열")

DOM 요소의 각각 붙고, 아이 요소를 돌려줍니다. 
호출시 상태는 스택에 보존됩니다. 
children("CSS/XPath 지정 문자열") 의 경우,children().filter("CSS/XPath 지정 문자열") (와)과 같은 동작이 됩니다. 다만, 스택은1 회 밖에 보존되지 않습니다.

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

var $children = $("ul", $target);

jquery_dump($children);

$children.children();

jquery_dump($children);

$children.children();

jquery_dump($children);

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

var $children = $("ul", $target);

jquery_dump($children);

$children.children(".top");

jquery_dump($children);

parent() / parent("CSS/XPath 지정 문자열")

각각DOM 요소의 친요소를 돌려줍니다. 다만, 공통의 부모를 가지는 요소가 다수 있었을 경우, 부모는 1개만 돌려주어집니다. 
호출시 상태는 스택에 보존됩니다. 
parent("CSS/XPath 지정 문자열") 의 경우,parent().filter("CSS/XPath 지정 문자열") (와)과 같은 동작이 됩니다. 다만, 스택은1 회 밖에 보존되지 않습니다.

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

var $parent = $("#target_ref_jquery_parent_2", $target);

jquery_dump($parent);

$parent.parent();

jquery_dump($parent);

$parent.parent();

jquery_dump($parent);

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

var $parent = $("li", $target);

jquery_dump($parent);

$parent.parent();

jquery_dump($parent);

$parent.parent();

jquery_dump($parent);

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

var $parent = $("li", $target);

jquery_dump($parent);

$parent.parent(".top");

jquery_dump($parent);

parents() / parents("CSS/XPath 지정 문자열")

각각DOM 요소의 친요소, 그 친요소, 그 친요소···(와)과 순서에 돌려줍니다. 다만, 루트의 요소는 포함되지 않습니다. 
호출시 상태는 스택에 보존됩니다. 
parents("CSS/XPath 지정 문자열") 의 경우,parents().filter("CSS/XPath 지정 문자열") (와)과 같은 동작이 됩니다. 다만, 스택은1 회 밖에 보존되지 않습니다.

// 

이 샘플은 처리가 무겁습니다.

// 

다이얼로그가 화면을 초과했을 경우,Enter

키로 닫아 주세요.

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

var $parents = $("#target_ref_jquery_parents_2", $target);

jquery_dump($parents);

$parents.parents();

jquery_dump($parents);

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

var $parents = $("li", $target);

jquery_dump($parents);

$parents.parents(".top");

jquery_dump($parents);

ancestors() / ancestors("CSS/XPath 지정 문자열")

parents() 메소드의 별명입니다. 자세한 것은 parents 메소드를 참조해 주세요.

siblings() / siblings("CSS/XPath 지정 문자열")

각각DOM 요소의 형제 요소를 돌려줍니다. 다만, 공통의 형제 요소가 다수 있었을 경우, 독특한 1개만이 돌려주어집니다. 
호출시 상태는 스택에 보존됩니다. 
siblings("CSS/XPath 지정 문자열") 의 경우,siblings().filter("CSS/XPath 지정 문자열") (와)과 같은 동작이 됩니다. 다만, 스택은1 회 밖에 보존되지 않습니다.

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

var $siblings = $("li.top", $target);

jquery_dump($siblings);

$siblings.siblings();

jquery_dump($siblings);

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

var $siblings = $("ul", $target);

jquery_dump($siblings);

$siblings.siblings();

jquery_dump($siblings);

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

var $siblings = $("ul", $target);

jquery_dump($siblings);

$siblings.siblings(".top");

jquery_dump($siblings);

contains( 문자열)

DOM 요소의 집합을, 지정한 문자열을 텍스트로 가지는 요소에 좁힙니다. 
호출시 상태는 스택에 보존됩니다.

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

var $contains = $("li", $target);

jquery_dump($contains);

$contains.contains("1-");

jquery_dump($contains);

add("CSS/XPath 지정 문자열") / add(DOM 요소) / add([DOM 요소의] 배열)

DOM 요소의 집합에,CSS/XPath 지정 문자열로 매치한 요소, 혹은 지정했다DOM 요소를 더합니다. 
CSS/XPath 지정 문자열을 지정하는 경우, 대상은 문서 전체가 되어,$("CSS/XPath 지정 문자열", context) 의 같은 형식에서 범위를 지정할 수 없습니다. 
호출시 상태는 스택에 보존됩니다.

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

var $add = $("ul", $target);

jquery_dump($add);

$add.add("#target_ref_jquery_add2");

jquery_dump($add);

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

var $add = $("ul", $target);

jquery_dump($add);

$add.add($("p", $target)[0]); // DOM

요소를 추가합니다

jquery_dump($add);

CSS

css( 키) / css( 키, 치) / css( 해시)

CSS 의 속성을 조작합니다. 
키만을 지정했을 경우는 취득, 키, 값으로의 지정이나, 해시로 지정했을 경우는, 그러한 설정치로 덧쓰기합니다. 
취득의 경우는, 최초의DOM 요소가 대상이 됩니다. 값을 설정하는 경우는, 모든DOM 요소가 대상이 됩니다.

background() / background( 치) / color() / color( 치)
/ float() / float( 치) / overflow() / overflow( 치)
/ position() / position( 치)

각각, 메소드명과 동명의CSS 속성의 취득·설정을 실시합니다.

left() / left( 치) / top() / top( 치)

각각, 메소드명과 동명의CSS 속성의 취득·설정을 실시합니다.

height() / height( 치) / width() / width( 치)

각각, 메소드명과 동명의CSS 속성의 취득·설정을 실시합니다.

효과

hide() / show()

show() (은)는 지정된 요소를 비표시 상태로부터 표시 상태로 변경합니다. 벌써 표시 상태이면 아무것도 하지 않습니다. 
hide() (은)는 지정된 요소를 표시 상태로부터 비표시 상태로 변경합니다. 벌써 비표시 상태이면 아무것도 하지 않습니다.

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

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

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

toggle()

지정된 요소의 표시·비표시를 바꿉니다.

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

$("#target_ref_effect_toggle").toggle();

기본 효과 (Basic Animations)

[Configure Your Download] 했을 경우,[Basic Animations] (을)를 선택하고 있지 않으면 이하의 함수는 이용할 수 없습니다.

show( 속도) / show( 속도, 콜백 함수)
/ hide( 속도) / hide( 속도, 콜백 함수)

show() / hide() (은)는 요소의 사이즈를 변경하면서, 표시한다, 혹은 비표시로 합니다. 
표시중의 요소에 show() (을)를 사용하거나 그 역을 실시하면, 불필요한 애니메이션이 실행되는 일이 있습니다. 이것을 막기 위해서는, 요소의 지정에 :hidden ,:visible (을)를 이용해 주세요. 
속도는,"fast", "normal", "slow" 의 어느쪽이든을 지정하는지,ms(1/1000 초) 단위의 수치로 지정합니다. 
제2 인수에 콜백 함수를 지정하면, 애니메이션이 완료했을 때에 콜백 함수가 불려 갑니다.

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

$("#target_ref_effect_show_speed").show(2000);

$("#target_ref_effect_show_speed").hide("slow");

$("#target_ref_effect_show_speed:hidden").show("normal");

$("#target_ref_effect_show_speed:visible").hide("slow",

    function(){

        alert(  "animation done."  );

    });

slideDown( 속도) / slideDown( 속도, 콜백 함수)
/ slideUp( 속도) / slideUp( 속도, 콜백 함수)
/ slideToggle( 속도) / slideToggle( 속도, 콜백 함수)

slideDown() / slideUp() (은)는 요소를 슬라이드시키면서, 표시한다, 혹은 비표시로 합니다.slideToggle() (은)는, 표시·비표시를 바꿉니다. 
표시중의 요소에 slideDown() (을)를 사용하거나 그 역을 실시하면, 불필요한 애니메이션이 실행되는 일이 있습니다. 이것을 막기 위해서는, 요소의 지정에 :hidden ,:visible (을)를 이용해 주세요. 
속도는,"fast", "normal", "slow" 의 어느쪽이든을 지정하는지,ms(1/1000 초) 단위의 수치로 지정합니다. 
제2 인수에 콜백 함수를 지정하면, 애니메이션이 완료했을 때에 콜백 함수가 불려 갑니다.

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

$("#target_ref_effect_slide").slideDown(2000);

$("#target_ref_effect_slide").slideUp("slow");

$("#target_ref_effect_slide:hidden").slideDown("normal");

$("#target_ref_effect_slide:visible").slideUp("slow",

    function(){

        alert(  "animation done."  );

    });

$("#target_ref_effect_slide").slideToggle("normal");

fadeIn( 속도) / fadeIn( 속도, 콜백 함수)
/ fadeOut( 속도) / fadeOut( 속도, 콜백 함수)
/ fadeTo( 속도, 투명도) / fadeTo( 속도, 투명도, 콜백 함수)

fadeIn() / fadeOut() (은)는 요소를 페이드시켜, 표시한다, 혹은 비표시로 합니다. fadeTo() (은)는 지정된 투명도까지 애니메이션 시킵니다. 
대상이 되는 오브젝트는, 폭·높이가 벌써 결정하지 않으면 안됩니다. 
표시중의 요소에 fadeIn() (을)를 사용하거나 그 역을 실시하면, 불필요한 애니메이션이 실행되는 일이 있습니다. 이것을 막기 위해서는, 요소의 지정에 :hidden ,:visible (을)를 이용해 주세요. 
속도는,"fast", "normal", "slow" 의 어느쪽이든을 지정하는지,ms(1/1000 초) 단위의 수치로 지정합니다. 
제2 인수 또는 제3 인수에 콜백 함수를 지정하면, 애니메이션이 완료했을 때에 콜백 함수가 불려 갑니다.

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

$("#target_ref_effect_fade").fadeIn(2000);

$("#target_ref_effect_fade").fadeOut("slow");

$("#target_ref_effect_fade:hidden").fadeIn("normal");

$("#target_ref_effect_fade:visible").fadeOut("slow",

    function(){

        alert(  "animation done."  );

    });

$("#target_ref_effect_fade").fadeTo("slow", 0.5);

$("#target_ref_effect_fade").fadeTo("slow", 0.1);

animate( 파라미터, 속도, 콜백 함수)

높이, 투명도등의 파라미터를 지정하고, 애니메이션을 시키는 메소드입니다. 
파라미터에는,"height", "top", "opacity" 등을, 어떻게 변화시킬까 "show", "hide", 수치로 지정합니다. 숫자의 지정은 left/top 등에 대해 잘 움직이지 않는 것이 있는 것 같습니다. 
속도는,"fast", "normal", "slow" 의 어느쪽이든을 지정하는지,ms(1/1000 초) 단위의 수치로 지정합니다. 
제3 인수에 콜백 함수를 지정하면, 애니메이션이 완료했을 때에 콜백 함수가 불려 갑니다.

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

// 1

회라도show/hide

(을)를 실시하면,CSS

의 설정에 overflow: hidden 

(이)가 더해져 동작이 변화합니다.

// overflow:hidden 

하지만 없는 경우(최초 상태)에서는, 폭이 좁아지면 개행을 해 높이가 바뀝니다.

// overflow:hidden 

하지만 있는 경우(show/hide

후 )에서는, 폭이 좁아지면, 표시할 수 없는 부분은 숨습니다.

// width

변경으로 높이를 바꾸고 싶지 않은 경우는,CSS

정의에 주의해 주세요.

$("#target_ref_effect_animate").animate({

    width: 100

}, "slow");

$("#target_ref_effect_animate").animate({

    width: 500

}, "slow");

$("#target_ref_effect_animate").animate({

    opacity: 'show',

    height: 'show'

}, "slow");

$("#target_ref_effect_animate").animate({

    opacity: 'hide',

    height: 'hide'

}, "slow");

확장 이벤트 (Advanced Events)

[Configure Your Download] 했을 경우,[Advanced Events] (을)를 선택하고 있지 않으면 이하의 함수는 이용할 수 없습니다.

event( 함수)
/ unevent( 함수) / unevent()
oneevent( 함수)

이벤트의 설정을 실시합니다. HTML (으)로의 onclick / onfocus 등과 같은 일을,JavaScript 옆으로부터 설정할 수 있습니다. 
이탤릭의event 에, 설정하고 싶은 이벤트명을 기술합니다. 기술할 수 있는 이벤트는 이하와 같습니다.

blur,focus,load,resize,scroll,unload,click,dblclick, mousedown,mouseup,mousemove,mouseover,mouseout,change,reset,select, submit,keydown,keypress,keyup,error

event() 그리고 이벤트에 함수를 묶습니다. 
unevent() 그리고, 이벤트가 묶어를 해제합니다.함수를 지정하지 않으면, 모든 묶어가 해제됩니다. 
oneevent() (은)는, 이벤트에 함수를 묶습니다만, 한 번 이벤트가 발생하면 묶어가 해제됩니다. 
여러 차례 묶으면, 그 회수만 함수가 실행되는 것에 주의해 주세요.

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

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

    alert(  "clicked!"  );

});

// 

이 샘플을 실행 후, 위의 점선의 단락을 클릭해 보세요.

$("#target_ref_event").unclick();

$("#target_ref_event").oneclick(function(){

    alert(  "clicked!"  );

});

// 

이 샘플을 실행 후, 위의 점선의 단락을 클릭해 보세요.

// 

최초의1

회만alert

하지만 팝업 합니다.

ready( 함수)

$(document).ready( 함수) 의 형태로 이용해, 문서가 로드 되었을 때에 초기화 처리를 실행합니다. 
이 긴 문자열 대신에, 짧고 $( 함수) (이)라고 쓸 수 있기 때문에, 이쪽을 이용하는 것을 추천합니다.

$(function(){

    // HTML

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

});

$(document).ready(function(){

    // HTML

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

});

hover(over 함수,out 함수)

마우스 오버 처리를 행하기 위한 이벤트를 설정합니다. 
마우스가 대상 오브젝트에 들어갔을 때에 over 함수 하지만 불려 가 나왔을 때에 out 함수 하지만 불려 갑니다.

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

$("#target_ref_event_hover").hover(function(){

    // 

대상 오브젝트에 들어갔다

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

}, function(){

    // 

대상 오브젝트로부터 빠졌다

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

});

// 

이 샘플을 실행 후, 위의 점선의 단락에 마우스 커서를 이동해 보세요.

toggle( 함수1, 함수2)

대상 오브젝트가 클릭될 때마다, 함수1 , 함수2 (을)를 교대로 호출합니다.

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

$("#target_ref_event_toggle").toggle(function(){

    // (0

(으)로부터 세어)

짝수 번째의 클릭

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

}, function(){

    //(0

(으)로부터 세어)

홀수 번째의 클릭

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

});

// 

이 샘플을 실행 후, 위의 점선의 단락을 클릭해 보세요.

Ajax (Basic AJAX)

[Configure Your Download] 했을 경우,[Basic AJAX] (을)를 선택하고 있지 않으면 이하의 함수는 이용할 수 없습니다. 
여러가지 메소드를 이용했다Ajax 메소드 테스트 페이지 도 참조해 주세요.

load(url,params,callback)

Ajax 그리고 리모트의 파일을 읽어들여, 옮겨놓습니다. 
callback 함수를 지정했을 경우, 제1 인수에 리모트의 파일 내용, 제2 인수에 스테이터스가 돌아갑니다. 스테이터스는,"success" 인가 "error" 의 어느 쪽인지입니다. 
params (을)를 지정했을 경우는POST 메소드, 지정하지 않는 경우는GET 메소드가 됩니다.

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

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

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

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

});

$("#target_ref_ajax_load").load("notfound.html", function(html, status){

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

});

Ajax 메소드 테스트 페이지 도 참조해 주세요.

loadIfModified(url,params,callback)

load (와)과 같은 동작을 합니다만, 같다URL 에 대해서 여러 차례 loadIfModified() 했을 경우에, 2 번째 이후에 If-Modified-Since 헤더 첨부로 리퀘스트를 실시합니다. 만약 리모트의 파일이 갱신되어 있지 않은 경우,DOM 요소의 치환 하행 깨지지 않습니다. 
리모트의 파일의 갱신을 정기적으로 체크하는 경우에 이용할 수 있습니다. 
callback 함수를 지정했을 경우, 제1 인수에 리모트의 파일 내용, 제2 인수에 스테이터스가 돌아갑니다. 스테이터스는,"success" 인가 "notmodified" 인가 "error" 의 머지않아인가입니다. 
params (을)를 지정했을 경우는POST 메소드, 지정하지 않는 경우는GET 메소드가 됩니다.

Ajax 메소드 테스트 페이지 도 참조해 주세요.

$.get(url,params,callback)

Ajax 그리고 리모트의 파일을GET 메소드로 읽어들여, 파일 내용을 돌려줍니다. 
인수의 지정 방법은 $.load() (와)과 같습니다.

Ajax 메소드 테스트 페이지 도 참조해 주세요.

$.getIfModified(url,params,callback)

Ajax 그리고 리모트의 파일을GET 메소드로 읽어들여, 파일 내용을 돌려줍니다. 
인수의 지정 방법은 $.loadIfModified() (와)과 같습니다.

Ajax 메소드 테스트 페이지 도 참조해 주세요.

$.post(url,params,callback)

Ajax 그리고 리모트의 파일을POST 메소드로 읽어들여, 파일 내용을 돌려줍니다. 
인수의 지정 방법은 $.load() (와)과 같습니다.

Ajax 메소드 테스트 페이지 도 참조해 주세요.

$.ajaxTimeout(Timeout)

Ajax 계의 함수·메소드의 타임 아웃을ms 단위(1/1000 초)로 지정합니다. 0 (을)를 지정했을 경우는, 타임 아웃 처리를 실시하지 않습니다. 디폴트에서는0 하지만 설정되어 있습니다. 
타임 아웃 시간 기다려도 리퀘스트가 완료하지 않는 경우,error 취급이 됩니다. 
hello_timeout.cgi 하5 초간 응답을 돌려주지 않는다CGI 입니다. 브라우저의 캐쉬를 막기 위해서, 파라미터를 추가하고 있습니다.

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

$.ajaxTimeout(2000); // 

단위는ms

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

    timekey: 1

    }, function(text, status) {

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

});

$.ajaxTimeout(0); // 0

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

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

    timekey: 1

    }, function(text, status) {

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

});

Ajax 메소드 테스트 페이지 도 참조해 주세요.

ajaxStart( 콜백 함수) / ajaxStop( 콜백 함수)
/ ajaxComplete( 콜백 함수) / ajaxError( 콜백 함수) / ajaxSuccess( 콜백 함수)

Ajax 호출해에 관한 글로벌인 콜백 함수를 설정합니다. 
읽기중에 애니메이션을 표시시키는, 등의 목적으로 이용할 수 있습니다. 
Ajax 리퀘스트가 실행중이 되었을 때에 ajaxStart 의 콜백이 불려 가 모든 리퀘스트의 실행이 완료했을 때에 ajaxStop 의 콜백이 불려 갑니다. 
동시에 복수의 리퀘스트가 실행되었을 경우,ajaxStart/ajaxStop (은)는 최초와 마지막에1 회씩 불려 갑니다. 
ajaxComplete / ajaxError / ajaxSuccess (은)는,Ajax 리퀘스트가 완료·실패·성공했을 때에, 리퀘스트마다 불려 갑니다. 
1 회의 리퀘스트로,ajaxComplete 하지만1 회와ajaxError/ajaxSuccess 의 어느 쪽인지가1 회 불려 갑니다.

$("#loading").ajaxStart(function(){

    $(this).show();

});

$("#loading").ajaxStop(function(){

    $(this).hide();

});

Ajax 메소드 테스트 페이지 도 참조해 주세요. 
ajaxStart/ajaxStop 그리고 화면상부에 애니메이션을 표시하고 있습니다.

유틸리티 함수

유틸리티 함수군입니다.$.method 그렇다고 하는 형식에서 이용할 수 있게 되어 있습니다.

$.each( 오브젝트/ 배열, 함수)

오브젝트 또는 배열의 모든 요소에 대해서, 지정한 함수를 호출합니다. 
배열에 대해서 실행했을 경우, 함수의 제1 인수에 배열의 첨자(0 시작)이,this 에 요소가 건네받습니다. 
오브젝트에 대해서 실행했을 경우, 함수의 제1 인수에 키가,this 에 값이 건네받습니다.

// 

배열의 경우

$.each(["

있어","

","

하"], function(i){

    alert(  "

배열[" + i + "] = " + this  );

});

// 

오브젝트의 경우

$.each({ key1: "value1", key2: "value2" }, function(i){

    alert(  "

인수: " + i + "n

치: " + this  );

});

$.extend( 오브젝트1, 오브젝트2)

오브젝트1 에 오브젝트2 의 내용을 더합니다. 
계승을 실시할 때에 이용할 수 있습니다.

var settings = { key1: 1, key2: 2 };

var add = { key2: "

아", key3 : "

있어" };

$.extend(settings, add);

$.each(settings, function(i) {

    alert(  "

인수: " + i + "n

치: " + this  );

});

$.grep( 배열, 함수, 반전 플래그)

배열의 각 요소에 대해서 함수를 실행해, 그 결과에 의해서 배열로부터 요소를 꺼냅니다. 원래의 배열은 변경되지 않습니다. 
반전 플래그가false 의 경우는, 함수의 실행 결과가 true 의 요소를 꺼냅니다. 반전 플래그가true 의 경우, 그 거꾸로 됩니다. 생략 했을 경우, 반전 플래그는 false (으)로서 다루어집니다.

var data = [1,2,3,4];

var data2 = $.grep(data, function(i){

    return (i % 2 == 0);

});

$.each(data2, function(i){

    alert(  "

배열[" + i + "] = " + this  );

});

var data = [1,2,3,4];

var data2 = $.grep(data, function(i){

    return (i % 2 == 0);

}, true);

$.each(data2, function(i){

    alert(  "

배열[" + i + "] = " + this  );

});

$.map( 배열, 함수)

배열의 각 요소에 대해서 함수를 실행해, 그 함수의 반환값의 배열을 돌려줍니다. 원래의 배열은 변경되지 않습니다. 
함수가 값을 돌려주면 그 값이 그대로 반환값에 포함됩니다. 함수가undefined (을)를 돌려주었을 경우는 반환값에는 포함되지 않습니다. 함수가 배열을 돌려주었을 경우는, 배열 오브젝트가 아니고, 각각의 값이 반환값의 배열에 추가됩니다.

var data = [1,2,3];

var data2 = $.map(data, function(i){

    return i * 10;

});

$.each(data2, function(i){

    alert(  "

배열[" + i + "] = " + this  );

});

var data = [1,2,3];

var data2 = $.map(data, function(i){

	if(i == 2) {

		return undefined;

	}

	return i * 10;

});

$.each(data2, function(i){

    alert(  "

배열[" + i + "] = " + this  );

});

var data = [1,2];

var data2 = $.map(data, function(i){

	return [i*10, i*100];

});

$.each(data2, function(i){

    alert(  "

배열[" + i + "] = " + this  );

});

$.merge( 배열1, 배열2)

지정되었다2 개의 배열을 머지 합니다만, 중복은 없앱니다. 원래의 배열은 양쪽 모두 변경되지 않습니다. 
중복이 있는 경우, 우선 배열1 의 내용이 모두 돌려주어진 후, 배열2 중 배열1 (와)과 중복되지 않은 것이 돌려주어집니다. 배열1 중(안)에서 중복 하고 있는 요소나, 배열2 중(안)에서 중복 하고 있는 요소는, 존재하는 개수분 돌려주어집니다.

var data1 = [1,2];

var data2 = [3,4];

var mergedata = $.merge(data1, data2);

$.each(mergedata, function(i){

    alert(  "

배열[" + i + "] = " + this  );

});

var data1 = [1,2,1];

var data2 = [4,2,3,1,3];

var mergedata = $.merge(data1, data2);

$.each(mergedata, function(i){

    alert(  "

배열[" + i + "] = " + this  );

});

$.trim( 문자열)

문자열의 전후에 있는 공백을 없앤 문자열을 돌려줍니다.

var str = "  

안녕하세요  ";

alert(  "[" + str + "]"  );

str = $.trim(str);

alert(  "[" + str + "]"  );

// 

탭이나 개행도 공백으로 간주해집니다

var str = "t

안녕하세요n";

alert(  "[" + str + "]"  );

str = $.trim(str);

alert(  "[" + str + "]"  );

// 

전각 공백도 없앨 수 있습니다

var str = "

　안녕하세요　";

alert(  "[" + str + "]"  );

str = $.trim(str);

alert(  "[" + str + "]"  );

크로스 브라우저 함수

크로스 브라우저를 위한 함수군입니다. 아마 가까운 시일내에 코어에 추가된다고 생각합니다만, 현단계에서는 사용할 수 없습니다.

height()

오브젝트의 높이를 취득합니다. 
임의의jQuery 오브젝트,$(document) ,$(window) 에 대해서 이용할 수 있습니다. jQuery 오브젝트에 대해서 사용하면, 최초의 요소의 CSS 의 높이를 돌려줍니다. $(document) 에 대해서 사용하면, 문서의 높이(innerHeight ), $(window) 에 대해서 사용하면, 표시 영역의 높이를 돌려줍니다.

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

alert(  $("#target_ref_cross_height").height()  );

alert(  $(document).height()  );

alert(  $(window).height()  );

width()

오브젝트의 폭을 취득합니다. 
임의의jQuery 오브젝트,$(document) ,$(window) 에 대해서 이용할 수 있습니다. jQuery 오브젝트에 대해서 사용하면, 최초의 요소의 CSS 의 폭을 돌려줍니다. $(document) 에 대해서 사용하면, 문서의 폭(innerWidth ), $(window) 에 대해서 사용하면, 표시 영역의 폭을 돌려줍니다.

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

alert(  $("#target_ref_cross_width").width()  );

alert(  $(document).width()  );

alert(  $(window).width()  );

innerHeight()

오브젝트의 높이를 취득합니다. 
임의의jQuery 오브젝트,$(document) ,$(window) 에 대해서 이용할 수 있습니다. jQuery 오브젝트에 대해서 사용하면, 최초의 요소의 보더를 포함하지 않는 높이를 돌려줍니다. $(document) 에 대해서 사용하면, 문서의 높이(innerHeight ), $(window) 에 대해서 사용하면, 표시 영역의 높이를 돌려줍니다.

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

alert(  $("#target_ref_cross_innerheight").innerHeight()  );

alert(  $(document).innerHeight()  );

alert(  $(window).innerHeight()  );

innerWidth()

오브젝트의 높이를 취득합니다. 
임의의jQuery 오브젝트,$(document) ,$(window) 에 대해서 이용할 수 있습니다. jQuery 오브젝트에 대해서 사용하면, 최초의 요소의 보더를 포함하지 않는 폭을 돌려줍니다. $(document) 에 대해서 사용하면, 문서의 폭(innerWidth ), $(window) 에 대해서 사용하면, 표시 영역의 폭을 돌려줍니다.

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

alert(  $("#target_ref_cross_innerwidth").innerwidth()  );

alert(  $(document).innerwidth()  );

alert(  $(window).innerwidth()  );

outerHeight()

오브젝트의 높이를 취득합니다. 
임의의jQuery 오브젝트,$(document) ,$(window) 에 대해서 이용할 수 있습니다. jQuery 오브젝트에 대해서 사용하면, 최초의 요소의 보더를 포함한 높이를 돌려줍니다. $(document) 에 대해서 사용하면, 문서의 높이(outerHeight ), $(window) 에 대해서 사용하면, 표시 영역의 높이를 돌려줍니다.

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

alert(  $("#target_ref_cross_outerheight").outerHeight()  );

alert(  $(document).outerHeight()  );

alert(  $(window).outerHeight()  );

outerWidth()

오브젝트의 높이를 취득합니다. 
임의의jQuery 오브젝트,$(document) ,$(window) 에 대해서 이용할 수 있습니다. jQuery 오브젝트에 대해서 사용하면, 최초의 요소의 보더를 포함한 폭을 돌려줍니다. $(document) 에 대해서 사용하면, 문서의 폭(outerWidth ), $(window) 에 대해서 사용하면, 표시 영역의 폭을 돌려줍니다.

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

alert(  $("#target_ref_cross_outerwidth").outerwidth()  );

alert(  $(document).outerwidth()  );

alert(  $(window).outerwidth()  );

scrollLeft() / scrollTop()

오른쪽 또는 아래에 스크롤 된 양을 취득합니다. 
overflow:auto 의 요소를 가지는 임의의jQuery 오브젝트,$(document) ,$(window) 에 대해서 이용할 수 있습니다. jQuery 오브젝트에 대해서 사용하면, 최초의 요소의 스크롤 위치를 돌려줍니다.다만, 요소는 overflow:auto 일 필요가 있습니다. $(document) 에 대해서 사용하면, 문서에 대한 스크롤 위치,$(window) 에 대해서 사용하면, 표시 영역에 대한 스크롤 위치를 돌려줍니다.

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

alert(  $("#target_ref_cross_scroll").scrollLeft()  );

alert(  $("#target_ref_cross_scroll").scrollTop()  );

alert(  $(document).scrollLeft()  );

alert(  $(document).scrollTop()  );

alert(  $(window).scrollLeft()  );

alert(  $(window).scrollTop()  );

마스터페이지를 사용하건 하지 않건 FindControl을 사용해서 현재 사용자가 선택한 체크박스의 값을 
알 수 있다. 예를 들면 아래와 같이 DataList컨트롤을 사용해서 코딩을 하고 바인딩을 했다고 하면 데이타리스트컨트롤에 바인딩한 Checkbox컨트롤의 선택된 값을 알아와야 하는 경우 다음과 같은 코드를 사용할 수 있다.

<%@ Page Language="C#" MasterPageFile="~/TestMulti/testMaster.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="TestMulti_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<asp:DataList ID="DataList1" runat="server" Width="300">
        <HeaderTemplate>
            <table>
                <tr>
                    <td>선택</td>
                    <td>이름</td>
                    <td>설명</td>
                </tr>
        </HeaderTemplate>
        <ItemTemplate>
                <tr>
                    <td><asp:CheckBox ID="chk" runat="server" Text="선택" /></td>
                    <td><%#Eval("Name")%></td>
                    <td><%#Eval("Description")%></td>
                </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:DataList>
    
    <br />
    
    <asp:Button ID="btnTest" runat="server" Text="체크된 값 가져오기" OnClick="btnTest_Click" />
    <br />
    <asp:Literal ID="ltrScript" runat="server"></asp:Literal>
    
</asp:Content>

각 행에서 값을 체크하면 아래와 같이 어떤 값들이 체크되었는지 알 수 있다. 

출처 : http://blog.naver.com/newcomsa/30019305168