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 문자열", 문맥)
$("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() );
사용사 설정을 자유롭게 할 수 있다는 점이 좋네요..
