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 에 갈아넣습니다.

이 단락은 입니다.

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 요소를 삭제합니다.

이 단락은, 입니다.

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

empty()

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

이 단락은, 입니다.

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

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

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

이 단락은, 입니다.

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

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

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

이 단락은, 입니다.

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

appendTo("CSS/Xpath 문자열")

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

이 단락은, 입니다.

이 단락은, 입니다.

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

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

이 단락은, 입니다.

이 단락은, 입니다.

$("#target_ref_dom_appendto_copy").clone()
    .appendTo("#target_ref_dom_appendto_copy2");

prependTo("CSS/Xpath 문자열")

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

이 단락은, 입니다.

이 단락은, 입니다.

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

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

이 단락은, 입니다.

이 단락은, 입니다.

$("#target_ref_dom_prependto_copy").clone()
    .prependTo("#target_ref_dom_prependto_copy2");

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

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

이 단락은, 입니다.

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

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

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

이 단락은, 입니다.

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

insertBefore("CSS/Xpath 문자열")

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

이 단락은, 입니다.

이 단락은, 입니다.

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

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

이 단락은, 입니다.

이 단락은, 입니다.

$("#target_ref_dom_insertBefore_copy").clone()
    .insertBefore("#target_ref_dom_insertBefore_copy2");

insertAfter("CSS/Xpath 문자열")

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

이 단락은, 입니다.

이 단락은, 입니다.

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

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

이 단락은, 입니다.

이 단락은, 입니다.

$("#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 요소를 삽입합니다.

이 단락은, 입니다.

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

항목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() (은)는 지정된 요소를 표시 상태로부터 비표시 상태로 변경합니다. 벌써 비표시 상태이면 아무것도 하지 않습니다.

이 단락은 입니다.

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

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

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 인수에 콜백 함수를 지정하면, 애니메이션이 완료했을 때에 콜백 함수가 불려 갑니다.

이 단락은 입니다.

$("#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 인수에 콜백 함수를 지정하면, 애니메이션이 완료했을 때에 콜백 함수가 불려 갑니다.

이 단락은 입니다.

$("#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 인수에 콜백 함수를 지정하면, 애니메이션이 완료했을 때에 콜백 함수가 불려 갑니다.

이 단락은 입니다.

$("#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 인수에 콜백 함수를 지정하면, 애니메이션이 완료했을 때에 콜백 함수가 불려 갑니다.

이 단락은 입니다.

// 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() (은)는, 이벤트에 함수를 묶습니다만, 한 번 이벤트가 발생하면 묶어가 해제됩니다.
여러 차례 묶으면, 그 회수만 함수가 실행되는 것에 주의해 주세요.

이 단락은 입니다.

$("#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 함수 하지만 불려 갑니다.

이 단락은 입니다.

$("#target_ref_event_hover").hover(function(){
    // 
대상 오브젝트에 들어갔다
    $(this).addClass("background_red");
}, function(){
    // 
대상 오브젝트로부터 빠졌다
    $(this).removeClass("background_red");
});
// 
이 샘플을 실행 후, 위의 점선의 단락에 마우스 커서를 이동해 보세요.

toggle( 함수1, 함수2)

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

이 단락은 입니다.

$("#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 메소드가 됩니다.

이 단락은, 입니다.

$("#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 입니다. 브라우저의 캐쉬를 막기 위해서, 파라미터를 추가하고 있습니다.

이 단락은 입니다.

$.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) 에 대해서 사용하면, 표시 영역의 높이를 돌려줍니다.

이 단락은 입니다.

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

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

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

width()

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

이 단락은 입니다.

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

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

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

innerHeight()

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

이 단락은 입니다.

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

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

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

innerWidth()

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

이 단락은 입니다.

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

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

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

outerHeight()

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

이 단락은 입니다.

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

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

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

outerWidth()

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

이 단락은 입니다.

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

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

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

scrollLeft() / scrollTop()

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

이 단락은 입니다.

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

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

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

번호	제목	날짜	조회 수
200	PHP에서의 대칭 암호화/복호화 ― 간단한 예제에서 DB 입/출력까지	2018.09.14	3548
199	PHP에서 자료, 데이터의 타입을 확인하는 방법, gettype()	2018.08.29	2447
198	PHP에서 모든 세션 정보를 화면에 출력하는 방법	2018.08.29	2693
197	한글이 깨져서 나올 때 - iconv	2018.08.29	3933
196	날짜/시간함수 정리	2018.08.29	2429
195	웹서버조회 소스	2018.07.24	4543
194	헤더이용 다운로드 받을시 바로열기부분 소스	2018.07.24	7320
193	키를 이용한 암호화/복호화 함수입니다.	2018.07.24	5741
192	MySQL테이블의 내용을 엑셀파일(xls)로 다운로드 하기	2018.07.24	4798
191	날짜계산 몇일까지.. [ ex)4 일전 new 표시 ]	2018.07.24	4523
190	게시판 내용 숨김 클릭시 내용 출력 [ 참고 ]	2018.07.24	4767
189	마우스 오버시 사진변환, 파일에러시 대체이미지 적용(소스일부)	2018.07.24	4584
188	PHP 소스코드 인코딩(암호화)하기	2018.07.19	6643
187	gcm 푸시 알림 php 테스트	2018.07.19	5582
186	PHP 특정 디렉토리에 있는 파일 갯수 구하기	2018.07.19	5450
185	fcm 푸시 알림 php 테스트	2018.07.19	6044
184	쿠폰번호 발행 업데이트판. (간단한 클래스화[PHP4 기준] 등...)	2018.07.19	6020
183	날짜, 시간 포맷하기 (PHP)	2018.07.04	5230
182	AJAX를 활용하여 JSON 댓글 처리하기 (PHP)	2018.07.04	8454
181	PHP 파일크기 단위 붙이기 (용량 변환) file size conversion source code	2018.07.04	5793

로그인

다국어

검색

LANGUAGE

프로그램언어

프로그램언어

jQuery 개발자를 위한 메모 - 레퍼런스

단축키

단축키

jQuery 개발자를 위한 메모 - 레퍼런스

레퍼런스

$()

$("CSS/Xpath 문자열")

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

$(jQuery 오브젝트)

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

jQuery 오브젝트 조작

size() / length

get()

get(N)

[N]

each( 함수)

이벤트

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

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

trigger(" 이벤트명")

DOM( 기본)

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

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

text()

DOM( 속성)

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

val() / val( 치)

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

DOM(DOM 조작)

remove()

empty()

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

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

appendTo("CSS/Xpath 문자열")

prependTo("CSS/Xpath 문자열")

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

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

insertBefore("CSS/Xpath 문자열")

insertAfter("CSS/Xpath 문자열")

clone()

wrap(HTML) / wrap(DOM 요소)

remove("CSS/XPath 문자열")

DOM(jQuery 오브젝트 조작)

end()

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

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

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

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

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

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

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

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

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

contains( 문자열)

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

CSS

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

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

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

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

효과

hide() / show()

toggle()

기본 효과 (Basic Animations)

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

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

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

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

확장 이벤트 (Advanced Events)

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

ready( 함수)

hover(over 함수,out 함수)

toggle( 함수1, 함수2)

Ajax (Basic AJAX)

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

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

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

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

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

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

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