$()

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