본문 바로가기

Paul Work/HTML

JQuery 레퍼런스

==========================================================================================================
자료출처 : http://blog.naver.com/rainyray/30068037948
자료 스크랩에 대해 문제가 된다면 삭제 토록 하겠습니다.
연락처 :
baboty7@paran.com
==========================================================================================================

jQuery 개발자를 위한 메모 - 레퍼런스
레퍼런스
$()
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) (와)과 나팔 할 필요가 있습니다.

단락1

단락2

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 개전 상태에 되돌립니다.

단락1

단락2

단락3

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 지정으로 더욱 좁힙니다.
문자열의 배열로 지정했을 경우, 어느 쪽인가에 매치하는 것에 좁힙니다.
호출시 상태는 스택에 보존됩니다.

단락1

단락2

단락3

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 지정에 매치하는 것을 추출합니다.
호출시 상태는 스택에 보존됩니다.

항목1
항목2
항목a
항목b
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() (와)과 달리, 그 요소의 전의 요소에 옮겨놓습니다.

항목1
항목2
항목a
항목b
단락1

단락2

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 회 밖에 보존되지 않습니다.

항목1
항목2
항목a
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 회 밖에 보존되지 않습니다.

항목1
항목2
항목a
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 회 밖에 보존되지 않습니다.

항목1
항목2
항목a
// 이 샘플은 처리가 무겁습니다.// 다이얼로그가 화면을 초과했을 경우,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 회 밖에 보존되지 않습니다.

항목1
항목2
항목a
단락

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 요소의 집합을, 지정한 문자열을 텍스트로 가지는 요소에 좁힙니다.
호출시 상태는 스택에 보존됩니다.

항목1-1
항목1-2
항목2-1
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) 의 같은 형식에서 범위를 지정할 수 없습니다.
호출시 상태는 스택에 보존됩니다.

항목1-1
항목1-2
단락1

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()  );