2010. 4. 7. 00:10

jquery

------------------ 1

$()

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

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

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

이 단락은 입니다.

$("#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()  );




 
 
















 
 
 
------------------ 2
 
 







 
 
<jQuery Core>
1. jQuery( html )  Returns: jQuery
jQuery( html ), 실행후 jQuery객체를 반환
Create DOM elements on-the-fly from the provided String of raw HTML.
주어진 
html을 가지고 빠르게 문서 원소를 생성한다. 
그리고 jQuery객체로서 그 것을 반환한다.
이말은 그것을 이어서 jQuery의 
다른 함수와 함께 사용가능하다는 뜻이다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("<div><p>Hello</p></div>").appendTo("body");
  
});
  </script>
</head>
<body>
</body>
</html>

2. jQuery( elements )  Returns: jQuery
jQuery( 원소 ) jQuery( 원소.원소.원소 ), 
실행후 jQuery객체를 반환
Wrap jQuery functionality around a single or multiple DOM Element(s).
하나 
또는 다단계의 문서원소로서 사용할수 있다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $(document.body).css( 
"background", "black" );
  });
  </script>
</head>
<body>
</body>
</html>

3. jQuery( callback )  Returns: jQuery
jQuery( 콜백함수 ), 실행후 jQuery객체를 
반환
A shorthand for $(document).ready().
$()은 $(document).ready() 의 짧은 표현으로 
사용가능하다.
$(document).ready() 은 문서가 사용가능한 시점을 자동으로 인식하여 주어진 콜백 함수를 
동작시킨다.
콜백함수란 지정된 행위가 끝난다음 자동적으로 실행될 함수를 의미한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(function(){
   $(document.body).css( "background", "black" );
  });
  
</script>
</head>
<body>
</body>
</html>

4. each( callback )  Returns: jQuery
each( 콜백함수 ),  실행후 jQuery객체를 반환
Execute a function within the context of every matched element.
매치 되어진 모든 
원소에 대해 주어진 콜백 함수를 실행한다. 루프의 의미이다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $(document.body).click(function () {
     $("div").each(function (i) 
{
       if (this.style.color != "blue") {
         this.style.color = 
"blue";
       } else {
         this.style.color = "";
       }
  
   });
   });
  });
  </script>
  <style>
  div { color:red; 
text-align:center; cursor:pointer;
       font-weight:bolder; width:300px; 
}
  </style>
</head>
<body>
  <div>Click 
here</div>
  <div>to iterate through</div>
  
<div>these divs.</div>
</body>
</html>

5. size( )  Returns: Number
size( ), 실행후 숫자를 반환
The number of elements in the jQuery object.
매치되어진 원소들의 갯수를 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $(document.body).click(function () {
     
$(document.body).append($("<div>"));
     var n = $("div").size();
  
   $("span").text("There are " + n + " divs." +
                    "Click to 
add more.");
   }).click(); // trigger the click to start
  });
  </script>
  <style>
  body { cursor:pointer; 
}
  div { width:50px; height:30px; margin:5px; float:left;
       
background:blue; }
  span { color:red; }
  
</style>
</head>
<body>
  
<span></span>
  
<div></div>
</body>
</html>

6. length  Returns: Number
length, 실행후 숫자를 반환
The number of elements in the jQuery object.
매치되어진 원소들의 갯수를 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $(document.body).click(function () {
     
$(document.body).append($("<div>"));
     var n = $("div").length;
  
   $("span").text("There are " + n + " divs." +
                    "Click to 
add more.");
   }).trigger('click'); // trigger the click to start
  });
  </script>
  <style>
  body { cursor:pointer; 
}
  div { width:50px; height:30px; margin:5px; float:left;
       
background:green; }
  span { color:red; }
  
</style>
</head>
<body>
  
<span></span>
  
<div></div>
</body>
</html>

7. get( )  Returns: Array<Element>
get( ), 실행후 원소 배열 반환
Access all matched DOM elements.
매치되는 모든 문서 원소들을 배열로 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   function disp(divs) {
     var a = [];
     for (var i = 0; i < 
divs.length; i++) {
       a.push(divs[i].innerHTML);
     }
     
$("span").text(a.join(" "));
   }
   disp( $("div").get().reverse() );
  });
  </script>
  <style>
  span { color:red; }
  
</style>
</head>
<body>
  Reversed - 
<span></span>
  <div>One</div>
  
<div>Two</div>
  
<div>Three</div>
</body>
</html>

8. get( index )  Returns: Element
get( 인덱스 ), 실행후 매치 되는 원소를 반환
Access a single matched DOM element at a specified index in the matched 
set.
매치되는 원소들 중 주어진 인덱스에 해당하는 하나의 원소만 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("*", document.body).click(function (e) {
     
e.stopPropagation();
     var domEl = $(this).get(0);
     
$("span:first").text("Clicked on - " + domEl.tagName);
   });
  });
  </script>
  <style>
  span { color:red; }
  
div { background:yellow; }
  
</style>
</head>
<body>
  <span> 
</span>
  <p>In this paragraph is an 
<span>important</span> section</p>
  <div><input 
type="text" /></div>
</body>
</html>

9. index( subject )  Returns: Number
index( 객체 ), 실행후 숫자를 반환
Searches every matched element for the object and returns the index of the 
element, if found, starting with zero.
매치되어진 원소들에 대해 주어진 객체와 동일한것을 검색하여, 

존재하면 그 원소들중에 몇번째에 해당하는가 하는 인덱스 번호를 반환한다. 
인덱스는 0부터 시작한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("div").click(function () {
     // this is the dom element 
clicked
     var index = $("div").index(this);
     $("span").text("That 
was div index #" + index);
   });
  });
  </script>
  <style>
  div { background:yellow; 
margin:5px; }
  span { color:red; }
  
</style>
</head>
<body>
  <span>Click a 
div!</span>
  <div>First div</div>
  <div>Second 
div</div>
  <div>Third 
div</div>
</body>
</html>

10. jQuery.fn.extend( object )  Returns: jQuery
jQuery.fn.extend( 객체), 실행후 
jQuery객체를 반환
Extends the jQuery element set to provide new methods (used to make a typical 
jQuery plugin).
제이쿼리에 새로운 함수를 확장한다.(플러그인으로 만들어 사용한다.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    
               "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  jQuery.fn.extend({
   check: function() {
     return 
this.each(function() { this.checked = true; });
   },
   uncheck: 
function() {
     return this.each(function() { this.checked = false; 
});
   }
  });
  $(function(){
   $("#button1").click(function(){
     $('input').check();
   });
   $("#button2").click(function(){
     $('input').uncheck();
   });
  });
  </script>
  
<style>
  div { background:yellow; margin:5px; }
  span { color:red; 
}
  
</style>
</head>
<body>
<form>
<input 
type="checkbox" name="">
<input type="checkbox" 
name="">
<input type="checkbox" name="">
<input 
type="checkbox" name="">
<input type="checkbox" 
name="">
<input type="checkbox" 
name="">
</form>
<input type='button' id='button1' 
value='전체선택'>
<input type='button' id='button2' 
value='전체해제'>
</body>
</html>

11. jQuery.extend( object )  Returns: jQuery
jQuery.fn.extend( 객체), 실행후 
jQuery객체를 반환
Extends the jQuery object itself.
제이쿼리 자체를 확장
아직은 잘 모르겟음

14. jQuery.noConflict( )  Returns: jQuery
jQuery.noConflict( ),  실행후 
jQuery객체를 반환
Run this function to give control of the $ variable back to whichever library 
first implemented it.
아직은 잘 모르겠음

15. jQuery.noConflict( extreme )  Returns: jQuery
jQuery.noConflict( 
extreme ), 실행후 jQuery객체를 반환
Revert control of both the $ and jQuery variables to their original owners. 
Use with discretion.
아직은 잘 모르겠음



<Selectors>=>객체 선책
1. #id  Returns: Element
#아이디, 실행후 원소 반환
Matches a single element with the given id attribute.
주어진 아이디에 매치되는 원소하나를 
찾아 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("#myDiv").css("border","3px solid red");
  });
  </script>
  
<style>
  div {
   width: 90px;
   height: 90px;
   
float:left;
   padding: 5px;
   margin: 5px;
   background-color: 
#EEEEEE;
  }
  </style>
</head>
<body>
  
<div id="notMe"><p>id="notMe"</p></div>
  <div 
id="myDiv">id="myDiv"</div>
</body>
</html>

2. element  Returns: Array<Element>
원소명, 실행후 원소 배열 반환
Matches all elements with the given name.
주어진 원소명에 매치되는 모든 원소를 배열로 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("div").css("border","3px solid red");
  });
  </script>
  
<style>
  div,span {
   width: 60px;
   height: 60px;
   
float:left;
   padding: 10px;
   margin: 10px;
   background-color: 
#EEEEEE;
  }
  </style>
</head>
<body>
  
<div>DIV1</div>
  <div>DIV2</div>
  
<span>SPAN</span>
</body>
</html>

3. .class  Returns: Array<Element>
클래스명, 실행후 원소배열로 반환
Matches all elements with the given class.
주어진 클래스명에 매치되는 모든 원소를 배열로 
반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$(".myClass").css("border","3px solid red");
  });
  </script>
  
<style>
  div,span {
   width: 150px;
   height: 60px;
   
float:left;
   padding: 10px;
   margin: 10px;
   background-color: 
#EEEEEE;
  }
  </style>
</head>
<body>
  
<div class="notMe">div class="notMe"</div>
  <div 
class="myClass">div class="myClass"</div>
  <span 
class="myClass">span 
class="myClass"</span>
</body>
</html>

4. *  Returns: Array<Element>
모든것, 실행후 원소 배열로 반환
Matches all elements.
매치되는 모든 원소를 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("*").css("border","3px 
solid red");
  });
  </script>
  <style>
  div,span,p 
{
   width: 150px;
   height: 60px;
   float:left;
   padding: 
10px;
   margin: 10px;
   background-color: #EEEEEE;
  }
  
</style>
</head>
<body>
  
<div>DIV</div>
  <span>SPAN</span>
  <p>P 
<button>Button</button></p>
</body>
</html>

5. selector1, selector2, selectorN  Returns: 
Array<Element>
selector1, selector2, selectorN, 실행후 원소배열로 반환
Matches the combined results of all the specified selectors.
주어진 것들에 대해 
매치되는 모든 원소를 배열로 반환
구분자는 ,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("div,span,p.myClass").css("border","3px solid red");
  });
  
</script>
  <style>
  div,span,p {
   width: 130px;
   
height: 60px;
   float:left;
   padding: 3px;
   margin: 2px;
   
background-color: #EEEEEE;
   font-size:14px;
  }
  
</style>
</head>
<body>
  
<div>div</div>
  <p class="myClass">p 
class="myClass"</p>
  <p class="notMyClass">p 
class="notMyClass"</p>
  
<span>span</span>
</body>
</html>

6. ancestor descendant  Returns: Array<Element>
조상 자손, 실행후 원소 배열로 
반환
Matches all descendant elements specified by "descendant" of elements 
specified by "ancestor".
주어진 조상에 주어진 자손을 가진 모든 자손을 배열로 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("form 
input").css("border", "2px dotted blue");
  });
  </script>
  
<style>
  body { font-size:14px; }
  form { border:2px green solid; 
padding:2px; margin:0;
        background:#efe; }
  div { color:red; 
}
  fieldset { margin:1px; padding:3px; }
  
</style>
</head>
<body>
  <form>
   
<div>Form is surrounded by the green outline</div>
   
<label>Child:</label>
   <input name="name" />
   
<fieldset>
     <label>Grandchild:</label>
     
<input name="newsletter" />
   </fieldset>
  
</form>
  Sibling to form: <input name="none" 
/>
</body>
</html>

7. parent > child  Returns: Array<Element>
조상 > 자손, 실행후 원소 배열 
반환
Matches all child elements specified by "child" of elements specified by 
"parent".
주어진 조상에 포함된 주어진 자손에 매치되는 일단계 자손들만 모두 배열로 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("#main > 
*").css("border", "3px double red");
  });
  </script>
  
<style>
  body { font-size:14px; }
  span#main { display:block; 
background:yellow; height:110px; }
  button { display:block; float:left; 
margin:2px;
          font-size:14px; }
  div { width:90px; height:90px; 
margin:5px; float:left;
       background:#bbf; font-weight:bold; }
  
div.mini { width:30px; height:30px; background:green; }
  
</style>
</head>
<body>
  <span 
id="main">
   <div></div>
   
<button>Child</button>
   <div 
class="mini"></div>
   <div>
     <div 
class="mini"></div>
     <div class="mini"></div>
   
</div>
   
<div><button>Grand</button></div>
   
<div><span>A Span <em>in</em> 
child</span></div>
   <span>A Span in 
main</span>
  </span>
</body>
</html>

8. prev + next  Returns: Array<Element>
앞 뒤, 실행후 원소배열 반환
Matches all next elements specified by "next" that are next to elements 
specified by "prev".
주어진 앞원소와 뒤원소에 순차적으로 매치 되는 뒤원소들을 모두 배열로 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("label + 
input").css("color", "blue").val("Labeled!")
  });
  </script>
</head>
<body>
  <form>
   
<label>Name:</label>
   <input name="name" />
   
<fieldset>
     <label>Newsletter:</label>
     
<input name="newsletter" />
   </fieldset>
  
</form>
  <input name="none" 
/>
</body>
</html>

9. prev ~ siblings  Returns: Array<Element>
앞원소~형제 원소, 실행후 원소배열 
반환
Matches all sibling elements after the "prev" element that match the 
filtering "siblings" selector.
주어진 앞원소와 형제인 뒤원소를 찾아 모두 배열로 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("#prev ~ 
div").css("border", "3px groove blue");
  });
  </script>
  
<style>
  div,span {
   display:block;
   width:80px;
   
height:80px;
   margin:5px;
   background:#bbffaa;
   float:left;
   
font-size:14px;
  }
  div#small {
   width:60px;
   
height:25px;
   font-size:12px;
   background:#fab;
  }
  
</style>
</head>
<body>
  <div>div (doesn't 
match since before #prev)</div>
  <div 
id="prev">div#prev</div>
  <div>div sibling</div>
  
<div>div sibling <div id="small">div 
neice</div></div>
  <span>span sibling (not 
div)</span>
  <div>div 
sibling</div>
</body>
</html>

10. :first  Returns: Element
첫번째, 실행후 원소 반환
Matches the first selected element.
매치되는 원소들중 첫번째 것만 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("tr:first").css("font-style", "italic");
  });
  </script>
  
<style>
  td { color:blue; font-weight:bold; }
  
</style>
</head>
<body>
  <table>
   
<tr><td>Row 1</td></tr>
   <tr><td>Row 
2</td></tr>
   <tr><td>Row 
3</td></tr>
  
</table>
</body>
</html>

11. :last  Returns: Element
마지막, 실행후 원소 반환
Matches the last selected element.
매치되는 원소들중 마지막 것만 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});
  
});
  </script>
</head>
<body>
  <table>
   
<tr><td>First Row</td></tr>
   
<tr><td>Middle Row</td></tr>
   
<tr><td>Last Row</td></tr>
  
</table>
</body>
</html>

12. :not(selector)  Returns: Array<Element>
아니다, 실행후 원소 배열 반환
Filters out all elements matching the given selector.
주어진 것에 해당하지 않는 모든 것을 
반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("input:not(:checked) + span").css("background-color", "yellow");
   
$("input").attr("disabled", "disabled");
  });
  </script>
</head>
<body>
  <div>
   <input 
type="checkbox" name="a" />
   <span>Mary</span>
  
</div>
  <div>
   <input type="checkbox" name="b" 
/>
   <span>Paul</span>
  </div>
  
<div>
   <input type="checkbox" name="c" checked="checked" 
/>
   <span>Peter</span>
  
</div>
</body>
</html>

13. :even  Returns: Array<Element>
짝수, 실행후 원소 배열 반환
Matches even elements, zero-indexed.
매치된 원소들 중에서 인덱스가 짝수인것 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("tr:even").css("background-color", "#bbbbff");
  });
  
</script>
  <style>
  table {
   background:#eeeeee;
  
}
  </style>
</head>
<body>
  <table 
border="1">
   <tr><td>Row with Index 
#0</td></tr>
   <tr><td>Row with Index 
#1</td></tr>
   <tr><td>Row with Index 
#2</td></tr>
   <tr><td>Row with Index 
#3</td></tr>
  
</table>
</body>
</html>

14. :odd  Returns: Array<Element>
홀수, 실행후 원소 배열 반환
Matches odd elements, zero-indexed.
매치된 원소들 중에서 인덱스가 홀수인것 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("tr:odd").css("background-color", "#bbbbff");
  });
  
</script>
  <style>
  table {
   background:#f3f7f5;
  
}
  </style>
</head>
<body>
  <table 
border="1">
   <tr><td>Row with Index 
#0</td></tr>
   <tr><td>Row with Index 
#1</td></tr>
   <tr><td>Row with Index 
#2</td></tr>
   <tr><td>Row with Index 
#3</td></tr>
  
</table>
</body>
</html>

15. :eq(index)  Returns: Element
eq(인덱스), 실행후 원소  반환
Matches a single element by its index.
매치된 원소들 중에서 주어진 인덱스에 매치되는 원소 한개를 
반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("td:eq(2)").css("text-decoration", "blink");
  });
  </script>
</head>
<body>
  <table border="1">
   
<tr><td>TD #0</td><td>TD #1</td><td>TD 
#2</td></tr>
   <tr><td>TD #3</td><td>TD 
#4</td><td>TD #5</td></tr>
   <tr><td>TD 
#6</td><td>TD #7</td><td>TD 
#8</td></tr>
  
</table>
</body>
</html>

16. :gt(index)  Returns: Array<Element>
초과, 실행후 원소 배열 반환
Matches all elements with an index above the given one.
매치된 원소들 중에서 인덱스로 
주어진 것보다 큰 인덱스 들을 모두 배열로 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("td:gt(4)").css("text-decoration", "line-through");
  });
  
</script>
</head>
<body>
  <table border="1">
   
<tr><td>TD #0</td><td>TD #1</td><td>TD 
#2</td></tr>
   <tr><td>TD #3</td><td>TD 
#4</td><td>TD #5</td></tr>
   <tr><td>TD 
#6</td><td>TD #7</td><td>TD 
#8</td></tr>
  
</table>
</body>
</html>

17. :lt(index)  Returns: Array<Element>
미만, 실행후 원소 배열 반환
Matches all elements with an index below the given one.
매치된 원소들 중에서 인덱스로 
주어진 것보다 작은 인덱스 들을 모두 배열로 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("td:lt(4)").css("color", "red");
  });
  </script>
</head>
<body>
  <table border="1">
   
<tr><td>TD #0</td><td>TD #1</td><td>TD 
#2</td></tr>
   <tr><td>TD #3</td><td>TD 
#4</td><td>TD #5</td></tr>
   <tr><td>TD 
#6</td><td>TD #7</td><td>TD 
#8</td></tr>
  
</table>
</body>
</html>

18. :header  Returns: Array<Element>
헤더, 실행후 원소 배열 반환
Matches all elements that are headers, like h1, h2, h3 and so on.
매치되는 원소들 
중에서 h1, h2 ... 와 같은 헤더 태그들을 모두 배열로 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $(":header").css({ 
background:'#CCC', color:'blue' });
  });
  </script>
  
<style>
  body { font-size: 10px; font-family: Arial; }
  h1, h2 { 
margin: 3px 0; }
  </style>
</head>
<body>
  
<h1>Header 1</h1>
  <p>Contents 1</p>
  
<h2>Header 2</h2>
  <p>Contents 
2</p>
</body>
</html>

19. :animated  Returns: Array<Element>
움직인다, 실행후 원소 배열 반환
Matches all elements that are currently being animated.
매치된 원소들 중에서 애니메이션이 
동작하고 있는 것들을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("#run").click(function(){
     
$("div:animated").toggleClass("colored");
   });
   function animateIt() 
{
     $("#mover").slideToggle("slow", animateIt);
   }
   
animateIt();
  });
  </script>
  <style>
  div { background:yellow; 
border:1px solid #AAA; width:80px; height:80px; margin:5px; float:left; }
  
div.colored { background:green; }
  
</style>
</head>
<body>
  <button 
id="run">Run</button>
  <div></div>
  <div 
id="mover"></div>
  
<div></div>
</body>
</html>

20. :contains(text)  Returns: Array<Element>
포함, 실행후 원소 배열 반환
Matches elements which contain the given text.
매치된 원소들 중에서 주어진 텍스트를 포함하는 
것들을 모두 배열로 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("div:contains('John')").css("text-decoration", "underline");
  });
  
</script>
</head>
<body>
  <div>John Resig</div>
  
<div>George Martin</div>
  <div>Malcom John 
Sinclair</div>
  <div>J. 
Ohn
</body>
</html>

21. :empty  Returns: Array<Element>
비엇다. 실행후 원소 배열 반환
Matches all elements that are empty, be it elements or text.
매치된 원소들 중에서 
텍스트가 비어있는 것들을 모두 배열로 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("td:empty").text("Was 
empty!").css('background', 'rgb(255,220,200)');
  });
  
</script>
  <style>
  td { text-align:center; }
  
</style>
</head>
<body>
  <table 
border="1">
   <tr><td>TD 
#0</td><td></td></tr>
   <tr><td>TD 
#2</td><td></td></tr>
   
<tr><td></td><td>TD#5</td></tr>
  
</table>
</body>
</html>

22. :has(selector)  Returns: Array<Element>
has(selector), 실행후 원소 배열 
반환
Matches elements which contain at least one element that matches the 
specified selector.
매치된 원소들 중에서 주어진 것을 포함하는 것을 모두 배열로 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("div:has(p)").addClass("test");
  });
  </script>
  
<style>
  .test{ border: 3px inset red; }
  
</style>
</head>
<body>
  <div><p>Hello 
in a paragraph</p></div>
  <div>Hello again! (with no 
paragraph)</div>
</body>
</html>

23. :parent  Returns: Array<Element>
부모, 실행후 원소 배열 반환
Matches all elements that are parents - they have child elements, including 
text.
주어진 것이 부모인 것을 모두 받아온다, 비어있는 것은 포함 안함
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("td:parent").fadeTo(1500, 0.3);
  });
  </script>
  
<style>
td { width:40px; background:green; }
  
</style>
</head>
<body>
  <table 
border="1">
   <tr><td>Value 
1</td><td></td></tr>
   <tr><td>Value 
2</td><td></td></tr>
  
</table>
</body>
</html>

24. :hidden  Returns: Array<Element>
안보임, 실행후 원소 배열 반환
Matches all elements that are hidden, or input elements of type 
"hidden".
보이지 않는 모든 것들을 반환한다. none hidden  등, 추가로 input을 지정하면 인풋타입이 히든인것만 
받아온다
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   // in some browsers :hidden includes head, title, script, etc... so limit 
to body
   $("span:first").text("Found " + $(":hidden", document.body).length 
+
                        " hidden elements total.");
   
$("div:hidden").show(3000);
   $("span:last").text("Found " + 
$("input:hidden").length + " hidden inputs.");
  });
  </script>
  <style>
  div { width:70px; 
height:40px; background:#ee77ff; margin:5px; float:left; }
  span { 
display:block; clear:left; color:red; }
  .starthidden { display:none; }
  
</style>
</head>
<body>
  
<span></span>
  <div></div>
  <div 
style="display:none;">Hider!</div>
  <div></div>
  
<div class="starthidden">Hider!</div>
  
<div></div>
  <form>
   <input type="hidden" 
/>
   <input type="hidden" />
   <input type="hidden" 
/>
  </form>
  <span>
  
</span>
</body>
</html>

25. :visible  Returns: Array<Element>
보임, 실행후 원소 배열 반환
Matches all elements that are visible.
보이는 것들을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("div:visible").click(function () {
     $(this).css("background", 
"yellow");
   });
   $("button").click(function () {
     
$("div:hidden").show("fast");
   });
  });
  </script>
  <style>
  div { width:50px; 
height:40px; margin:5px; border:3px outset green; float:left; }
  
.starthidden { display:none; }
  
</style>
</head>
<body>
  <button>Show hidden 
to see they don't change</button>
  <div></div>
  
<div class="starthidden"></div>
  <div></div>
  
<div></div>
  <div 
style="display:none;"></div>
</body>
</html>

26. [attribute]  Returns: Array<Element>
속성, 실행후 원소 배열 반환
Matches elements that have the specified attribute.
주어진 속성을 가진 것들을 모두 
반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("div[id]").one("click", function(){
     var idString = 
$(this).text() + " = " + $(this).attr("id");
     
$(this).text(idString);
   });
  });
  </script>
</head>
<body>
  <div>no id</div>
  <div 
id="hey">with id</div>
  <div id="there">has an 
id</div>
  
<div>nope</div>
</body>
</html>

27. [attribute=value]  Returns: Array<Element>
속성=값, 실행후 원소 배열 
반환
Matches elements that have the specified attribute with a certain 
value.
주어진 속성과 주어진 값이 일치 하는 모든것들을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("input[name='newsletter']").next().text(" is newsletter");
  });
  
</script>
</head>
<body>
  <div>
   <input type="radio" 
name="newsletter" value="Hot Fuzz" />
   
<span>name?</span>
  </div>
  <div>
   
<input type="radio" name="newsletter" value="Cold Fusion" />
   
<span>name?</span>
  </div>
  <div>
   
<input type="radio" name="accept" value="Evil Plans" />
   
<span>name?</span>
  
</div>
</body>
</html>

28. [attribute!=value]  Returns: Array<Element>
속성!=값, 실행후 원소 배열 
반환
Matches elements that don't have the specified attribute with a certain 
value.
주어진 속성과 주어진 값이 일치 하지 않는 모든것들을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("input[name!='newsletter']").next().text(" is not newsletter");
  });
  
</script>
</head>
<body>
  <div>
   <input type="radio" 
name="newsletter" value="Hot Fuzz" />
   
<span>name?</span>
  </div>
  <div>
   
<input type="radio" name="newsletter" value="Cold Fusion" />
   
<span>name?</span>
  </div>
  <div>
   
<input type="radio" name="accept" value="Evil Plans" />
   
<span>name?</span>
  
</div>
</body>
</html>

29. [attribute^=value]  Returns: Array<Element>
속성^=값, 실행후 원소 배열 
반환
Matches elements that have the specified attribute and it starts with a 
certain value.
주어진 속성을 가지며 값이 주어진 값으로 시작되는 모든 것을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("input[name^='news']").val("news here!");
  });
  </script>
</head>
<body>
  <input name="newsletter" />
  
<input name="milkman" />
  <input name="newsboy" 
/>
</body>
</html>

30. [attribute$=value]  Returns: Array<Element>
속성$=값, 실행후 원소 배열 
반환
Matches elements that have the specified attribute and it ends with a certain 
value.
주어진 속성을 가지며 값이 주어진 값으로 끝나는 모든 것을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("input[name$='letter']").val("a letter");
  });
  </script>
</head>
<body>
  <input name="newsletter" />
  
<input name="milkman" />
  <input name="jobletter" 
/>
</body>
</html>

31. [attribute*=value]  Returns: Array<Element>
속성*=값, 실행후 원소 배열 
반환
Matches elements that have the specified attribute and it contains a certain 
value.
주어진 속성을 가지며 값이 주어진 값을 포함하는 모든 것을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("input[name*='man']").val("has man in it!");
  });
  </script>
</head>
<body>
  <input name="man-news" />
  
<input name="milkman" />
  <input name="letterman2" />
  
<input name="newmilk" />
</body>
</html>

32. [selector1][selector2][selectorN]  Returns: Array<Element>
속성들, 
실행후 원소 배열 반환
Matches elements that have the specified attribute and it contains a certain 
value.
속성을 여러개 지정할수도 있다. 매치되는 모든 것을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("input[id][name$='man']").val("only this one");
  });
  
</script>
</head>
<body>
  <input id="man-news" name="man-news" 
/>
  <input name="milkman" />
  <input id="letterman" 
name="new-letterman" />
  <input name="newmilk" 
/>
</body>
</html>

33. :nth-child(index/even/odd/equation)  Returns: Array<Element>
몇번째 
자식, 실행후 원소 배열 반환
Matches the nth-child of its parent or all its even or odd children.
인덱스나 
키워드로 자식을 지정하여 매치되는 것은 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("ul 
li:nth-child(2)").append("<span> - 2nd!</span>");
  });
  
</script>
  <style>
  div { float:left; }
  span { 
color:blue; }
  </style>
</head>
<body>
  
<div><ul>
   <li>John</li>
   
<li>Karl</li>
   <li>Brandon</li>
  
</ul></div>
  <div><ul>
   
<li>Sam</li>
  </ul></div>
  
<div><ul>
   <li>Glen</li>
   
<li>Tane</li>
   <li>Ralph</li>
   
<li>David</li>
  
</ul></div>
</body>
</html>

34. :first-child  Returns: Array<Element>
첫번째 자식, 실행후 원소 배열 반환
Matches the first child of its parent.
첫번째 자식에 매치되는 모든 것을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("div span:first-child")
       .css("text-decoration", 
"underline")
       .hover(function () {
             
$(this).addClass("sogreen");
           }, function () {
             
$(this).removeClass("sogreen");
           });
  });
  </script>
  <style>
  span { color:#008; }
  
span.sogreen { color:green; font-weight: bolder; }
  
</style>
</head>
<body>
  <div>
   
<span>John,</span>
   <span>Karl,</span>
   
<span>Brandon</span>
  </div>
  <div>
   
<span>Glen,</span>
   <span>Tane,</span>
   
<span>Ralph</span>
  
</div>
</body>
</html>

35. :last-child  Returns: Array<Element>
마지막 자식, 실행후 원소 배열 반환
Matches the last child of its parent.
마지막 자식에 매치되는 모든 것을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("div span:last-child")
       .css({color:"red", 
fontSize:"80%"})
       .hover(function () {
             
$(this).addClass("solast");
           }, function () {
             
$(this).removeClass("solast");
           });
  });
  </script>
  <style>
  span.solast { 
text-decoration:line-through; }
  
</style>
</head>
<body>
  <div>
   
<span>John,</span>
   <span>Karl,</span>
   
<span>Brandon,</span>
   <span>Sam</span>
  
</div>
  <div>
   <span>Glen,</span>
   
<span>Tane,</span>
   <span>Ralph,</span>
   
<span>David</span>
  
</div>
</body>
</html>

36. :only-child  Returns: Array<Element>
하나의 자식, 실행후 원소 배열 반환
Matches the only child of its parent.
하나의 자식으로만 이루어진 모든 것을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("div 
button:only-child").text("Alone").css("border", "2px blue solid");
  });
  
</script>
  <style>
  div { width:100px; height:80px; 
margin:5px; float:left; background:#b9e }
  
</style>
</head>
<body>
  <div>
   
<button>Sibling!</button>
   
<button>Sibling!</button>
  </div>
  <div>
   
<button>Sibling!</button>
  </div>
  <div>
   
None
  </div>
  <div>
   
<button>Sibling!</button>
   
<button>Sibling!</button>
   
<button>Sibling!</button>
  </div>
  <div>
   
<button>Sibling!</button>
  
</div>
</body>
</html>

37. :input  Returns: Array<Element>
인풋, 실행후 원소 배열 반환
Matches all input, textarea, select and button elements.
인풋, 텍스트에리어, 
셀렉트박스, 버튼들을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   var allInputs = $(":input");
   var formChildren = $("form > 
*");
   $("div").text("Found " + allInputs.length + " inputs and the form has 
" +
                            formChildren.length + " children.")
      
     .css("color", "red");
   $("form").submit(function () { return false; 
}); // so it won't submit
  });
  </script>
  <style>
  textarea { height:45px; 
}
  </style>
</head>
<body>
  <form>
   
<input type="button" value="Input Button"/>
   <input 
type="checkbox" />
   <input type="file" />
   <input 
type="hidden" />
   <input type="image" />
   <input 
type="password" />
   <input type="radio" />
   <input 
type="reset" />
   <input type="submit" />
   <input 
type="text" />
   
<select><option>Option<option/></select>
   
<textarea></textarea>
   <button>Button</button>
  
</form>
  <div>
  
</div>
</body>
</html>

38. :text  Returns: Array<Element>
텍스트, 실행후 원소 배열 반환
Matches all input elements of type text.
인풋타입이 텍스트인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   var input = $(":text").css({background:"yellow", border:"3px red 
solid"});
   $("div").text("For this type jQuery found " + input.length + 
".")
           .css("color", "red");
   $("form").submit(function () { 
return false; }); // so it won't submit
  });
  </script>
  <style>
  textarea { height:45px; 
}
  </style>
</head>
<body>
  <form>
   
<input type="button" value="Input Button"/>
   <input 
type="checkbox" />
   <input type="file" />
   <input 
type="hidden" />
   <input type="image" />
   <input 
type="password" />
   <input type="radio" />
   <input 
type="reset" />
   <input type="submit" />
   <input 
type="text" />
   
<select><option>Option<option/></select>
   
<textarea></textarea>
   <button>Button</button>
  
</form>
  <div>
  
</div>
</body>
</html>

39. :password  Returns: Array<Element>
패스워드, 실행후 원소 배열 반환
Matches all input elements of type password.
인풋타입이 패스워드인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   var input = $(":password").css({background:"yellow", border:"3px red 
solid"});
   $("div").text("For this type jQuery found " + input.length + 
".")
           .css("color", "red");
   $("form").submit(function () { 
return false; }); // so it won't submit
  });
  </script>
  <style>
  textarea { height:45px; 
}
  </style>
</head>
<body>
  <form>
   
<input type="button" value="Input Button"/>
   <input 
type="checkbox" />
   <input type="file" />
   <input 
type="hidden" />
   <input type="image" />
   <input 
type="password" />
   <input type="radio" />
   <input 
type="reset" />
   <input type="submit" />
   <input 
type="text" />
   
<select><option>Option<option/></select>
   
<textarea></textarea>
   <button>Button</button>
  
</form>
  <div>
  
</div>
</body>
</html>

40. :radio  Returns: Array<Element>
레디오, 실행후 원소 배열 반환
Matches all input elements of type radio.
인풋타입이 레디오인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   var input = $(":radio").css({background:"yellow", border:"3px red 
solid"});
   $("div").text("For this type jQuery found " + input.length + 
".")
           .css("color", "red");
   $("form").submit(function () { 
return false; }); // so it won't submit
  });
  </script>
  <style>
  textarea { height:45px; 
}
  </style>
</head>
<body>
  <form>
   
<input type="button" value="Input Button"/>
   <input 
type="checkbox" />
   <input type="file" />
   <input 
type="hidden" />
   <input type="image" />
   <input 
type="password" />
   <input type="radio" name="asdf" />
   
<input type="radio" name="asdf" />
   <input type="reset" 
/>
   <input type="submit" />
   <input type="text" 
/>
   
<select><option>Option<option/></select>
   
<textarea></textarea>
   <button>Button</button>
  
</form>
  <div>
  </div>
</body>

41. :checkbox  Returns: Array<Element>
체크박스, 실행후 원소 배열 반환
Matches all input elements of type checkbox.
인풋타입이 체크박스인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   var input = $(":checkbox").css({background:"yellow", border:"3px red 
solid"});
   $("div").text("For this type jQuery found " + input.length + 
".")
           .css("color", "red");
   $("form").submit(function () { 
return false; }); // so it won't submit
  });
  </script>
  <style>
  textarea { height:45px; 
}
  </style>
</head>
<body>
  <form>
   
<input type="button" value="Input Button"/>
   <input 
type="checkbox" />
   <input type="checkbox" />
   <input 
type="file" />
   <input type="hidden" />
   <input 
type="image" />
   <input type="password" />
   <input 
type="radio" />
   <input type="reset" />
   <input 
type="submit" />
   <input type="text" />
   
<select><option>Option<option/></select>
   
<textarea></textarea>
   <button>Button</button>
  
</form>
  <div>
  
</div>
</body>
</html>

42. :submit  Returns: Array<Element>
서브밋, 실행후 원소 배열 반환
Matches all input elements of type submit.
인풋타입이 서브밋인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   var input = $(":submit").css({background:"yellow", border:"3px red 
solid"});
   $("div").text("For this type jQuery found " + input.length + 
".")
           .css("color", "red");
   $("form").submit(function () { 
return false; }); // so it won't submit
  });
  </script>
  <style>
  textarea { height:45px; 
}
  </style>
</head>
<body>
  <form>
   
<input type="button" value="Input Button"/>
   <input 
type="checkbox" />
   <input type="file" />
   <input 
type="hidden" />
   <input type="image" />
   <input 
type="password" />
   <input type="radio" />
   <input 
type="reset" />
   <input type="submit" />
   <input 
type="text" />
   
<select><option>Option<option/></select>
   
<textarea></textarea>
   <button>Button</button>
  
</form>
  <div>
  
</div>
</body>
</html>

43. :image  Returns: Array<Element>
이미지, 실행후 원소 배열 반환
Matches all input elements of type image.
인풋타입이 이미지인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   var input = $(":image").css({background:"yellow", border:"3px red 
solid"});
   $("div").text("For this type jQuery found " + input.length + 
".")
           .css("color", "red");
   $("form").submit(function () { 
return false; }); // so it won't submit
  });
  </script>
  <style>
  textarea { height:45px; 
}
  </style>
</head>
<body>
  <form>
   
<input type="button" value="Input Button"/>
   <input 
type="checkbox" />
   <input type="file" />
   <input 
type="hidden" />
   <input type="image" />
   <input 
type="password" />
   <input type="radio" />
   <input 
type="reset" />
   <input type="submit" />
   <input 
type="text" />
   
<select><option>Option<option/></select>
   
<textarea></textarea>
   <button>Button</button>
  
</form>
  <div>
  
</div>
</body>
</html>

44.  :reset  Returns: Array<Element>
리셋, 실행후 원소 배열 반환
Matches all input elements of type reset.
인풋타입이 리셋인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   var input = $(":reset").css({background:"yellow", border:"3px red 
solid"});
   $("div").text("For this type jQuery found " + input.length + 
".")
           .css("color", "red");
   $("form").submit(function () { 
return false; }); // so it won't submit
  });
  </script>
  <style>
  textarea { height:45px; 
}
  </style>
</head>
<body>
  <form>
   
<input type="button" value="Input Button"/>
   <input 
type="checkbox" />
   <input type="file" />
   <input 
type="hidden" />
   <input type="image" />
   <input 
type="password" />
   <input type="radio" />
   <input 
type="reset" />
   <input type="submit" />
   <input 
type="text" />
   
<select><option>Option<option/></select>
   
<textarea></textarea>
   <button>Button</button>
  
</form>
  <div>
  
</div>
</body>
</html>

45. :button  Returns: Array<Element>
버튼, 실행후 원소 배열 반환
Matches all input elements of type button.
인풋타입이 버튼인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   var input = $(":button").css({background:"yellow", border:"3px red 
solid"});
   $("div").text("For this type jQuery found " + input.length + 
".")
           .css("color", "red");
   $("form").submit(function () { 
return false; }); // so it won't submit
  });
  </script>
  <style>
  textarea { height:45px; 
}
  </style>
</head>
<body>
  <form>
   
<input type="button" value="Input Button"/>
   <input 
type="checkbox" />
   <input type="file" />
   <input 
type="hidden" />
   <input type="image" />
   <input 
type="password" />
   <input type="radio" />
   <input 
type="reset" />
   <input type="submit" />
   <input 
type="text" />
   
<select><option>Option<option/></select>
   
<textarea></textarea>
   <button>Button</button>
  
</form>
  <div>
  
</div>
</body>
</html>

46. :file  Returns: Array<Element>
파일, 실행후 원소 배열 반환
Matches all input elements of type file.
인풋타입이 파일인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   var input = $(":file").css({background:"yellow", border:"3px red 
solid"});
   $("div").text("For this type jQuery found " + input.length + 
".")
           .css("color", "red");
   $("form").submit(function () { 
return false; }); // so it won't submit
  });
  </script>
  <style>
  textarea { height:45px; 
}
  </style>
</head>
<body>
  <form>
   
<input type="button" value="Input Button"/>
   <input 
type="checkbox" />
   <input type="file" />
   <input 
type="hidden" />
   <input type="image" />
   <input 
type="password" />
   <input type="radio" />
   <input 
type="reset" />
   <input type="submit" />
   <input 
type="text" />
   
<select><option>Option<option/></select>
   
<textarea></textarea>
   <button>Button</button>
  
</form>
  <div>
  
</div>
</body>
</html>

47. :hidden  Returns: Array<Element>
히든, 실행후 원소 배열 반환
Matches all elements that are hidden, or input elements of type 
"hidden".
인풋타입이 히든인 것을 모두 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   // in some browsers :hidden includes head, title, script, etc... so limit 
to body
   $("span:first").text("Found " + $(":hidden", document.body).length 
+
                        " hidden elements total.");
   
$("div:hidden").show(3000);
   $("span:last").text("Found " + 
$("input:hidden").length + " hidden inputs.");
  });
  </script>
  <style>
  div { width:70px; 
height:40px; background:#ee77ff; margin:5px; float:left; }
  span { 
display:block; clear:left; color:red; }
  .starthidden { display:none; }
  
</style>
</head>
<body>
  
<span></span>
  <div></div>
  <div 
style="display:none;">Hider!</div>
  <div></div>
  
<div class="starthidden">Hider!</div>
  
<div></div>
  <form>
   <input type="hidden" 
/>
   <input type="hidden" />
   <input type="hidden" 
/>
  </form>
  <span>
  
</span>
</body>
</html>

48. :enabled  Returns: Array<Element>
활성화? 사용가능?, 실행후 원소 배열 반환
Matches all elements that are enabled.
활성화된 모든 것들을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("input:enabled").val("this is it");
  });
  </script>
</head>
<body>
  <form>
   <input name="email" 
disabled="disabled" />
   <input name="id" />
  
</form>
</body>
</html>

49. :disabled  Returns: Array<Element>
비활성화? 사용불가능?, 실행후 원소 배열 
반환
Matches all elements that are disabled.
비활성화된 모든 것들을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("input:disabled").val("this is it");
  });
  </script>
</head>
<body>
  <form>
   <input name="email" 
disabled="disabled" />
   <input name="id" />
  
</form>
</body>
</html>

50. :checked  Returns: Array<Element>
체크됏음, 실행후 원소 배열 반환
Matches all elements that are checked.
인풋이 체크된 모든 것들을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   function countChecked() {
     var n = $("input:checked").length;
  
   $("div").text(n + (n == 1 ? " is" : " are") + " checked!");
   }
   
countChecked();
   $(":checkbox").click(countChecked);
  });
  </script>
  <style>
  div { color:red; }
  
</style>
</head>
<body>
  <form>
   
<input type="checkbox" name="newsletter" checked="checked" value="Hourly" 
/>
   <input type="checkbox" name="newsletter" value="Daily" 
/>
   <input type="checkbox" name="newsletter" value="Weekly" 
/>
   <input type="checkbox" name="newsletter" checked="checked" 
value="Monthly" />
   <input type="checkbox" name="newsletter" 
value="Yearly" />
  </form>
  
<div></div>
</body>
</html>

51. :selected  Returns: Array<Element>
선택되어짐, 실행후 원소 배열 반환
Matches all elements that are selected.
선택된 모든 것을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("select").change(function () {
         var str = "";
         
$("select option:selected").each(function () {
               str += 
$(this).text() + " ";
             });
         $("div").text(str);
    
   })
       .trigger('change');
  });
  </script>
  <style>
  div { color:red; }
  
</style>
</head>
<body>
  <select name="garden" 
multiple="multiple">
   <option>Flowers</option>
   
<option selected="selected">Shrubs</option>
   
<option>Trees</option>
   <option 
selected="selected">Bushes</option>
   
<option>Grass</option>
   <option>Dirt</option>
  
</select>
  
<div></div>
</body>
</html>



<Attributes>
1. attr( name )  Returns: Object
속성 실행후 객체 반환
Access a property on the first matched element. This method makes it easy to 
retrieve a property value from the first matched element. If the element does 
not have an attribute with such a name, undefined is returned.
주어진 속성명의 값을 
가져옴, 매치되는 첫번째 것만 가져옴
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   var title = $("em").attr("title");
   $("div").text(title);
  });
  </script>
  <style>
  em { color:blue; 
font-weight;bold; }
  div { color:red; }
  
</style>
</head>
<body>
  <p>
   Once there 
was a <em title="huge, gigantic">large</em> dinosaur...
  
</p>
  The title of the emphasis 
is:<div></div>
</body>
</html>

2. attr( properties )  Returns: jQuery
attr(속성배열) 실행후 jQuery객체를 반환
Set a key/value object as properties to all matched elements.
속성과 값들의 배열을 
지정하여 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("img").attr({
         src: "/images/hat.gif",
         title: 
"jQuery",
         alt: "jQuery Logo"
       });
   
$("div").text($("img").attr("alt"));
  });
  </script>
  <style>
  img { padding:10px; }
  
div { color:red; font-size:24px; }
  
</style>
</head>
<body>
  <img />
  <img 
/>
  <img />
  
<div></div>
</body>
</html>

3. attr( key, value )  Returns: jQuery
attr( 속성, 값 ) 실행후 jQuery객체를 반환
Set a single property to a value, on all matched elements.
하나의 속성과 하나의 값만 
지정하여 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("button:gt(0)").attr("disabled","disabled");
  });
  
</script>
  <style>
  button { margin:10px; }
  
</style>
</head>
<body>
  <button>0th 
Button</button>
  <button>1st Button</button>
  
<button>2nd 
Button</button>
</body>
</html>

4. attr( key, fn )  Returns: jQuery
attr(속성, 콜백함수) 실행후 jQuery 객체를 반환
Set a single property to a computed value, on all matched elements.
하나의 
속성과 콜백함수를 지정하여 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("img").attr("src", function() {
         return "/images/" + 
this.title;
       });
  });
  </script>
</head>
<body>
  <img title="hat.gif"/>
  <img 
title="hat-old.gif"/>
  <img 
title="hat2-old.gif"/>
</body>
</html>

5. removeAttr( name )  Returns: jQuery
속성 제거 실행후 jQuery 객체를 반환
Remove an attribute from each of the matched elements.
주어진 이름과 매치되는 속성을 
제거
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("button").click(function () {
     
$(this).next().removeAttr("disabled")
            .focus()
            
.val("editable now");
   });
  });
  </script>
</head>
<body>
  <button>Enable</button>
  
<input type="text" disabled="disabled" value="can't edit this" 
/>
</body>
</html>

6. addClass( class )  Returns: jQuery
클래스 추가 실행후 jQuery 객체 반환
Adds the specified class(es) to each of the set of matched elements.
주어진 
클래스 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("p:last").addClass("selected");
  });
  </script>
  
<style>
  p { margin: 8px; font-size:16px; }
  .selected { 
color:red; }
  .highlight { background:yellow; }
  
</style>
</head>
<body>
  
<p>Hello</p>
  <p>and</p>
  
<p>Goodbye</p>
</body>
</html>

7. removeClass( class )  Returns: jQuery
클래스 제거 실행후 JQuery 객체를 리턴
Removes all or the specified class(es) from the set of matched 
elements.
주어진 클래스 제거
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("p:even").removeClass("blue");
  });
  </script>
  
<style>
  p { margin: 4px; font-size:16px; font-weight:bolder; }
  
.blue { color:blue; }
  .under { text-decoration:underline; }
  .highlight 
{ background:yellow; }
  </style>
</head>
<body>
  
<p class="blue under">Hello</p>
  <p class="blue under 
highlight">and</p>
  <p class="blue under">then</p>
  
<p class="blue 
under">Goodbye</p>
</body>
</html>

8. toggleClass( class )  Returns: jQuery
클래스 추가 삭제 반복 실행후 jQuery 객체 리턴
Adds the specified class if it is not present, removes the specified class if 
it is present.
주어진 클래스를 추가 삭제를 반복한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("p").click(function () {
     $(this).toggleClass("highlight");
   
});
  });
  </script>
  <style>
  p { margin: 4px; 
font-size:16px; font-weight:bolder;
     cursor:pointer; }
  .blue { 
color:blue; }
  .highlight { background:yellow; }
  
</style>
</head>
<body>
  <p class="blue">Click 
to toggle</p>
  <p class="blue 
highlight">highlight</p>
  <p class="blue">on 
these</p>
  <p 
class="blue">paragraphs</p>
</body>
</html>

9. html( )  Returns: String
실행후 문자열을 반환
Get the html contents (innerHTML) of the first matched element. This property 
is not available on XML documents (although it will work for XHTML 
documents).
선택되어진 객체의 html을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("p").click(function () {
     var htmlStr = $(this).html();
     
$(this).text(htmlStr);
   });
  });
  </script>
  <style>
  p { margin:8px; 
font-size:20px; color:blue;
     cursor:pointer; }
  b { 
text-decoration:underline; }
  button { cursor:pointer; }
  
</style>
</head>
<body>
  <p>
   
<b>Click</b> to change the <span 
id="tag">html</span>
  </p>
  <p>
   to a <span 
id="text">text</span> node.
  </p>
  <p>
   This 
<button name="nada">button</button> does nothing.
  
</p>
</body>
</html>

10. html( val )  Returns: jQuery
실행후 jQuery 객체를 반환
Set the html contents of every matched element. This property is not 
available on XML documents (although it will work for XHTML documents).
매치되는 
모든 원소에 주어진 html을 넣는다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("div").html("<span 
class='red'>Hello <b>Again</b></span>");
  });
  
</script>
  <style>
  .red { color:red; }
  
</style>
</head>
<body>
  
<span>Hello</span>
  <div></div>
  
<div></div>
  
<div></div>
</body>
</html>

11. text( )  Returns: String
실행후 문자열 반환
Get the text contents of all matched elements.
선택되어진 객체의 문자열을 반환한다. 태그는 
제외된다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   var str = $("p:first").text();
   $("p:last").html(str);
  });
  </script>
  <style>
  p { color:blue; 
margin:8px; }
  b { color:red; }
  
</style>
</head>
<body>
  
<p><b>Test</b> Paragraph.</p>
  
<p></p>
</body>
</html>

12. text( val )  Returns: jQuery
실행후 jQuery 객체 반환
Set the text contents of all matched elements.
매치되는 모든 원소에 주어진 텍스트를 집어넣는다. 
html을 넣는다 해도 텍스트화 된다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("p").text("<b>Some</b> new text.");
  });
  
</script>
  <style>
  p { color:blue; margin:8px; }
  
</style>
</head>
<body>
  <p>Test 
Paragraph.</p>
</body>
</html>

13. val( )  Returns: String, Array
실행후 문자열이나 배열로 반환
Get the content of the value attribute of the first matched element.
첫번째 
매치되는 원소의 값을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   function displayVals() {
     var singleValues = 
$("#single").val();
     var multipleValues = $("#multiple").val() || 
[];
     $("p").html("<b>Single:</b> " +
                 
singleValues +
                 " <b>Multiple:</b> " +
        
         multipleValues.join(", "));
   }
   $("select").change(displayVals);
   displayVals();
  });
  </script>
  <style>
  p { color:red; margin:4px; 
}
  b { color:blue; }
  
</style>
</head>
<body>
  <p></p>
  
<select id="single">
   <option>Single</option>
   
<option>Single2</option>
  </select>
  <select 
id="multiple" multiple="multiple">
   <option 
selected="selected">Multiple</option>
   
<option>Multiple2</option>
   <option 
selected="selected">Multiple3</option>
  
</select>
</body>
</html>

14. val( val )  Returns: jQuery
jQuery 객체를 반환
Set the value attribute of every matched element.
매치되는 모든 원소에 주어진 값을 
적용한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("button").click(function () {
     var text = $(this).text();
     
$("input").val(text);
   });
  });
  </script>
  <style>
  button { margin:4px; 
cursor:pointer; }
  input { margin:4px; color:blue; }
  
</style>
</head>
<body>
  <div>
   
<button>Feed</button>
   <button>the</button>
   
<button>Input</button>
  </div>
  <input type="text" 
value="click a button" />
</body>
</html>

15. val( val )
반환 없음
Checks, or selects, all the radio buttons, checkboxes, and select options 
that match the set of values.
체크 박스, 셀렉트 박스 레디오 버튼 셀렉트 옵션 등에 값을 적용
레디오나 
체크박스 같은 경우는 값을 여러개 지정하여 할수 있다.
멀티플 같은 경우 배열로서 값을 지정할수 있다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("#single").val("Single2");
   $("#multiple").val(["Multiple2", 
"Multiple3"]);
   $("input").val(["check2", "radio1"]);
  });
  </script>
  <style>
  body { color:blue; }
  
</style>
</head>
<body>
  <select 
id="single">
   <option>Single</option>
   
<option>Single2</option>
  </select>
  <select 
id="multiple" multiple="multiple">
   <option 
selected="selected">Multiple</option>
   
<option>Multiple2</option>
   <option 
selected="selected">Multiple3</option>
  
</select><br/>
  <input type="checkbox" value="check1"/> 
check1
  <input type="checkbox" value="check2"/> check2
  <input 
type="radio" name="r" value="radio1"/> radio1
  <input type="radio" 
name="r" value="radio2"/> 
radio2
</body>
</html>


<Traversing>
1. eq( index )  Returns: jQuery
eq(인덱스) 실행후 jQuery 객체 반환
Reduce the set of matched elements to a single element.
매치되는 원소중 인덱스와 일치하는 
것 하나만 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("div").eq(2).addClass("red");
  });
  </script>
  <style>
  div { width:60px; 
height:60px; margin:10px; float:left;
       border:2px solid blue; }
  
.red { background:red; }
  
</style>
</head>
<body>
  
<div></div>
  <div></div>
  
<div></div>
  <div></div>
  
<div></div>
  
<div></div>
</body>
</html>

2. hasClass( class )  Returns: Boolean
클래스가 있나 없나 실행후 참거짓 리턴
Checks the current selection against a class and returns true, if at least 
one element of the selection has the given class.
매치되는 원소에 주어진 클래스가 존재하면 참, 
아니면 거짓을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("div").click(function(){
     if ( $(this).hasClass("protected") 
)
       $(this).animate({ left: -10 }, 75)
              .animate({ left: 
10 }, 75)
              .animate({ left: -10 }, 75)
              
.animate({ left: 10 }, 75)
              .animate({ left: 0 }, 75);
   
});
  });
  </script>
  <style>
  div { width: 80px; height: 
80px; background: #abc;
       position: relative; border: 2px solid 
black;
       margin: 20px 0px; float: left; left:0 }
  div.protected { 
border-color: red; }
  span { display:block; float:left; width:20px;
      
  height:20px; }
  </style>
</head>
<body>
  
<span></span><div class="protected"></div>
  
<span></span><div></div>
  
<span></span><div></div>
  
<span></span><div 
class="protected"></div>
</body>
</html>

3. filter( expr )  Returns: jQuery
실행후 jQuery 객체를 반환
Removes all elements from the set of matched elements that do not match the 
specified expression(s).
매치되는 원소들중 해당 필터 표현에 맞지 않는 것들은 제거하고 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("div").css("background", "#c8ebcc")
           
.filter(".middle")
           .css("border-color", "red");
  });
  </script>
  <style>
  div { width:60px; 
height:60px; margin:5px; float:left;
       border:2px white solid;}
  
</style>
</head>
<body>
  
<div></div>
  <div class="middle"></div>
  <div 
class="middle"></div>
  <div class="middle"></div>
  
<div class="middle"></div>
  
<div></div>
</body>
</html>

4. filter( fn )  Returns: jQuery
filter(함수) 실행후 jQuery 객체를 반환
Removes all elements from the set of matched elements that does not match the 
specified function.
매치되는 원소들중 해당 필터 함수에 맞지 않는 것들은 제거하고 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("div").css("background", "#b4b0da")
           .filter(function 
(index) {
                 return index == 1 || $(this).attr("id") == 
"fourth";
               })
           .css("border", "3px double 
red");
  });
  </script>
  <style>
  div { width:60px; 
height:60px; margin:5px; float:left;
       border:3px white solid; }
  
</style>
</head>
<body>
  <div 
id="first"></div>
  <div id="second"></div>
  <div 
id="third"></div>
  <div id="fourth"></div>
  <div 
id="fifth"></div>
  <div 
id="sixth"></div>
</body>
</html>

5. is( expr )  Returns: Boolean
존재 여부 실행후 참거짓 반환
Checks the current selection against an expression and returns true, if at 
least one element of the selection fits the given expression.
매치되는 원소들중 주어진 
표현식과 비교하여 일치 하면 참, 그렇지 않으면 거짓을 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("div").one('click', function () {
     if 
($(this).is(":first-child")) {
       $("p").text("It's the first 
div.");
     } else if ($(this).is(".blue,.red")) {
       
$("p").text("It's a blue or red div.");
     } else if 
($(this).is(":contains('Peter')")) {
       $("p").text("It's Peter!");
  
   } else {
       $("p").html("It's nothing 
<em>special</em>.");
     }
     
$("p").hide().slideDown("slow");
     $(this).css({"border-style": "inset", 
cursor:"default"});
   });
  });
  </script>
  <style>
  div { width:60px; 
height:60px; margin:5px; float:left;
       border:4px outset; 
background:green; text-align:center;
       font-weight:bolder; 
cursor:pointer; }
  .blue { background:blue; }
  .red { background:red; 
}
  span { color:white; font-size:16px; }
  p { color:red; 
font-weight:bolder; background:yellow;
     margin:3px; clear:left; 
display:none; }
  </style>
</head>
<body>
  
<div></div>
  <div class="blue"></div>
  
<div></div>
  <div class="red"></div>
  
<div><br/><span>Peter</span></div>
  <div 
class="blue"></div>
  <p> 
</p>
</body>
</html>

16. map( callback )  Returns: jQuery
map(콜백함수) 실행후 jQuery  객체 반환
Translate a set of elements in the jQuery object into another set of values 
in an array (which may, or may not, be elements).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("p").append( $("input").map(function(){
     return 
$(this).val();
   }).get().join(", ") );
  });
  </script>
  <style>
  p { color:red; }
  
</style>
</head>
<body>
  <p><b>Values: 
</b></p>
  <form>
   <input type="text" name="name" 
value="John"/>
   <input type="text" name="password" 
value="password"/>
   <input type="text" name="url" value="http://ejohn.org/"/>
  
</form>
</body>
</html>

17. not( expr )  Returns: jQuery
실행후 jQuery 객체 반환
Removes elements matching the specified expression from the set of matched 
elements.
매치되는 원소들중 표현식과 일치 하는 원소는 제거 하고 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("div").not(".green, #blueone")
           .css("border-color", 
"red");
  });
  </script>
  <style>
  div { width:60px; 
height:60px; margin:10px; float:left;
       background:yellow; border:2px 
solid white; }
  .green { background:#8f8; }
  .gray { background:#ccc; 
}
  #blueone { background:#99f; }
  
</style>
</head>
<body>
  
<div></div>
  <div id="blueone"></div>
  
<div></div>
  <div class="green"></div>
  <div 
class="green"></div>
  <div class="gray"></div>
  
<div></div>
</body>
</html>

18. slice( start, end )  Returns: jQuery
Selects a subset of the matched 
elements.
매치되어진 원소들 중에서 해당 시작인덱스와 끝 인덱스의 범위에 있는 인덱스의 원소들을 모두 배열로 반환한다.
끝 
인덱스를 지정하지 않으면 시작인덱스 부터 끝까지 배열로 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   function 
colorEm() {
     var $div = $("div");
     var start = 
Math.floor(Math.random() *
                            $div.length);
     
var end = Math.floor(Math.random() *
                          ($div.length - 
start)) +
                          start + 1;
     if (end == 
$div.length) end = undefined;
     $div.css("background", "");
     if 
(end) 
       $div.slice(start, end).css("background", "yellow");   
      
else
       $div.slice(start).css("background", "yellow");
     
     
$("span").text('$("div").slice(' + start +
                    (end ? ', ' + 
end : '') +
                    ').css("background", "yellow");');
   
}
   $("button").click(colorEm);
  });
  </script>
  <style>
  div { width:40px; 
height:40px; margin:10px; float:left;
       border:2px solid blue; }
  
span { color:red; font-weight:bold; }
  button { margin:5px; }
  
</style>
</head>
<body>
  <button>Turn slice 
yellow</button>
  <span>Click the button!</span>
  
<div></div>
  <div></div>
  
<div></div>
  <div></div>
  
<div></div>
  <div></div>
  
<div></div>
  <div></div>
  
<div></div>
</body>
</html>

19. add( expr )  Returns: jQuery
add( expr ), 실행후 jQuery 객체 반환
Adds more elements, matched by the given expression, to the set of matched 
elements.
매치된 원소에 새로운 원소나 원소들을 추가한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("div").css("border", "2px solid red")
           .add("p")
           
.css("background", "yellow");
  });
  </script>
  <style>
  div { width:60px; 
height:60px; margin:10px; float:left; }
  p { clear:left; font-weight:bold; 
font-size:16px; 
     color:blue; margin:0 10px; padding:2px; }
  
</style>
</head>
<body>
  
<div></div>
  <div></div>
  
<div></div>
  <div></div>
  
<div></div>
  <div></div>
  <p>Added this... 
(notice no border)</p>
</body>
</html>

20. children( expr )  Returns: jQuery
children( expr ), 실행후 jQuery 객체 
반환
Get a set of elements containing all of the unique children of each of the 
matched set of elements.
선택되어진 원소의 자식들을 반환
이해가 잘 안됨
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("#container").click(function (e) {
     $("*").removeClass("hilite");
  
   var $kids = $(e.target).children();
     var len = 
$kids.addClass("hilite").length;
     $("#results span:first").text(len);
     $("#results 
span:last").text(e.target.tagName);
     e.preventDefault();
     return false;
   });
  });
  </script>
  <style>
  body { font-size:16px; 
font-weight:bolder; }
  div { width:130px; height:82px; margin:10px; 
float:left;
       border:1px solid blue; padding:4px; }
  #container { 
width:auto; height:105px; margin:0; float:none;
       border:none; }
  
.hilite { border-color:red; }
  #results { display:block; color:red; }
  p 
{ margin:10px; border:1px solid transparent; }
  span { color:blue; 
border:1px solid transparent; }
  input { width:100px; }
  em { border:1px 
solid transparent; }
  a { border:1px solid transparent; }
  b { 
border:1px solid transparent; }
  button { border:1px solid transparent; 
}
  </style>
</head>
<body>
  <div 
id="container">
   <div>
     <p>This <span>is the 
<em>way</em> we</span> 
     write <em>the</em> 
demo,</p>
   </div>
   <div>
     <a 
href="#"><b>w</b>rit<b>e</b></a> the 
<span>demo,</span> <button>write 
     the</button> 
demo,
   </div>
   <div>
     This <span>the way we 
<em>write</em> the <em>demo</em> so</span>
     
<input type="text" value="early" /> in
   </div>
   
<p>
     <span>t</span>he 
<span>m</span>orning.
     <span id="results">Found 
<span>0</span> children in 
<span>TAG</span>.</span>
   </p>
  
</div>
</body>
</html>

21. contents( )  Returns: jQuery
contents( ), 실행후 jQuery 객체 반환
Find all the child nodes inside the matched elements (including text nodes), 
or the content document, if the element is an iframe.
매치된 원소들중에서 비어있지 않는 자식들을 
모두 가져옴
이해가 잘 안됨
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("p").contents().not("[@nodeType=1]").wrap("<b/>");
  });
  
</script>
  
</head>
<body>
  <p>Hello <a 
href="Johnhttp://ejohn.org/">John</a>, how 
are you doing?</p>
</body>
</html>

22. find( expr )  Returns: jQuery
find( expr ), 실행후 jQuery 객체 반환
Searches for all elements that match the specified expression. This method is 
a good way to find additional descendant elements with which to 
process.
매치되어진 원소들 중에서 주어진 것에 매치되는 것을 찾아 그것들을 모두 배열로 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("p").find("span").css('color','red');
  });
  </script>
  

</head>
<body>
  <p><span>Hello</span>, 
how are you?</p>
  <p>Me? I'm 
<span>good</span>.</p>
</body>
</html>

23. next( expr )  Returns: jQuery
next( expr ), 실행후 jQuery 객체 반환
Get a set of elements containing the unique next siblings of each of the 
matched set of elements.
매치되어진 원소와 형제 관계인 바로 다음 원소를 찾아 객체로 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("button").click(function () {
     var txt = $(this).text();
     
$(this).next().text(txt);
   });
  });
  </script>
  <style>
  span { color:blue; 
font-weight:bold; }
  button { width:100px; }
  
</style>
</head>
<body>
  
<div><button>First</button> - 
<span></span></div>
  
<div><button>Second</button> - 
<span></span></div>
  
<div><button>Third</button> - 
<span></span></div>
</body>
</html>

24. nextAll( expr )  Returns: jQuery
nextAll( expr ), 실행후 jQuery 객체 반환
Find all sibling elements after the current element.
현재 매치되어진 원소와 형제 관계에 
있는 모든 원소를 찾아 객체로 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("div:first").nextAll().addClass("after");
  });
  </script>
  
<style>
  div { width: 80px; height: 80px; background: #abc; 
       
border: 2px solid black; margin: 10px; float: left; }
  div.after { 
border-color: red; }
  </style>
</head>
<body>
  
<div></div>
  <div></div>
  
<div></div>
  
<div></div>
</body>
</html>

25. parent( expr )  Returns: jQuery
parent( expr ), 실행후 jQuery 객체 반환
Get a set of elements containing the unique parents of the matched set of 
elements.
매치되어진 원소의 유일한 부모를 찾아 객체로 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   $("*", 
document.body).each(function () {
     var parentTag = 
$(this).parent().get(0).tagName;
     
$(this).prepend(document.createTextNode(parentTag + " > "));
   });
  });
  </script>
  <style>
  div,p { margin:10px; 
}
  </style>
</head>
<body>
  <div>div, 

   <span>span, </span>
   <b>b </b>
  
</div>
  <p>p, 
   <span>span, 
     <em>em 
</em>
   </span>
  </p>
  <div>div, 
   
<strong>strong, 
     <span>span, </span>
     
<em>em, 
       <b>b, </b>
     </em>
   
</strong>
   <b>b </b>
  
</div>
</body>
</html>

26. parents( expr )  Returns: jQuery
parents( expr ), 실행후 jQuery 객체 반환
Get a set of elements containing the unique ancestors of the matched set of 
elements (except for the root element).
매치되어진 원소의 유일한 조상들을 찾아 객체로 반환한다.
The matched elements can be filtered with an optional expression.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   var parentEls = 
$("b").parents()
                         .map(function () { 
            
                   return this.tagName; 
                             })
  
                       .get().join(", ");
   $("b").append("<strong>" + 
parentEls + "</strong>");
  });
  </script>
  <style>
  b { color:blue; }
  
strong { color:red; }
  </style>
</head>
<body>
  
<div>
   <p>
     <span>
       <b>My parents 
are: </b>
     </span>
   </p>
  
</div>
</body>
</html>


27. prev( expr )  Returns: jQuery
prev( expr ), 실행후 jQuery 객체 반환
Get a set of elements containing the unique previous siblings of each of the 
matched set of elements.
매치되어진 원소 보다 앞에 있는 유니크한 형제 원소를 찾아 객체로 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   var $curr = 
$("#start");
   $curr.css("background", "#f99");
   
$("button").click(function () {
     $curr = $curr.prev();
     
$("div").css("background", "");
     $curr.css("background", "#f99");
   
});
  });
  </script>
  <style>
  div { width:40px; 
height:40px; margin:10px;
       float:left; border:2px blue solid; 
    
   padding:2px; }
  span { font-size:14px; }
  p { clear:left; 
margin:10px; }
  </style>
</head>
<body>
  
<div></div>
  <div></div>
  
<div><span>has child</span></div>
  
<div></div>
  <div></div>
  
<div></div>
  <div id="start"></div>
  
<div></div>
  <p><button>Go to 
Prev</button></p>
</body>
</html>

28. prevAll( expr )  Returns: jQuery
prevAll( expr ), 실행후 jQuery 객체 반환
Find all sibling elements before the current element.
매치되어진 원소보다 이전에 있는 모든 
형제 원소를 찾아 객체로 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("div:last").prevAll().addClass("before");
  });
  </script>
  
<style>
  div { width:70px; height:70px; background:#abc; 
       
border:2px solid black; margin:10px; float:left; }
  div.before { 
border-color: red; }
  </style>
</head>
<body>
  
<div></div>
  <div></div>
  
<div></div>
  
<div></div>
</body>
</html>

29. siblings( expr )  Returns: jQuery
siblings( expr ), 실행후 jQuery 객체 
반환
Get a set of elements containing all of the unique siblings of each of the 
matched set of elements.
매치되어진 원소들의 모든 형제 원소들을 찾아 반환한다.
Can be filtered with an optional expressions.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   var len = 
$(".hilite").siblings()
                         .css("color", "red")
    
                     .length;
   $("b").text(len);
  });
  </script>
  <style>
  ul { float:left; 
margin:5px; font-size:16px; font-weight:bold; }
  p { color:blue; margin:10px 
20px; font-size:16px; padding:5px; 
     font-weight:bolder; }
  .hilite { 
background:yellow; }
</style>
</head>
<body>
  
<ul>
   <li>One</li>
   <li>Two</li>
   
<li class="hilite">Three</li>
   <li>Four</li>
  
</ul>
  <ul>
   <li>Five</li>
   
<li>Six</li>
   <li>Seven</li>
  </ul>
  
<ul>
   <li>Eight</li>
   <li 
class="hilite">Nine</li>
   <li>Ten</li>
   <li 
class="hilite">Eleven</li>
  </ul>
  <p>Unique 
siblings: 
<b></b></p>
</body>
</html>

30. andSelf( )  Returns: jQuery
andSelf( ), 실행후 jQuery 객체 반환
Add the previous selection to the current selection.
매치되어진 원소들의 상위의 형제 
원소들과 조상 원소 모두를 찾아 추가하여 객체로 반환한다.
이해가 잘 안됨
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("div").find("p").andSelf().addClass("border");
   
$("div").find("p").addClass("background");
  });
  </script>
  <style>
  p, div { margin:5px; 
padding:5px; }
  .border { border: 2px solid red; }
  .background { 
background:yellow; }
  </style>
</head>
<body>
  
<div>
   <p>First Paragraph</p>
   <p>Second 
Paragraph</p>
  </div>
</body>
</html>

31. end( )  Returns: jQuery
end( ), 실행후 jQuery 객체 반환
Revert the most recent 'destructive' operation, changing the set of matched 
elements to its previous state (right before the destructive operation).
현재 
보다 이전의 매치상태로 돌아가서 객체를 반환
잘 이해가 안됨
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
jQuery.fn.showTags = function (n) {
     var tags = this.map(function () { 

                             return this.tagName; 
                      
     })
                       .get().join(", ");
     $("b:eq(" + n + 
")").text(tags);
     return this;
   };
   $("p").showTags(0)
         .find("span")
         .showTags(1)
  
       .css("background", "yellow")
         .end()
         
.showTags(2)
         .css("font-style", "italic");
  });
  </script>
  <style>
  p, div { margin:1px; 
padding:1px; font-weight:bold; 
          font-size:16px; }
  div { 
color:blue; }
  b { color:red; }
  
</style>
</head>
<body>
  <p>
   Hi there 
<span>how</span> are you <span>doing</span>?
  
</p>
  <p>
   This <span>span</span> is one of 

   several <span>spans</span> in this
   
<span>sentence</span>.
  </p>
  <div>
   Tags 
in jQuery object initially: <b></b>
  </div>
  
<div>
   Tags in jQuery object after find: <b></b>
  
</div>
  <div>
   Tags in jQuery object after end: 
<b></b>
  </div>
</body>
</html>


<Manipulation>
1. html( )  Returns: String 
html( ), 실행후 문자열 반환
Get the html contents (innerHTML) of the first matched element. This property 
is not available on XML documents (although it will work for XHTML documents). 

매치되어진 첫번째 원소의 html을 가져와서 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("p").click(function () {
     var htmlStr = $(this).html();
     
$(this).text(htmlStr);
   });
  });
  </script>
  <style>
  p { margin:8px; 
font-size:20px; color:blue; 
     cursor:pointer; }
  b { 
text-decoration:underline; }
  button { cursor:pointer; }
  
</style>
</head>
<body>
  <p>
   
<b>Click</b> to change the <span 
id="tag">html</span>
  </p>
  <p>
   to a <span 
id="text">text</span> node.
  </p>
  <p>
   This 
<button name="nada">button</button> does nothing.
  
</p>
</body>
</html>


2. html( val )  Returns: jQuery 
html( val ), 실행후 jQuery 객체 반환
Set the html contents of every matched element. This property is not 
available on XML documents (although it will work for XHTML documents). 
매치되는 모든 원소들에게 주어진 html을 삽입하고 객체를 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("div").html("<span 
class='red'>Hello <b>Again</b></span>");
  });
  
</script>
  <style>
  .red { color:red; }
  
</style>
</head>
<body>
  
<span>Hello</span>
  <div></div>
  
<div></div>
  
<div></div>
</body>
</html>

3. text( )  Returns: String 
text( ), 실행후 문자열 반환
Get the text contents of all matched elements. 
매치되어진 원소의 태그를 제외한 문자열만 
반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   var str = 
$("p:first").text();
   $("p:last").html(str);
  });
  </script>
  <style>
  p { color:blue; 
margin:8px; }
  b { color:red; }
  
</style>
</head>
<body>
  
<p><b>Test</b> Paragraph.</p>
  
<p></p>
</body>
</html>

4. text( val )  Returns: jQuery 
text( val ), 실행후 jQuery 객체 반환
Set the text contents of all matched elements. 
매치된 원소들에 주어진 문자열을 삽입하고 객체를 
반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("p").text("<b>Some</b> new text.");
  });
  
</script>
  <style>
  p { color:blue; margin:8px; }
  
</style>
</head>
<body>
  <p>Test 
Paragraph.</p>
</body>
</html>

5. append( content )  Returns: jQuery 
append( content ) , 실행후 jQuery 객체 
반환
Append content to the inside of every matched element. 
매치되어진 원소에 주어진 내용을 
추가로 삽입한 후 객체 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("p").append("<b>Hello</b>");
  });
  </script>
  
<style>p { background:yellow; 
}</style>
</head>
<body>
  <p>I would like to 
say: </p>
</body>
</html>

6. appendTo( content )  Returns: jQuery 
appendTo( content ), 실행후 
jQuery 객체 반환
Append all of the matched elements to another, specified, set of elements. 

매치되어진 원소들의 내용들을 주어진 조건에 맞는 원소에 추가로 삽입한후  객체 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("span").appendTo("#foo"); // check append() examples
  });
  
</script>
  <style>#foo { background:yellow; 
}</style>
</head>
<body>
  <span>I have nothing 
more to say... </span>
  <div id="foo">FOO! 
</div>
</body>
</html>

7. prepend( content )  Returns: jQuery 
prepend( content ), 실행후 jQuery 객체 
반환
Prepend content to the inside of every matched element. 
매치되어진 원소들에 맨앞에 
주어진 내용을 삽입한후 객체를 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("p").prepend("<b>Hello </b>");
  });
  </script>
  
<style>p { background:yellow; 
}</style>
</head>
<body>
  <p>there 
friend!</p>
  
<p>amigo!</p>
</body>
</html>

8. prependTo( content )  Returns: jQuery 
prependTo( content )  실행후 jQuery 
객체 반환 
Prepend all of the matched elements to another, specified, set of elements. 

매칮되어진 원소의 내용을 주어진 것에 매치되는 원소의 맨앞에 추가 삽입한후 객체를 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("span").prependTo("#foo"); // check prepend() examples
  });
  
</script>
  <style>div { background:yellow; 
}</style>
</head>
<body>
  <div 
id="foo">FOO!</div>
  <span>I have something to say... 
</span>
</body>
</html>

9. after( content )  Returns: jQuery 
after( content ), 실행후 jQuery 객체를 
반환
Insert content after each of the matched elements. 
매치되는 모든 원소의 뒤에 주어진 내용을 
삽입
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("p").after("<b>Hello</b>");
  });
  </script>
  
<style>p { background:yellow; 
}</style>
</head>
<body>
  <p>I would like to 
say: </p>
</body>
</html>

10. before( content )  Returns: jQuery 
before( content )  실행후 jQuery 객체를 
반환
Insert content before each of the matched elements. 
매치되는 모는 원소의 앞에 주어진 내용 삽입
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" 
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("p").before("<b>Hello</b>");
  });
  </script>
  
<style>p { background:yellow; 
}</style>
</head>
<body>
  <p> is what I 
said...</p>
</body>
</html>

11. insertAfter( content )  Returns: jQuery 
insertAfter( content ), 실행후 
jQuery 객체 반환
Insert all of the matched elements after another, specified, set of elements. 

매치되어진 원소들을 주어진 것에 매치되는 원소의 뒤에 삽입한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("p").insertAfter("#foo"); // check after() examples
  });
  
</script>
  <style>#foo { background:yellow; 
}</style>
</head>
<body>
  <p> is what I 
said... </p><div 
id="foo">FOO!</div>
</body>
</html>

12. insertBefore( content )  Returns: jQuery 
insertBefore( content ), 실행후 
jQuery 객체 반환
Insert all of the matched elements before another, specified, set of 
elements. 
매치되어진 원소앞에 주어진 것에 매치된 원소를 삽입한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("p").insertBefore("#foo"); // check before() examples
  });
  
</script>
  <style>#foo { background:yellow; 
}</style>
</head>
<body>
  <div 
id="foo">FOO!</div><p>I would like to say: 
</p>
</body>
</html>

13. wrap( html )  Returns: jQuery 
wrap( html ), 실행후 jQuery 객체를 반환
Wrap all matched elements with a structure of other elements. 
매치되어진 원소를 
주어진 html로서 감싼후 객체를 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("span").wrap("<div><div><p><em><b></b></em></p></div></div>");
  
});
  </script>
  <style>
  div { border:2px blue solid; 
margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; 
}
  </style>
</head>
<body>
  <span>Span 
Text</span>
  <span>Another 
One</span>
</body>
</html>

14. wrap( elem )  Returns: jQuery 
wrap( elem ), 실행후 jQuery 객체 반환
Wrap all matched elements with a structure of other elements. 
매치된 모든 원소를 
주어진것에 매치되는 원소로 감싼다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("p").wrap(document.getElementById('content'));
  });
  
</script>
  <style>#content { background:#9f9; 
}</style>
</head>
<body>
  <p>Test 
Paragraph.</p><div 
id="content"></div>
</body>
</html>

15. wrapAll( html )  Returns: jQuery 
wrapAll( html )  실행후 jQuery 객체 
반환
Wrap all the elements in the matched set into a single wrapper element. 

매치되는 원소들을 주어진 html로 모두 하나로 감싼다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>");
  
});
  </script>
  <style>
  div { border:2px blue solid; 
margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; 
}
  strong { color:red; }
  
</style>
</head>
<body>
  <span>Span 
Text</span>
  <strong>What about me?</strong>
  
<span>Another One</span>
</body>
</html>

16. wrapAll( elem )  Returns: jQuery 
wrapAll( elem ), 실행후 jQuery 객체 반환 
Wrap all the elements in the matched set into a single wrapper element. 

매치되어진 원소들을 주어진 것에 매치되는 것으로 하나로 감싼다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("p").wrapAll(document.createElement("div"));
  });
  
</script>
  <style>
  div { border: 2px solid blue; }
  p { 
background:yellow; margin:4px; }
  
</style>
</head>
<body>
  
<p>Hello</p>
  <p>cruel</p>
  
<p>World</p>
</body>
</html>


17. wrapInner( html )  Returns: jQuery 
wrapInner( html ), 실행후 jQuery 
객체 반환
Wrap the inner child contents of each matched element (including text nodes) 
with an HTML structure. 
매치되어진 원소 속의 내용을 주어진 것으로 감싼다
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");
  
});
  </script>
  <style>
  div { border:2px green solid; 
margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; 
}
  </style>
</head>
<body>
  Plain old text, or 
is it?
</body>
</html>

18. wrapInner( elem )  Returns: jQuery 
wrapInner( elem ), 실행후 jQuery 객체를 
반환
Wrap the inner child contents of each matched element (including text nodes) 
with a DOM element. 
매치되어진 원소 속의 내용을 주어진 것에 매치된것으로 감싼다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("p").wrapInner(document.createElement("b"));
  });
  
</script>
  <style>p { background:#9f9; 
}</style>
</head>
<body>
  
<p>Hello</p>
  <p>cruel</p>
  
<p>World</p>
</body>
</html>

19. replaceWith( content )  Returns: jQuery 
replaceWith( content ), 실행후 
jQuery 객체 반환
Replaces all matched elements with the specified HTML or DOM elements. 

매치되어진 원소를 주어진 내용과 치환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("button").click(function () {
     $(this).replaceWith("<div>" + 
$(this).text() + "</div>");
   });
  });
  </script>
  <style>
  button { display:block; 
margin:3px; color:red; width:200px; }
  div { color:red; border:2px solid 
blue; width:200px; 
       margin:3px; text-align:center; }
  
</style>
</head>
<body>
  
<button>First</button>
  <button>Second</button>
  
<button>Third</button>
</body>
</html>

20. replaceAll( selector )  Returns: jQuery 
replaceAll( selector ), 실행후 
jQuery 객체 반환
Replaces the elements matched by the specified selector with the matched 
elements. 
매치되어진 것들을 주어진 것에 매치되는 것에 모두 바꿈
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("<b>Paragraph. 
</b>").replaceAll("p"); // check replaceWith() examples
  });
  
</script>
  
</head>
<body>
  
<p>Hello</p>
  <p>cruel</p>
  
<p>World</p>
</body>
</html>

21. empty( )  Returns: jQuery 
empty( )  실행후 jQuery 객체 반환
Remove all child nodes from the set of matched elements. 
매치되어진 모든 것들을 
없앤다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("button").click(function () {
     $("p").empty();
   });
  });
  </script>
  <style>
  p { background:yellow; 
}
  </style>
</head>
<body>
  <p>
   
Hello, <span>Person</span> <a href=";">and 
person</a>
  </p>
  <button>Call empty() on above 
paragraph</button>
</body>
</html>

22. remove( expr )  Returns: jQuery 
remove( expr ), 실행후 jQuery 객체를 반환
Removes all matched elements from the DOM. 
매치되는 모든 원소를 옮기다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("button").click(function () {
     $("p").remove();
   });
  });
  </script>
  <style>p { background:yellow; 
margin:6px 0; }</style>
</head>
<body>
  
<p>Hello</p> 
  how are 
  <p>you?</p>
  
<button>Call remove() on 
paragraphs
</body>
</html>

23. clone( )  Returns: jQuery 
clone( )  실행후 jQuery 객체 반환
Clone matched DOM Elements and select the clones. 
선택되어진 원소를 복사
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
$("b").clone().prependTo("p");
  });
  </script>
  

</head>
<body>
  <b>Hello</b><p>, how 
are you?</p>
</body>
</html>

24. clone( true )  Returns: jQuery 
clone( true )  실행후 jQuery 객체 반환
Clone matched DOM Elements, and all their event handlers, and select the 
clones. 
완벽한 복사
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("button").click(function(){
     
$(this).clone(true).insertAfter(this);
   });
  });
  </script>
  
</head>
<body>
  
<button>Clone 
Me!</button>
</body>
</html>


<CSS>
1. css( name )  Returns: String 
css( name )  실행후 문자열 반환
Return a style property on the first matched element. 
매치된 원소에서 주어진 스타일 
속성이 발견되면 그 값을 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("div").click(function () {
     var color = 
$(this).css("background-color");
     $("#result").html("That div is <span 
style='color:" +
                        color + ";'>" + color + 
"</span>.");
   });
  });
  </script>
  <style>
  div { width:60px; 
height:60px; margin:5px; float:left; }
  
</style>
</head>
<body>
  <span id="result"> 
</span>
  <div style="background-color:blue;"></div>
  
<div style="background-color:rgb(15,99,30);"></div>
  <div 
style="background-color:#123456;"></div>
  <div 
style="background-color:#f11;"></div>
</body>
</html>

2. css( properties )  Returns: jQuery 
css( properties )  실행후 jQuery 
객체 반환
Set a key/value object as style properties to all matched elements. 
매치되어진 
모든 원소에 주어진 키와 값으로 이루어진 속성들의 배열의 스타일을 적용하고 객체를 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("p").hover(function () {
     $(this).css({ "background-color":"yellow", 
"font-weight":"bolder" });
   }, function () {
     var cssObj = {
    
   "background-color": "#ddd",
       "font-weight": "",
       color: 
"rgb(0,40,244)"
     }
     $(this).css(cssObj);
   });
  });
  </script>
  <style>
  p { color:green; }
  
</style>
</head>
<body>
  <p>
   Move the 
mouse over a paragraph.
  </p>
  <p>
   Like this one or 
the one above.
  </p>
</body>
</html>

3. css( name, value )  Returns: jQuery 
css( name, value )  실행후 jQuery 객체 
반환
Set a single style property to a value on all matched elements. 
하나의 속성과 
값을 받아 매치되어진 모든 원소에 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("p").mouseover(function () {
     $(this).css("color","red");
   });
  });
  </script>
  <style>
  p { color:blue; 
width:200px; font-size:14px; }
  
</style>
</head>
<body>
  <p>
   Just roll 
the mouse over me.
  </p>
  <p>
   Or me to see a color 
change.
  </p>
</body>
</html>

4. offset( )  Returns: Object{top,left} 
offset( )  실행후 탑과 레프트에 해당하는 위치 
정보를 반환
Get the current offset of the first matched element relative to the viewport. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   var p = 
$("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", 
top: " + offset.top );
  });
  </script>
  <style>
  p { 
margin-left:10px; }
  </style>
</head>
<body>
  
<p>Hello</p><p>2nd 
Paragraph</p>
</body>
</html>

5. height( )  Returns: Integer 
height( )  실행후 정수형을 반환한다.
Get the current computed, pixel, height of the first matched element. 
매치된 
첫번째 원소의 높이를 픽셀로 반환한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   function 
showHeight(ele, h) {
     $("div").text("The height for the " + ele + 
    
               " is " + h + "px.");
   }
   $("#getp").click(function () { 

     showHeight("paragraph", $("p").height()); 
   });
   
$("#getd").click(function () { 
     showHeight("document", 
$(document).height()); 
   });
   $("#getw").click(function () { 
     
showHeight("window", $(window).height()); 
   });
  });
  </script>
  <style>
  body { background:yellow; 
}
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px 
red solid; }
  div { color:red; font-weight:bold; }
  
</style>
</head>
<body>
  <button id="getp">Get 
Paragraph Height</button>
  <button id="getd">Get Document 
Height</button>
  <button id="getw">Get Window 
Height</button>
  <div> </div>
  <p>
   Sample 
paragraph to test height
  
</p>
</body>
</html>

6. height( val )  Returns: jQuery 
height( val )  실행후 jQuery 객체 반환
Set the CSS height of every matched element. 
매치되는 모든 원소에 주어진 높이를 
적용한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("div").one('click', function () {
     $(this).height(30)
            
.css({cursor:"auto", backgroundColor:"green"});
   });
  });
  </script>
  <style>
  div { width:50px; 
height:70px; float:left; margin:5px;
       background:rgb(255,140,0); 
cursor:pointer; }
  </style>
</head>
<body>
  
<div></div>
  <div></div>
  
<div></div>
  <div></div>
  
<div></div>
</body>
</html>

7. width( )  Returns: Integer 
width( )  실행후 정수형을 반환
Get the current computed, pixel, width of the first matched element. 
매치되는 
첫번째 원소의 너비를 픽셀로 반환
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   function 
showWidth(ele, w) {
     $("div").text("The width for the " + ele + 
      
             " is " + w + "px.");
   }
   $("#getp").click(function () { 

     showWidth("paragraph", $("p").width()); 
   });
   
$("#getd").click(function () { 
     showWidth("document", 
$(document).width()); 
   });
   $("#getw").click(function () { 
     
showWidth("window", $(window).width()); 
   });
  });
  </script>
  <style>
  body { background:yellow; 
}
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px 
red solid; }
  div { color:red; font-weight:bold;  }
  
</style>
</head>
<body>
  <button id="getp">Get 
Paragraph Width</button>
  <button id="getd">Get Document 
Width</button>
  <button id="getw">Get Window 
Width</button>
  <div> </div>
  <p>
   Sample 
paragraph to test width
  </p>
</body>
</html>
8. width( val )  Returns: jQuery 
width( val )  실행후 jQuery 객체를 반환
Set the CSS width of every matched element. 
매치되는 모든 원소에 주어진 너비를 적용한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("div").one('click', function () {
     $(this).width(30)
            
.css({cursor:"auto", "background-color":"blue"});
   });
  });
  </script>
  <style>
  div { width:70px; 
height:50px; float:left; margin:5px;
       background:red; cursor:pointer; 
}
  </style>
</head>
<body>
  
<div></div>
  <div></div>
  
<div></div>
  <div></div>
  
<div></div>
</body>
</html>


<Events>
1. ready( fn )  Returns: jQuery 
ready( fn )  실행후 jQuery 객체를 반환
Binds a function to be executed whenever the DOM is ready to be traversed and 
manipulated. 
문서가 준비가 되면 그 시점에 함수를 실행시킨다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("p").text("The DOM is 
now loaded and can be manipulated.");
  });
  </script>
  
<style>p { color:red; 
}</style>
</head>
<body>
  <p>
  
</p>
</body>
</html>

2. bind( type, data, fn )  Returns: jQuery 
bind( type, data, fn )  실행후 
jQuery 객체를 반환
Binds a handler to a particular event (like click) for each matched element. 

지정된 이벤트가 일어날때까지 기다렷다가 함수 실행
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("p").bind("click", function(e){
     var str = "( " + e.pageX + ", " + 
e.pageY + " )";
     $("span").text("Click happened! " + str);
   
});
   $("p").bind("dblclick", function(){
     
$("span").text("Double-click happened in " + this.tagName);
   });
  });
  </script>
  <style>
  p { background:yellow; 
font-weight:bold; cursor:pointer; 
     padding:5px; }
  span { color:red; 
}
  </style>
</head>
<body>
  <p>Click or 
double click here.</p>
  
<span></span>
</body>
</html>

3. one( type, data, fn )  Returns: jQuery 
one( type, data, fn )  실행후 
jQuery 객체 반환
Binds a handler to a particular event to be executed once for each matched 
element. 
지정된 이벤트가 일어날때까지 기다렷다가 한번만 실행
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   var n = 0;
   
$("div").one("click", function(){
     var index = $("div").index(this);
  
   $(this).css({ borderStyle:"inset",
                   cursor:"auto" 
});
     $("p").text("Div at index #" + index + " clicked." +
            
     "  That's " + ++n + " total clicks.");
   });
  });
  </script>
  <style>
  div { width:60px; 
height:60px; margin:5px; float:left;
       background:green; border:10px 
outset; 
       cursor:pointer; }
  p { color:red; margin:0; clear:left; 
}
  </style>
</head>
<body>
  
<div></div>
  <div></div>
  
<div></div>
  <div></div>
  
<div></div>
  <p>Click a green 
square...</p>
</body>
</html>

4. trigger( type, data )  Returns: jQuery 
trigger( type, data )  실행후 
jQuery 객체 반환
Trigger a type of event on every matched element. 
매치되는 모든 원소에 지정된 타입의 
이벤트를 발생시킨다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("button:first").click(function () {
     update($("span:first"));
   
});
   $("button:last").click(function () {
     
$("button:first").trigger('click');
     update($("span:last"));
   });
   function update(j) {
     var n = parseInt(j.text(), 0);
     
j.text(n + 1);
   }
  });
  </script>
  <style>
  button { margin:10px; 
}
  div { color:blue; font-weight:bold; }
  span { color:red; }
  
</style>
</head>
<body>
  <button>Button 
#1</button>
  <button>Button #2</button>
  
<div><span>0</span> button #1 clicks.</div>
  
<div><span>0</span> button #2 
clicks.</div>
</body>
</html>

5. triggerHandler( type, data )  Returns: jQuery 
triggerHandler( type, 
data )  실행후 jQuery객체 반환
This particular method triggers all bound event handlers on an element (for a 
specific event type) WITHOUT executing the browsers default actions. 
잘은 
모르겟지만 실제적인 행위는 하지 않고 그결과만 실행한다는 뜻인것 같음
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("#old").click(function(){
     $("input").trigger("focus");
   });
   
$("#new").click(function(){
     $("input").triggerHandler("focus");
   
});
   $("input").focus(function(){
     
$("<span>Focused!</span>").appendTo("body").fadeOut(1000);
   
});
  });
  </script>
  
</head>
<body>
  
<button id="old">.trigger("focus")</button>
  <button 
id="new">.triggerHandler("focus")</button><br/><br/>
  
<input type="text" value="To Be 
Focused"/>
</body>
</html>


6. unbind( type, data )  Returns: jQuery 
unbind( type, data ), 실행후 jQuery 
객체 반환
This does the opposite of bind, it removes bound events from each of the 
matched elements. 
bind와 정반대의 역활을 하며 매치되는 모든 원소에 바운드 이벤트를 제거한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   function aClick() 
{
     $("div").show().fadeOut("slow");
   }
   
$("#bind").click(function () {
     // could use .bind('click', aClick) 
instead but for variety...
     $("#theone").click(aClick)
              
   .text("Can Click!");
   });
   $("#unbind").click(function () {
     
$("#theone").unbind('click', aClick)
                 .text("Does 
nothing...");
   });
  });
  </script>
  <style>
  button { margin:5px; 
}
  button#theone { color:red; background:yellow; }
  
</style>
</head>
<body>
  <button 
id="theone">Does nothing...</button>
  <button id="bind">Bind 
Click</button>
  <button id="unbind">Unbind 
Click</button>
  <div 
style="display:none;">Click!</div>
</body>
</html>

7. hover( over, out )  Returns: jQuery 
hover( over, out )  실행후 jQuery 객체를 
반환
Simulates hovering (moving the mouse on, and off, an object). This is a 
custom method which provides an 'in' to a frequent task. 
마우스 오버와 아웃시 행위를 
지정할수 있다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("li").hover(
     function () {
       $(this).append($("<span> 
***</span>"));
     }, 
     function () {
       
$(this).find("span:last").remove();
     }
   );
  });
  </script>
  <style>
  ul { margin-left:20px; 
color:blue; }
  li { cursor:default; }
  span { color:red; }
  
</style>
</head>
<body>
  <ul>
   
<li>Milk</li>
   <li>Bread</li>
   
<li>Chips</li>
   <li>Socks</li>
  
</ul>
</body>

8. toggle( fn, fn )  Returns: jQuery 
toggle( fn, fn )  실행후 jQuery 객체 
반환
Toggle between two function calls every other click. 
클릭시 두개의 함수를 반복적으로 
실행
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("li").toggle(
     function () {
       $(this).css("list-style-type", 
"disc")
              .css("color", "blue");
     },
     function () 
{
       $(this).css({"list-style-type":"", "color":""});
     }
   
);
  });
  </script>
  <style>
  ul { margin:10px; 
list-style:inside circle; font-weight:bold; }
  li { cursor:pointer; }
  
</style>
</head>
<body>
  <ul>
   
<li>Go to the store</li>
   <li>Pick up 
dinner</li>
   <li>Debug crash</li>
   <li>Take a 
jog</li>
  </ul>
</body>
</html>

9. blur( )  Returns: jQuery 
blur( )  실행후 jQuery 객체 반환
Triggers the blur event of each matched element. 

10. blur( fn )  Returns: jQuery 
blur( fn )  실행후 jQuery 객체 반환
Bind a function to the blur event of each matched element. 


11. change( )  Returns: jQuery 
change( )  실행후 jQuery 객체 반환
Triggers the change event of each matched element. 

12. change( fn )  Returns: jQuery 
change( fn )  실행후 jQuery 객체 반환
Binds a function to the change event of each matched element. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("select").change(function () {
         var str = "";
         $("select 
option:selected").each(function () {
               str += $(this).text() + " 
";
             });
         $("div").text(str);
       })
       
.change();
  });
  </script>
  <style>
  div { color:red; }
  
</style>
</head>
<body>
  <select name="sweets" 
multiple="multiple">
   <option>Chocolate</option>
   
<option selected="selected">Candy</option>
   
<option>Taffy</option>
   <option 
selected="selected">Carmel</option>
   
<option>Fudge</option>
   
<option>Cookie</option>
  </select>
  
<div></div>
</body>
</html>

13. click( )  Returns: jQuery 
click( )  실행후 jQuery 객체 반환
Triggers the click event of each matched element. 

14. click( fn )  Returns: jQuery 
click( fn )  실행후 jQuery 객체 반환
Binds a function to the click event of each matched element. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   
   
$("p").click(function () { 
     $(this).slideUp(); 
   });
   
$("p").hover(function () {
     $(this).addClass("hilite");
   }, function 
() {
     $(this).removeClass("hilite");
   });
  });
  </script>
  <style>
  p { color:red; margin:5px; 
cursor:pointer; }
  p.hilite { background:yellow; }
  
</style>
</head>
<body>
  <p>First 
Paragraph</p>
  <p>Second Paragraph</p>
  <p>Yet 
one more Paragraph</p>
</body>
</html>

15. dblclick( )  Returns: jQuery 
dblclick( )  실행후 jQuery 객체를 리턴
Triggers the dblclick event of each matched element. 

16. dblclick( fn )  Returns: jQuery 
dblclick( fn )  실행후 jQuery 객체를 리턴
Binds a function to the dblclick event of each matched element. 

17. error( )  Returns: jQuery 
Triggers the error event of each matched 
element. 

18. error( fn )  Returns: jQuery 
Binds a function to the error event 
of each matched element. 


19. focus( )  Returns: jQuery 
Triggers the focus event of each 
matched element. 
20. focus( fn )  Returns: jQuery 
Binds a function to the focus event of 
each matched element. 


21. keydown( )  Returns: jQuery 
Triggers the keydown event of each 
matched element. 
22. keydown( fn )  Returns: jQuery 
Bind a function to the keydown event 
of each matched element. 


23. keypress( )  Returns: jQuery 
Triggers the keypress event of each 
matched element. 
24. keypress( fn )  Returns: jQuery 
Binds a function to the keypress 
event of each matched element. 


25. keyup( )  Returns: jQuery 
Triggers the keyup event of each 
matched element. 
26. keyup( fn )  Returns: jQuery 
Bind a function to the keyup event of 
each matched element. 

27. load( fn )  Returns: jQuery 
Binds a function to the load event of 
each matched element. 


28. mousedown( fn )  Returns: jQuery 
Binds a function to the 
mousedown event of each matched element. 

29. mousemove( fn )  Returns: jQuery 
Bind a function to the mousemove 
event of each matched element. 

30. mouseout( fn )  Returns: jQuery 
Bind a function to the mouseout 
event of each matched element. 

31. mouseover( fn )  Returns: jQuery 
Bind a function to the mouseover 
event of each matched element. 

32. mouseup( fn )  Returns: jQuery 
Bind a function to the mouseup 
event of each matched element. 

33. resize( fn )  Returns: jQuery 
Bind a function to the resize event 
of each matched element. 


34. scroll( fn )  Returns: jQuery 
Bind a function to the scroll event 
of each matched element. 


35. select( )  Returns: jQuery 
Trigger the select event of each 
matched element. 
36. select( fn )  Returns: jQuery 
Bind a function to the select event of 
each matched element. 


37. submit( )  Returns: jQuery 
Trigger the submit event of each 
matched element. 
38. submit( fn )  Returns: jQuery 
Bind a function to the submit event of 
each matched element. 


39. unload( fn )  Returns: jQuery 
Binds a function to the unload 
event of each matched element. 



<Effect>
1. show( )  Returns: jQuery
Displays each of the set of matched elements 
if they are hidden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("p").show()
  
});
  </script>
</head>
<body>
  <p 
style="display:none">Hello</p>
</body>
</html>

2. show( speed, callback )  Returns: jQuery
Show all matched elements 
using a graceful animation and firing an optional callback after 
completion.
##A string representing one of the three predefined speeds 
("slow", "normal", or "fast") or the number of milliseconds to run the animation 
(e.g. 1000).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("button").click(function () {
     $("p").show("slow");
   });
  });
  </script>
  <style>
  p { background:yellow; 
}
  </style>
</head>
<body>
  <button>Show 
it</button>
  <p style="display: 
none">Hello</p>
</body>
</html>

3. hide( )  Returns: jQuery
Hides each of the set of matched elements if 
they are shown.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("p").hide();
   $("a").click(function () {
     
$(this).hide();
     return false;
   });
  });
  </script>
</head>
<body>
  <p>Hello</p>
  <a 
href="#">Click to hide me too</a>
  <p>Here is another 
paragraph</p>
</body>
</html>

4. hide( speed, callback )  Returns: jQuery
Hide all matched elements 
using a graceful animation and firing an optional callback after completion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("button").click(function () {
     $("p").hide("slow");
   });
  });
  </script>
  <style>
  p { background:#dad; 
font-weight:bold; }
  </style>
</head>
<body>
  
<button>Hide 'em</button>
  <p>Hiya</p>
  
<p>Such interesting text, 
eh?</p>
</body>
</html>

5. toggle( )  Returns: jQuery
Toggles each of the set of matched 
elements.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("button").click(function () {
     $("p").toggle();
   });
  });
  </script>
</head>
<body>
  <button>Toggle</button>
  
<p>Hello</p>
  <p style="display: none">Good 
Bye</p>
</body>
</html>

6. slideDown( speed, callback )  Returns: jQuery
Reveal all matched 
elements by adjusting their height and firing an optional callback after 
completion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $(document.body).click(function () {
     if 
($("div:first").is(":hidden")) {
       $("div").slideDown("slow");
     } 
else {
       $("div").hide();
     }
   });
  });
  </script>
  <style>
  div { background:#de9a44; 
margin:3px; width:80px;
       height:40px; display:none; float:left; }
  
</style>
</head>
<body>
  Click me!
  
<div></div>
  <div></div>
  
<div></div>
</body>
</html>

7. slideUp( speed, callback )  Returns: jQuery
Hide all matched elements 
by adjusting their height and firing an optional callback after completion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $(document.body).click(function () {
     if 
($("div:first").is(":hidden")) {
       $("div").show("fast");
     } else 
{
       $("div").slideUp();
     }
   });
  });
  </script>
  <style>
  div { background:#3d9a44; 
margin:3px; width:80px;
       height:40px; float:left; }
  
</style>
</head>
<body>
  Click me!
  
<div></div>
  <div></div>
  
<div></div>
  <div></div>
  
<div></div>
</body>
</html>



8. slideToggle( speed, callback )  Returns: jQuery
Toggle the 
visibility of all matched elements by adjusting their height and firing an 
optional callback after completion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("button").click(function () {
     $("p").slideToggle("slow");
   
});
  });
  </script>
  <style>
  p { width:400px; }
  
</style>
</head>
<body>
  
<button>Toggle</button>
  <p>
   This is the paragraph 
to end all paragraphs.  You
   should feel <em>lucky</em> to have 
seen such a paragraph in
   your life.  Congratulations!
  
</p>
</body>
</html>

9. fadeIn( speed, callback )  Returns: jQuery
Fade in all matched elements 
by adjusting their opacity and firing an optional callback after completion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $(document.body).click(function () {
     
$("div:hidden:first").fadeIn("slow");
   });
  });
  </script>
  <style>
  span { color:red; 
cursor:pointer; }
  div { margin:3px; width:80px; display:none;
       
height:80px; float:left; }
  div#one { background:#f00; }
  div#two { 
background:#0f0; }
  div#three { background:#00f; }
  
</style>
</head>
<body>
  <span>Click 
here...</span>
  <div id="one"></div>
  <div 
id="two"></div>
  <div 
id="three"></div>
</body>
</html>


10. fadeOut( speed, callback )  Returns: jQuery
Fade out all matched 
elements by adjusting their opacity and firing an optional callback after 
completion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("p").click(function () {
     $("p").fadeOut("slow");
   });
  });
  </script>
  <style>
  p { font-size:150%; 
cursor:pointer; }
  </style>
</head>
<body>
  
<p>
   If you click on this paragraph
   you'll see it just fade 
away.
  </p>
</body>
</html>

11. fadeTo( speed, opacity, callback )  Returns: jQuery
Fade the opacity 
of all matched elements to a specified opacity and firing an optional callback 
after completion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("p:first").click(function () {
     $(this).fadeTo("slow", 
0.33);
   });
  });
  </script>
</head>
<body>
  <p>
   Click this paragraph to 
see it fade.
  </p>
  <p>
   Compare to this one that won't 
fade.
  </p>
</body>
</html>

12. animate( params, duration, easing, callback )  Returns: jQuery
A 
function for making your own, custom animations.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("#right").click(function(){
     $(".block").animate({"left": 
"+=50px"}, "slow");
   });
   $("#left").click(function(){
     $(".block").animate({"left": 
"-=50px"}, "slow");
   });
  });
  </script>
  <style>
  div {
   
position:absolute;
   background-color:#abc;
   left:50px;
   
width:90px;
   height:90px;
   margin:5px;
  }
  
</style>
</head>
<body>
  <button 
id="left">≪</button> <button 
id="right">≫</button>
<div class="block"></div>
</body>
</html>

13. animate( params, options )  Returns: jQuery
A function for making your 
own, custom animations.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   // Using multiple unit types within one animation.
   
$("#go").click(function(){
     $("#block").animate({
       width: 
"70%",
       opacity: 0.4,
       marginLeft: "0.6in",
       
fontSize: "3em",
       borderWidth: "10px"
     }, 1500 );
   });
  });
  </script>
  <style>
  div {
   
background-color:#bca;
   width:100px;
   border:1px solid green;
  
}
  </style>
</head>
<body>
  <button 
id="go">≫ Run</button>
  <div 
id="block">Hello!</div>
</body>
</html>

14. stop( )  Returns: jQuery
Stops all the currently running animations on 
all the specified elements.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   // Start animation
   $("#go").click(function(){
     
$(".block").animate({left: '+=100px'}, 2000);
   });
   // Stop animation when button is clicked
   
$("#stop").click(function(){
     $(".block").stop();
   });
   // Start animation in the opposite direction
   
$("#back").click(function(){
     $(".block").animate({left: '-=100px'}, 
2000);
   });
  });
  </script>
  <style>div {
   position: 
absolute;
   background-color: #abc;
   left: 0px;
   top:30px;
   
width: 60px;
   height: 60px;
   margin: 5px;
  }
  
</style>
</head>
<body>
  <button 
id="go">Go</button>
  <button 
id="stop">STOP!</button>
  <button 
id="back">Back</button>
  <div 
class="block"></div>
</body>
</html>

15. queue( )  Returns: Array<Function>
Returns a reference to the 
first element's queue (which is an array of functions).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("#show").click(function () {
     var n = $("div").queue("fx");
  
   $("span").text("Queue length is: " + n.length);
   });
   function 
runIt() {
     $("div").show("slow");
     
$("div").animate({left:'+=200'},2000);
     $("div").slideToggle(1000);
  
   $("div").slideToggle("fast");
     
$("div").animate({left:'-=200'},1500);
     $("div").hide("slow");
     
$("div").show(1200);
     $("div").slideUp("normal", runIt);
   }
   
runIt();
  });
  </script>
  <style>
  div { margin:3px; 
width:40px; height:40px;
       position:absolute; left:0px; top:30px;
    
   background:green; display:none; }
  div.newcolor { background:blue; }
  
span { color:red; }
  </style>
</head>
<body>
  
<button id="show">Show Length of Queue</button>
  
<span></span>
  
<div></div>
</body>
</html>

16. queue( callback )
Adds a new function, to be executed, onto the end of 
the queue of all matched elements.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $(document.body).click(function () {
     $("div").show("slow");
  
   $("div").animate({left:'+=200'},2000);
     $("div").queue(function () 
{
       $(this).addClass("newcolor");
       $(this).dequeue();
     
});
     $("div").animate({left:'-=200'},500);
     
$("div").queue(function () {
       $(this).removeClass("newcolor");
    
   $(this).dequeue();
     });
     $("div").slideUp();
   });
  });
  </script>
  <style>
  div { margin:3px; 
width:40px; height:40px;
       position:absolute; left:0px; top:30px;
    
   background:green; display:none; }
  div.newcolor { background:blue; }
  
</style>
</head>
<body>
  Click here...
  
<div></div>
</body>
</html>

17. queue( queue )
Replaces the queue of all matched element with this new 
queue (the array of functions).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("#start").click(function () {
     $("div").show("slow");
     
$("div").animate({left:'+=200'},5000);
     $("div").queue(function () {
  
     $(this).addClass("newcolor");
       $(this).dequeue();
     });
  
   $("div").animate({left:'-=200'},1500);
     $("div").queue(function () 
{
       $(this).removeClass("newcolor");
       $(this).dequeue();
  
   });
     $("div").slideUp();
   });
   $("#stop").click(function () 
{
     $("div").queue("fx", []);
     $("div").stop();
   });
  });
  </script>
  <style>
  div { margin:3px; 
width:40px; height:40px;
       position:absolute; left:0px; top:30px;
    
   background:green; display:none; }
  div.newcolor { background:blue; }
  
</style>
</head>
<body>
  <button 
id="start">Start</button>
  <button 
id="stop">Stop</button>
  
<div></div>
</body>
</html>

18. dequeue( )  Returns: jQuery
Removes a queued function from the front 
of the queue and executes it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
           "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
  $(document).ready(function(){
   $("button").click(function () {
     $("div").animate({left:'+=200px'}, 
2000);
     $("div").animate({top:'0px'}, 600);
     
$("div").queue(function () {
       $(this).toggleClass("red");
       
$(this).dequeue();
     });
     $("div").animate({left:'10px', 
top:'30px'}, 700);
   });
  });
  </script>
  <style>
  div { margin:3px; 
width:50px; position:absolute;
       height:50px; left:10px; top:30px;
  
     background-color:yellow; }
  div.red { background-color:red; }
  
</style>
</head>
<body>
  
<button>Start</button>
  
<div></div>
</body>
</html>
 
 

출처 : http://docs.springnote.com/pages/591487?print=1
     , http://www.jiny.kr/jiny/417?category=22

'Front-Html > Jquery' 카테고리의 다른 글

jquery iframe load 처리 (2)	2011.12.05
jQuery로 select box tag Control (1)	2011.10.27
iframe 높이 자동 조절 (1)	2011.10.19
jquery cookie plugin (2)	2010.12.30
jquery plugin blockUI (1)	2010.04.09

Posted by seongsland

« 2024/5 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

seongsland

jquery

------------------ 1

$()

$("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)

load(url,params,callback)

loadIfModified(url,params,callback)

$.get(url,params,callback)

$.getIfModified(url,params,callback)

$.post(url,params,callback)

$.ajaxTimeout(Timeout)

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

유틸리티 함수

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( 콜백 함수)